Novedades de Herramientas para desarrolladores (Chrome 76)

Kayce Basques
Kayce Basques

¡Hola! Estas son las novedades de las Herramientas para desarrolladores de Chrome en Chrome 76.

Autocompletar con valores CSS

Cuando se agregan declaraciones de diseño a un nodo del DOM, a veces, el valor de la declaración es más fácil de recordar que el nombre de la declaración. Por ejemplo, cuando haces que un nodo <p> esté en negrita, el valor bold puede ser más fácil de recordar que el nombre font-weight. La IU de autocompletado del panel de estilo ahora admite valores de CSS. Si recuerdas el valor de palabra clave que deseas, pero no recuerdas el nombre de la propiedad, intenta escribir el valor y el autocompletado te ayudará a encontrar el nombre que estás buscando.

Después de escribir “negrita”, el panel Estilos se completa automáticamente con “font-weight: bold”.

Figura 1: Después de escribir bold, el panel Estilos se autocompletará en font-weight: bold.

Envía comentarios sobre esta nueva función en el problema de Chromium #931145.

Una nueva IU para la configuración de red

El panel de red antes tenía un problema de usabilidad por el que no se podía acceder a opciones como el menú de limitación cuando la ventana de Herramientas para desarrolladores era estrecha. Para solucionar este problema y ordenar el panel Network, se trasladaron algunas opciones menos usadas detrás del nuevo panel Network Settings El botón Configuración de red.

Configuración de red

Figura 2: Configuración de red.

Las siguientes opciones se trasladaron a Network Settings: Use Large Request Rows, Group By Frame, Show Overview y Capture Screenshots. En la Figura 3, se asignan las ubicaciones anteriores a las nuevas.

Asignación de las ubicaciones anteriores a la nueva.

Figura 3: Asignación de las ubicaciones anteriores a la nueva.

Envía comentarios sobre este cambio en la IU para el problema de Chromium #892969.

Mensajes de WebSocket en exportaciones de HAR

Cuando exportas un archivo HAR desde el panel Red para compartir registros de red con tus colegas, el archivo HAR ahora incluye mensajes de WebSocket. La propiedad _webSocketMessages comienza con un guion bajo para indicar que es un campo personalizado.

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

Envía comentarios sobre esta nueva función en el problema de Chromium #496006.

Botones de importación y exportación de HAR

Comparte registros de red con colegas con mayor facilidad con los nuevos botones Export All As HAR With Content Exportar y Import HAR File Importar. Hace tiempo que la importación y exportación de HAR existe en Herramientas para desarrolladores. Los botones más detectables son el nuevo cambio.

Los nuevos botones HAR.

Figura 4: Los nuevos botones HAR.

Envía comentarios sobre este cambio en la IU para el problema de Chromium 904585.

Uso total de memoria en tiempo real

El panel Memoria ahora muestra el uso total de memoria en tiempo real.

Uso total de memoria en tiempo real.

Figura 5: En la parte inferior del panel de Memoria, se muestra que la página está usando 43.4 MB de memoria en total. 209 KB/s indica que el uso total de memoria está aumentando a 209 KB por segundo.

Consulta también el monitor de rendimiento para realizar un seguimiento del uso de la memoria en tiempo real.

Envía comentarios sobre esta nueva función en el problema de Chromium #958177.

Números de puerto del registro del service worker

El panel Service Workers ahora incluye números de puerto en sus títulos para facilitar el seguimiento del service worker que depures.

Puertos de service worker

Figura 6: Puertos de service worker

Envía comentarios sobre este cambio en la IU del problema de Chromium #601286.

Cómo inspeccionar eventos de recuperación en segundo plano y sincronización en segundo plano

Usa la nueva sección Servicios en segundo plano del panel Aplicación para supervisar los eventos de Recuperación en segundo plano y de Sincronización en segundo plano. Dado que los eventos de recuperación en segundo plano y de sincronización en segundo plano ocurren en segundo plano, no sería muy útil si Herramientas para desarrolladores solo registrara los eventos de recuperación y sincronización en segundo plano mientras Herramientas para desarrolladores estaba abierta. Por lo tanto, una vez que comienzas a grabar, los eventos de recuperación en segundo plano y de sincronización en segundo plano seguirán registrándose, incluso después de cerrar la pestaña e incluso después de cerrar Chrome.

Ve al panel Application, abre la pestaña Background Recovery o Background Sync, y haz clic en Record Registro para comenzar a registrar eventos. Haz clic en un evento para ver más información al respecto.

Panel de recuperación en segundo plano

Figura 7: Panel de recuperación en segundo plano Demostración de Maxim Salnikov

Panel de sincronización en segundo plano

Figura 8: Panel de sincronización en segundo plano

Envía comentarios sobre estas funciones nuevas en el problema de Chromium #927726.

Puppeteer para Firefox

Puppeteer para Firefox es un nuevo proyecto experimental que te permite automatizar Firefox con la API de Puppeteer. En otras palabras, ahora puedes automatizar Firefox y Chromium con la misma API de Node, como se muestra en el siguiente video.

Después de ejecutar node example.js, se abre Firefox y se inserta el texto page en el cuadro de búsqueda del sitio de documentación de Puppeteer. Luego, la misma tarea se repite en Chromium.

Consulta la charla sobre Puppeteer de Joel y Andrey de Google I/O 2019 para obtener más información sobre Puppeteer y Puppeteer para Firefox. El anuncio de Firefox será aproximadamente a las 4:05 p.m.

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

  • Envíanos tus sugerencias o comentarios a través de crbug.com.
  • Informa un problema en Herramientas para desarrolladores mediante Más opciones   Más   > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
  • Envía un tweet a @ChromeDevTools.
  • Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).

Novedades de Herramientas para desarrolladores

Una lista de todos los temas abordados en la serie Novedades de Herramientas para desarrolladores.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Se canceló Chrome 82.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59