Novedades de Herramientas para desarrolladores (Chrome 67)

Kayce Basques
Kayce Basques
X GitHub Error

Entre las funciones nuevas y los cambios importantes que se agregarán a DevTools 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 Comando + F (Mac) o Control + F (Windows, Linux o ChromeOS) para abrir el nuevo panel Búsqueda de red. DevTools busca la consulta que proporcionas en los encabezados y cuerpos de todas las solicitudes de red.

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

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

Haz clic en Coincidir mayúsculas y minúsculas Coincidir mayúsculas y minúsculas para que tu consulta distinga entre mayúsculas y 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 cierres tu RegEx con 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 del panel nuevo Network Search. Ahora también imprime los resultados de forma más atractiva para facilitar la escaneabilidad.

La IU anterior y la nueva.

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

Presiona Comando + Opción + F (Mac) o Control + Mayúsculas + F (Windows, Linux y 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 Styles

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 CSS.

Figura 4. En la IU anterior 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.

Cómo copiar como recuperado

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

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

Figura 5. Cómo copiar el código equivalente a fetch() para una solicitud

DevTools produce 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 de auditorías

Nuevas auditorías

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

Nuevas opciones de configuración

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

  • Conserva la configuración del viewport y del usuario-agente para computadoras de escritorio. En otras palabras, puedes evitar que el panel Auditorías simule un dispositivo móvil.
  • Inhabilita la limitación de la red y la CPU.
  • Conserva el almacenamiento, como LocalStorage y 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 recursividad, 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 cambiará a Resume Script Execution 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 setInterval(). Cuando haces clic en Start Infinite Loop, se ejecuta un bucle do...while que nunca se detiene. El intervalo se reanuda porque no se estaba ejecutando cuando se seleccionó Detener Stop Current JavaScript Call.

Tiempos de usuario en las pestañas Rendimiento

Cuando veas una grabación de rendimiento, haz clic en la sección User Timing para ver las medidas de User Timing en las pestañas Resumen, De abajo hacia arriba, Árbol de llamadas y Registro de eventos.

Visualización de las medidas de Tiempos de usuario en la pestaña Ascendente

Figura 8. Consulta las medidas de los tiempos del usuario en la pestaña De abajo hacia arriba. La barra azul a la izquierda de la sección User Timing indica que está seleccionada.

En general, ahora puedes seleccionar cualquiera de las secciones (Subproceso principal, Tiempo del 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

El panel Memory ahora muestra claramente todas las instancias de VM de JavaScript asociadas con una página, en lugar de ocultarlas detrás del menú desplegable Target como antes.

Capturas de pantalla del panel de memoria antes y después.

Figura 9. En la IU anterior de la izquierda, las instancias de VM de JavaScript están ocultas detrás del menú desplegable Target, mientras que en la IU nueva de 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 memoria asignada 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 valor de la derecha corresponde a Memory Footprint.

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

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

Dos ventanas de DevTools en paralelo que demuestran 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 sobre el Tema oscuro

Chrome 67 incluye algunos 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 de seguridad

El panel Seguridad ahora informa información sobre la transparencia del certificado.

Información sobre los certificados de transparencia en el panel de seguridad.

Figura 12: Información de transparencia de la certificación en el panel de seguridad

Aislamiento de sitios en el panel Rendimiento

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

Gráficos de llamas 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 vista previa

Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. 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.