Novedades de Herramientas para desarrolladores (Chrome 67)

Kayce Basques
Kayce Basques
X GitHub

Las nuevas funciones y los cambios importantes que se incluirán en las Herramientas para desarrolladores de Chrome 67 son los siguientes:

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

Abre el panel Network y, luego, presiona Comando + F (Mac) o Control + F (Windows, Linux, ChromeOS) para abrir el nuevo panel Network Search. Herramientas para desarrolladores busca la consulta que proporcionas en los encabezados y los cuerpos de todas las solicitudes de red.

Búsqueda del 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 búsqueda 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 proporcionaste. No es necesario que incluyas tu expresión regular entre barras diagonales.

Una consulta de expresión regular en el panel Network Search.

Figura 2. Una consulta de expresión regular en el panel Network Search.

La IU del panel Búsqueda global ahora coincide con la IU del nuevo panel Búsqueda de red. Ahora también imprime los resultados de forma legible para facilitar su lectura.

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

Ejemplo de valores de color de variables de CSS.

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

Copiar como recuperación

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

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

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

Las Herramientas para desarrolladores producen 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:

Nuevas opciones de configuración

Ahora puedes configurar el panel Audits para hacer lo siguiente:

  • Conserva la configuración de la ventana gráfica del escritorio y del agente de usuario. En otras palabras, puedes evitar que el panel Audits 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.

Se agregaron 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 registro 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

Detener 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 Resume Script Execution Reanudar.
  3. Mantén presionada la opción Reanudar la ejecución de la secuencia de comandos Reanudar y, luego, selecciona Detener la llamada de JavaScript actual Detener.

En el video anterior, el reloj se actualiza a través de un temporizador setInterval(). Si haces clic en Start Infinite Loop, se ejecutará un bucle do...while que nunca se detendrá. El intervalo se reanuda porque no se estaba ejecutando cuando se seleccionó Detener la llamada de JavaScript actual Detener.

Tiempo de usuario en las pestañas de 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 Summary, Bottom-Up, Call Tree y Event Log.

Visualización de las medidas de User Timing en la pestaña Bottom-Up

Figura 8. Consulta las medidas de User Timing 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 (Main Thread, User Timing, 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 la 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.

Figura 9. En la IU anterior, a la izquierda, las instancias de VM de JavaScript se ocultan 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 memoria asignada debido a JavaScript. El valor de la derecha 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 Pestaña de página

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

Dos ventanas de DevTools 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 varios cambios menores en el esquema de colores del tema oscuro. Por ejemplo, los íconos de los puntos de interrupción y la línea de ejecución actual ahora son verdes.

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

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

Certificado de transparencia en el panel de Seguridad

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

Información del certificado de transparencia en el panel Seguridad

Figura 12: Información sobre la transparencia de la certificación 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 de llamas para cada proceso, de modo que puedas ver el trabajo total que causa cada proceso.

Gráficos de llamas por proceso en una grabación de rendimiento

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

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 vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.

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

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

Novedades de Herramientas para desarrolladores

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