Novedades de Herramientas para desarrolladores (Chrome 76)

Kayce Basques

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

Autocompletar con valores de CSS

Cuando agregas declaraciones de estilo a un nodo del DOM, a veces es más fácil recordar el valor de la declaración que el nombre de la declaración. Por ejemplo, cuando se pone en negrita un nodo <p>, el valor bold puede ser más fácil de recordar que el nombre font-weight. La IU de autocompletar del panel Estilo ahora admite valores de CSS. Si recuerdas el valor de la palabra clave que deseas, pero no recuerdas el nombre de la propiedad, intenta escribir el valor y la función de autocompletar debería ayudarte a encontrar el nombre que buscas.

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

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

Una nueva IU para la configuración de red

Anteriormente, el panel de redes 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 Herramientas para desarrolladores era estrecha. Para solucionar este problema y ordenar el panel de Red, se movieron algunas opciones menos utilizadas detrás del nuevo panel de Configuración de red .

Figura 2: Configuración de red.

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

Figura 3: Asignar las ubicaciones antiguas a las nuevas

Envía comentarios sobre este cambio en la IU al error n° 892969 de Chromium.

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 al problema de Chromium n° 496006.

Botones de importación y exportación de HAR

Comparte registros de red con tus colegas de forma más sencilla con los nuevos botones Export All As HAR With Content y Import HAR File . La importación y exportación de HAR existen en las Herramientas para desarrolladores desde hace un tiempo. El nuevo cambio son los botones más visibles.

Figura 4: Los nuevos botones de HAR.

Envía comentarios sobre este cambio de la IU al problema de Chromium nº 904585.

Uso total de memoria en tiempo real

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

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

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

Envía comentarios sobre esta nueva función al error de Chromium nº 958177.

Números de puerto de registro de service workers

El panel Service Workers ahora incluye números de puerto en sus títulos para que sea más fácil hacer un seguimiento del service worker que estás depurando.

Figura 6: Puertos de service workers.

Envía comentarios sobre este cambio en la IU al error n° 601286 de Chromium.

Inspecciona los eventos de recuperación 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 recuperación y sincronización en segundo plano ocurren en segundo plano, no sería muy útil que las Herramientas para desarrolladores solo registraran estos eventos mientras estuvieran abiertas. Por lo tanto, una vez que comiences a grabar, se seguirán registrando los eventos de Background Fetch y Background Sync, incluso después de cerrar la pestaña y Chrome.

Ve al panel Aplicación, abre la pestaña Recuperación en segundo plano o Sincronización en segundo plano y, luego, haz clic en Grabar para comenzar a registrar eventos. Haz clic en un evento para ver más información sobre él.

Figura 7: El panel Background Fetch. Demostración de Maxim Salnikov.

Figura 8. Panel de sincronización en segundo plano.

Envía comentarios sobre estas funciones nuevas al error de Chromium nº 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, se repite la misma tarea en Chromium.

Mira 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 se produce alrededor del minuto 4:05.

Descarga los canales de versión preliminar

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de las Herramientas para desarrolladores, te permiten probar las APIs de vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes que los usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con las Herramientas para desarrolladores.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de las Herramientas para desarrolladores con more_vert Más opciones > Ayuda > Informar un problema de las Herramientas para desarrolladores en las Herramientas para desarrolladores.
• Envía un tweet a @ChromeDevTools.
• Deja comentarios en los videos de YouTube de Novedades de las Herramientas para desarrolladores o Sugerencias para las Herramientas para desarrolladores.

Novedades de las Herramientas para desarrolladores

Una lista de todo lo que se trató en la serie Novedades de las Herramientas para desarrolladores.