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 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 un nodo <p> se pone en negrita, el valor bold puede ser el siguiente: más fácil de recordar que el nombre font-weight. La IU de autocompletar del panel Style ahora es compatible con CSS de salida. Si recuerdas el valor de palabra clave que deseas, pero no recuerdas el nombre de la propiedad, prueba escribiendo el valor y autocompletar debería ayudarte a encontrar el nombre que buscas.

Después de escribir “negrita” el panel Estilos se autocompleta a “font-weight: bold”.

Figura 1: Después de escribir bold, el panel Estilos se autocompleta en 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

Antes, el panel Network tenía un problema de usabilidad en el que se mostraban opciones como el menú de limitación inaccesible cuando la ventana de Herramientas para desarrolladores era estrecha. Para solucionar este problema y limpiar el panel Network, se trasladaron algunas opciones menos usadas a la nueva Configuración de red. El botón Configuración de red del panel de control.

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 Capturas de pantalla. En la Figura 3, se asignan las ubicaciones antiguas a las nuevas y los recursos, especialmente aquellos sensibles.

Asigna las ubicaciones antiguas a las nuevas.

Figura 3: Asigna las ubicaciones antiguas a las nuevas.

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

Mensajes de WebSocket en exportaciones de HAR

Cuando exportes un archivo HAR desde el panel Red para compartir registros de red con tus colegas, tu 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 #496006.

Botones de importación y exportación de HAR

Comparta los registros de red con colegas más fácilmente con el nuevo Exportar todo como HAR con contenido Exportar e Importar archivo HAR Importar. Importación y exportación de HAR existen en Herramientas para desarrolladores durante un tiempo. 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 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.

Uso total de memoria en tiempo real.

Figura 5: En la parte inferior del panel Memoria, se muestra que la página usa 43.4 MB de memoria en total. 209 KB/s indica que el uso total de memoria está aumentando 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 los títulos para facilitar el seguimiento de qué service worker estás depurando.

Puertos de service worker.

Figura 6: Puertos de service worker.

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

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 la función En segundo plano. Eventos de recuperación y sincronización en segundo plano Dado que los eventos de recuperación en segundo plano y sincronización en segundo plano ocurriría en el... bueno... segundo plano, no sería muy útil si las Herramientas para desarrolladores solo grabaran Background Eventos de recuperación y sincronización en segundo plano mientras Herramientas para desarrolladores estaba abierto. Cuando comiences a grabar, la vista en segundo plano Los eventos de recuperación y sincronización en segundo plano se seguirán grabando, incluso después de que cierres la pestaña. incluso luego de cerrar 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 Record Grabar para iniciar el registro eventos. Haz clic en un evento para ver más información sobre él.

El panel Recuperación en segundo plano

Figura 7: El panel Recuperación en segundo plano Demostración de Maxim Salnikov.

El panel de sincronización en segundo plano

Figura 8: El panel de sincronización en segundo plano

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

Puppeteer para Firefox

Puppeteer para Firefox es un nuevo proyecto experimental que te permite automatizar Firefox con el API de Puppeteer. En otras palabras, ahora puedes automatizar Firefox y Chromium con la misma API de Node, ya que se demuestra en el video a continuación.

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

Mira la charla sobre marionetas 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 se produce alrededor de las 4:05 p.m.

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataformas web de vanguardia y detectan problemas en tu sitio antes que los usuarios.

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

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

  • Para enviarnos sugerencias o comentarios, accede a crbug.com.
  • Informa un problema en Herramientas para desarrolladores con Más opciones   Más > Ayuda > Informa problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
  • Twittea a @ChromeDevTools.
  • Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.