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 una carga de página, DevTools ahora marca métricas de rendimiento, como DOMContentLoaded y Primer procesamiento de imagen con contenido, en la sección Tiempo.

Primer procesamiento de imagen con significado 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 estás escribiendo una prueba de automatización que implica hacer clic en un nodo (quizás con la función page.click() de Puppeteer) y deseas obtener rápidamente una referencia a ese nodo 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. En esta auditoría, se enumeran 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.

Se detectaron bibliotecas de JavaScript

Figura 4. Se detectaron bibliotecas de JavaScript

Además, ahora puedes acceder al panel de auditorías desde el menú de comandos 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 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.