Novedades de Herramientas para desarrolladores (Chrome 67)

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

• Buscar en todos los encabezados de red
• Vistas previas de los valores de las variables de CSS en el panel Styles
• Copiar como recuperación
• Nuevas auditorías, opciones de configuración de escritorio y visualización de seguimientos
• Detén bucles infinitos
• Tiempos de usuario en las pestañas Rendimiento
• Instancias de VM de JavaScript enumeradas claramente en el panel Memory
• La pestaña Red del panel Fuentes cambió su nombre a la pestaña Página.
• Actualizaciones sobre el Tema oscuro
• Información del certificado de transparencia en el panel Seguridad
• Funciones de aislamiento de sitios en el panel Rendimiento

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

Buscar en todos los encabezados y las respuestas de la red

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.

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

Haz clic en Coincidir mayúsculas y minúsculas para crear tu consulta distingue mayúsculas de minúsculas. Haz clic en Usar expresión regular. para mostrar resultados que coincidan el patrón que proporciones. No necesitas unir tu regex en barras diagonales.

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

Actualizaciones de la IU del panel de búsqueda

La IU del panel Global Search ahora coincide con la del panel nuevo Network Search. Ahora también imprime resultados para facilitar la lectura.

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.

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.

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:

• Precarga las solicitudes de claves. Las solicitudes de precarga pueden acelerar el tiempo de carga de la página, ya que proporcionan sugerencias a para descargar los recursos importantes para su ruta de acceso de representación crítica tan pronto como como sea posible.
• Evita el texto invisible mientras se cargan las fuentes para sitios web. Asegurarse de que el texto sea visible mientras carga de fuentes web hace que la página sea más útil para los usuarios más rápidamente.

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

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.

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 . El botón cambia a Reanudar. Ejecución de la secuencia de comandos .
3. Conserva la opción Reanudar ejecución de la secuencia de comandos y, luego, selecciona Detener Llamada de JavaScript actual .

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

Tiempos de usuario en las pestañas Rendimiento

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

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.

Figura 9. En la IU antigua, a la izquierda, las instancias de VM de JavaScript se ocultan 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.

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.

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.

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 de para ver el trabajo total que genera cada proceso.

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