Novedades de Herramientas para desarrolladores (Chrome 67)

Kayce Basques
Kayce Basques
X GitHub Error

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

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

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

Haz clic en Coincidir mayúsculas y minúsculas Coincidir mayúsculas y minúsculas para crear tu consulta distingue mayúsculas de minúsculas. Haz clic en Usar expresión regular. Usar expresión regular para mostrar resultados que coincidan el patrón que proporciones. No necesitas unir tu regex en 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 resultados para facilitar la lectura.

IU anterior y nueva

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

Presiona Command + Opción + F (Mac) o Control + Mayúsculas + F (Windows, Linux y ChromeOS) para abrir Global Búsqueda. 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 un CSS. , las Herramientas para desarrolladores ahora muestran una vista previa de ese color.

Un ejemplo de los valores de color de una variable CSS

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

Copiar como recuperado

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

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

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

Herramientas para desarrolladores 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 el usuario-agente del escritorio. En otras palabras, puedes evitar que las Auditorías panel simule un dispositivo móvil.
  • Inhabilitar la limitación de CPU y de red
  • Conservar el almacenamiento, como IndexedDB y LocalStorage, 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 que se según el panel Rendimiento.

Botón Ver seguimiento

Figura 7. El botón Ver seguimiento

Detener bucles infinitos

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

  1. Abre el panel Fuentes.
  2. Haz clic en Detener Pausar. El botón cambia a Reanudar. Ejecución de la secuencia de comandos Reanudar.
  3. Conserva la opción Reanudar ejecución de la secuencia de comandos Reanudar y, luego, selecciona Detener Llamada de JavaScript actual Detener.

En el video de arriba, el reloj se actualiza con un temporizador de setInterval(). Haz clic en Iniciar Infinite Loop ejecuta un bucle do...while que nunca se detiene. El intervalo se reanuda se ejecuta cuando Stop Current JavaScript Call Detener era seleccionado.

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

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

Figura 8. Consultar las mediciones de User Timing en la pestaña Bottom-Up La barra azul a la izquierda del La sección User Timing indica que está seleccionada.

En general, ahora puedes seleccionar cualquiera de las secciones (Subproceso principal, Tiempo de usuario, GPU, ScriptStreamer, etc.) y vea la actividad de esa sección en las pestañas.

Selecciona instancias de VM de JavaScript en el panel Memory

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

Capturas de pantalla de antes y después del panel Memoria

Figura 9. En la IU antigua, a la izquierda, las instancias de VM de JavaScript están ocultas detrás del Target, mientras que, en la IU nueva de la derecha, se muestran en el panel Select Tabla de instancias de VM de JavaScript

Junto a la instancia developers.google.com hay 2 valores: 8.7 MB y 13.3 MB. La izquierda value 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 por la pestaña Página

En el panel Fuentes, ahora la pestaña Red 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, a la izquierda, la pestaña que mostraba los recursos de la página se llamaba Network, mientras que, en la nueva IU a la derecha, se llama Page

Actualizaciones sobre el Tema oscuro

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

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

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

Certificado de transparencia en el panel de seguridad

El panel Seguridad ahora brinda información sobre el certificado de transparencia.

Información sobre los certificados de transparencia en el panel de 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 muestra un gráfico tipo llama para ver el trabajo total que genera cada proceso.

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