Novedades de Herramientas para desarrolladores (Chrome 72)

Kayce Basques
Kayce Basques
X GitHub Error

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

Versión en video de estas notas de la versión

Visualiza las métricas de rendimiento

Después de registrar la carga de una página, las Herramientas para desarrolladores ahora marcan las métricas de rendimiento, como DOMContentLoaded y First Meaningful Paint, en la sección Timing.

Primera pintura significativa en la sección Tiempo

Figura 1. Primer procesamiento de imagen con significado en la sección Tiempo

Destaca los nodos de texto

Cuando colocas el cursor sobre un nodo de texto en el árbol del DOM, DevTools ahora destaca ese nodo de texto en la ventana de visualización.

Cómo destacar un nodo de texto

Figura 2. Cómo destacar un nodo de texto

Cómo copiar la ruta de JS

Supongamos que escribes una prueba de automatización que implica hacer clic en un nodo (por ejemplo, con la función page.click() de Puppeteer) y deseas obtener rápidamente una referencia a ese nodo del DOM. El flujo de trabajo habitual es ir al panel Elementos, hacer clic con el botón derecho en el nodo del árbol del DOM, seleccionar Copiar > Copiar selector y, luego, pasar ese selector CSS a document.querySelector(). Sin embargo, si el nodo está en un shadow DOM, este enfoque no funciona porque el selector genera una ruta desde dentro del árbol de sombras.

Para obtener rápidamente una referencia a un nodo DOM, haz clic con el botón derecho en el nodo DOM y selecciona Copiar > Copiar ruta de acceso de JS. DevTools copia en el portapapeles una expresión document.querySelector() que apunta al nodo. Como se mencionó anteriormente, esto es particularmente útil cuando se trabaja con Shadow DOM, pero puedes usarlo para cualquier nodo DOM.

Cómo copiar la ruta de JS

Figura 3. Cómo copiar la ruta de JS

DevTools copia una expresión como la siguiente en el portapapeles:

document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)')

Actualizaciones del panel de auditorías

El panel Audits ahora ejecuta Lighthouse 3.2. La versión 3.2 incluye una nueva auditoría llamada Se detectaron bibliotecas de JavaScript. Esta auditoría enumera las bibliotecas de JS que Lighthouse detectó en la página. Puedes encontrar esta auditoría en tu informe en Prácticas recomendadas > Auditorías aprobadas.

Bibliotecas de JavaScript detectadas

Figura 4. Se detectaron bibliotecas de JavaScript

Además, ahora puedes acceder al panel Audits desde el menú Command (Comando) escribiendo Lighthouse o PWA.

Escribir "lighthouse" en el menú de comandos

Figura 5. Escribe lighthouse en el menú de comandos.

Descarga los canales de vista previa

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 Herramientas para desarrolladores, te permiten probar API de plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que los 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 ha abordado en la serie Novedades de Herramientas para desarrolladores.