Novedades de Herramientas para desarrolladores (Chrome 76)

Kayce Basques
Kayce Basques
X GitHub Error

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

Autocompletar con valores de CSS

Cuando se agregan declaraciones de estilo a un nodo 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 se pone en negrita un nodo <p>, el valor bold podría ser más fácil de recordar que el nombre font-weight. La IU de autocompletar del panel Estilo ahora admite valores CSS. Si recuerdas el valor de la palabra clave que deseas, pero no recuerdas el nombre de la propiedad, intenta escribir el valor. La función de autocompletar debería ayudarte a encontrar el nombre que buscas.

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

Figura 1: Después de escribir bold, el panel Estilos completa automáticamente font-weight: bold.

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

Una nueva IU para la configuración de red

Anteriormente, el panel de red tenía un problema de usabilidad en el que no se podía acceder a opciones como el menú de limitación cuando la ventana de DevTools era estrecha. Para solucionar este problema y ordenar el panel de red, algunas opciones de uso menos frecuente se movieron detrás del nuevo panel El botón Configuración de red Configuración de red.

Configuración de red

Figura 2: Configuración de red.

Las siguientes opciones se movieron a Configuración de red: Usar filas de solicitud grandes, Agrupar por marco, Mostrar descripción general y Capturar capturas de pantalla. En la Figura 3, se asignan las ubicaciones anteriores a las nuevas.

Asigna las ubicaciones anteriores a las nuevas.

Figura 3: Asigna las ubicaciones anteriores a las nuevas.

Envía comentarios sobre este cambio de IU al problema de Chromium #892969.

Mensajes de WebSocket en exportaciones de HAR

Cuando exportas un archivo HAR desde el panel de red para compartir registros de red con tus colegas, tu archivo HAR ahora incluye mensajes de WebSocket. La propiedad _webSocketMessages comienza con una virgulilla 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 al problema de Chromium #496006.

Botones de importación y exportación de HAR

Comparte los registros de red con tus colegas con mayor facilidad con los nuevos botones Exportar todo como HAR con contenido Exportar y Importar archivo HAR Importar. La importación y exportación de HARs ya están disponibles en DevTools desde hace un tiempo. Los botones más visibles son el cambio nuevo.

Los nuevos botones de HAR.

Figura 4: Los nuevos botones de HAR.

Envía comentarios sobre este cambio de IU al problema de Chromium #904585.

Uso total de memoria en tiempo real

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

Es el uso total de memoria en tiempo real.

Figura 5: La parte inferior del panel Memoria muestra que la página usa 43.4 MB de memoria en total. 209 KB/s indica que el uso total de memoria aumenta en 209 KB por segundo.

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

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

Números de puerto de registro de service worker

El panel Service Workers ahora incluye números de puerto en sus títulos para facilitar el seguimiento de los trabajadores de servicio que estás depurando.

Puertos de service worker

Figura 6: Puertos de service worker

Envía comentarios sobre este cambio de IU al problema de Chromium #601286.

Inspecciona los 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 sincronización en segundo plano. Dado que los eventos de actualización en segundo plano y sincronización en segundo plano ocurren en… bueno… segundo plano, no sería muy útil que DevTools solo registrara los eventos de actualización en segundo plano y sincronización en segundo plano mientras DevTools estuviera abierto. Por lo tanto, una vez que comiences a grabar, los eventos de actualización y sincronización en segundo plano se seguirán grabando, incluso después de cerrar la pestaña y Chrome.

Ve al panel Application, abre la pestaña Background Fetch o Background Sync y, luego, haz clic en Record Grabar para comenzar a registrar eventos. Haz clic en un evento para ver más información sobre él.

El panel Background Fetch.

Figura 7: El panel Background Fetch. 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 al 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 el texto page se inserta en el cuadro de búsqueda del sitio de documentación de Puppeteer. Luego, se repite la misma tarea en Chromium.

Mira la charla sobre Puppeteer de Joel y Andrey en Google I/O 2019 para obtener más información sobre Puppeteer y Puppeteer para Firefox. El anuncio de Firefox ocurre alrededor de las 4:05.

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de versión preliminar te brindan acceso a las funciones más recientes de DevTools, te permiten probar las APIs de plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

Comunícate con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.

Novedades de DevTools

Una lista de todo lo que se analizó en la serie Novedades de DevTools.