Novedades de Herramientas para desarrolladores (Chrome 67)

Kayce Basques
Kayce Basques
X GitHub

Entre las nuevas funciones y los cambios importantes que se incorporarán a las Herramientas para desarrolladores en Chrome 67, se incluyen los siguientes:

Versión en video de las notas de la versión:

Abre el panel Red y, luego, presiona Cmd + F (Mac) o Ctrl + F (Windows, Linux y ChromeOS) para abrir el nuevo panel Búsqueda de red. Las Herramientas para desarrolladores buscan en los encabezados y los cuerpos de todas las solicitudes de red para la consulta que proporcionas.

Búsqueda del texto "cache-control" con el nuevo panel de búsqueda de red.

Figura 1. Busca el texto cache-control con el nuevo panel Network Search

Haz clic en Coincidir mayúsculas y minúsculas Coincidir mayúsculas y minúsculas para que tu consulta distinga mayúsculas de minúsculas. Haz clic en Usar expresión regular Usar expresión regular para mostrar los resultados que coincidan con el patrón que proporciones. No es necesario que encierres tu expresión regular entre barras diagonales.

Una consulta de expresión regular en el panel de búsqueda de red.

Figura 2. Una consulta de expresión regular en el panel de búsqueda de red.

La IU del panel Global Search ahora coincide con la IU del nuevo panel Network Search. Ahora, también imprime los resultados con formato estilístico para facilitar la lectura.

La IU anterior y la nueva.

Figura 3. La IU anterior a la izquierda y la nueva a la derecha

Presiona Command + Option + F (Mac) o Control + Mayúsculas + F (Windows, Linux, ChromeOS) para abrir la búsqueda global. También puedes abrirlo a través del menú de comandos.

Vistas previas de los valores de las variables de CSS en el panel Estilos

Cuando el valor de una propiedad de color de CSS, como background-color o color, se establece en una variable de CSS, DevTools ahora muestra una vista previa de ese color.

Un ejemplo de valores de color de variables de CSS.

Figura 4. En la IU antigua de la izquierda, no hay una vista previa de color junto a color: var(--main-color), mientras que en la IU nueva de la derecha, sí la hay.

Copiar como fetch

Haz clic con el botón derecho en una solicitud de red y, luego, selecciona Copiar > Copiar como recuperación para copiar en el portapapeles el código equivalente a fetch() de esa solicitud.

Copiar el código equivalente a fetch() para una solicitud

Figura 5. Copia el código equivalente a fetch() para una solicitud

Las Herramientas para desarrolladores producen un código como el siguiente:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

Actualizaciones del panel Auditorías

Auditorías nuevas

El panel Audits tiene 2 auditorías nuevas, incluidas las siguientes:

  • Precarga las solicitudes de claves. Las solicitudes de precarga pueden acelerar el tiempo de carga de la página, ya que le dan sugerencias al navegador para que descargue los recursos que son importantes para tu ruta de renderización crítica lo antes posible.
  • Evita el texto invisible mientras se cargan las fuentes web. Asegurarte de que el texto sea visible mientras se cargan las fuentes web hace que la página sea más útil para los usuarios con mayor rapidez.

Nuevas opciones de configuración

Ahora puedes configurar el panel Auditorías para lo siguiente:

  • Conserva la configuración del viewport de escritorio y del usuario-agente. En otras palabras, puedes evitar que el panel Audits simule un dispositivo móvil.
  • Inhabilitar la limitación de red y CPU
  • Conserva el almacenamiento, como LocalStorage e IndexedDB, en todas las auditorías.

Nuevas opciones de configuración de auditoría

Figura 6. Nuevas opciones de configuración de auditoría

Ver seguimientos

Después de auditar una página, haz clic en Ver seguimiento para ver los datos de rendimiento de carga en los que se basa tu auditoría en el panel Rendimiento.

El botón Ver seguimiento.

Figura 7. El botón Ver seguimiento

Detén los bucles infinitos

Si trabajas mucho con bucles for, bucles do...while o recursión, es probable que hayas ejecutado un bucle infinito por error mientras desarrollabas tu sitio. Para detener el bucle infinito, ahora puedes hacer lo siguiente:

  1. Abre el panel Fuentes.
  2. Haz clic en Pausar Pausar. El botón cambia a Reanudar la ejecución de la secuencia de comandos Reanudar.
  3. Mantén presionado Resume Script Execution Reanudar y, luego, selecciona Stop Current JavaScript Call Detener.

En el video anterior, el reloj se actualiza a través de un temporizador de setInterval(). Si haces clic en Iniciar bucle infinito, se ejecuta un bucle do...while que nunca se detiene. El intervalo se reanuda porque no se estaba ejecutando cuando se seleccionó Stop Current JavaScript Call Detener.

Tiempos de usuario en las pestañas Rendimiento

Cuando veas una grabación de rendimiento, haz clic en la sección Tiempos de usuario para ver las mediciones de Tiempos de usuario en las pestañas Summary, Bottom-Up, Call Tree y registro de eventos.

Visualización de las mediciones de Tiempos de usuario en la pestaña Bottom-Up

Figura 8. Visualización de las mediciones de Tiempos de usuario en la pestaña Bottom-Up. La barra azul a la izquierda de la sección Tiempos de usuario indica que está seleccionada.

En general, ahora puedes seleccionar cualquiera de las secciones (Main Thread, Tiempos de usuario, GPU, ScriptStreamer, etcétera) y ver la actividad de esa sección en las pestañas.

Selecciona instancias de VM de JavaScript en el panel Memoria

Ahora, el panel Memoria enumera claramente todas las instancias de VM de JavaScript asociadas con una página, en lugar de ocultarlas detrás del menú desplegable Destino como antes.

Capturas de pantalla del panel Memoria antes y después de la corrección.

Figura 9. En la IU anterior, a la izquierda, las instancias de VM de JavaScript están ocultas detrás del menú desplegable Target, mientras que en la IU nueva, a la derecha, se muestran en la tabla Select JavaScript VM Instance.

Junto a la instancia developers.google.com, hay 2 valores: 8.7 MB y 13.3 MB. El valor de la izquierda representa la asignación de memoria debido a JavaScript. El valor correcto representa toda la memoria del SO que se asigna debido a esa instancia de VM. El valor de la derecha incluye el valor de la izquierda. En el Administrador de tareas de Chrome, el valor de la izquierda corresponde a JavaScript Memory y el de la derecha, a Memory Footprint.

Se cambió el nombre de la pestaña Red a Página

En el panel Fuentes, la pestaña Red ahora se llama Página.

Dos ventanas de Herramientas para desarrolladores una al lado de la otra, que muestran el cambio de nombre.

Figura 10: En la IU anterior de la izquierda, la pestaña que muestra los recursos de la página se llama Red, mientras que en la IU nueva de la derecha se llama Página

Actualizaciones del tema oscuro

Chrome 67 incluye una serie de cambios menores en el esquema de colores del tema oscuro. Por ejemplo, los íconos de punto de interrupción y la línea de ejecución actual ahora son de color verde.

Captura de pantalla del nuevo ícono de punto de interrupción y el esquema de colores de la línea de ejecución actual.

Figura 11: Captura de pantalla del nuevo ícono de punto de interrupción y el esquema de colores de la línea de ejecución actual

Certificado de transparencia en el panel Seguridad

El panel Seguridad ahora informa sobre el Certificado de transparencia.

Información de transparencia del certificado en el panel Seguridad

Figura 12: Información de certificado de transparencia en el panel Seguridad

Aislamiento de sitios en el panel Rendimiento

Si tienes habilitado el aislamiento de sitios, el panel Rendimiento ahora proporciona un gráfico tipo llama para cada proceso, de modo que puedas ver el trabajo total que genera cada uno.

Gráficos tipo llama por proceso en una grabación de rendimiento.

Figura 13: Gráficos tipo llama por proceso en una grabación de rendimiento

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.

Novedades de las Herramientas para desarrolladores

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