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.

Primera pintura significativa en la sección Tiempo

Figura 1. Primera pintura significativa 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 el viewport.

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 DOM, seleccionar Copiar > Copiar selector y, luego, pasar ese selector CSS a document.querySelector(). Sin embargo, si el nodo está en un DOM sombreado, este enfoque no funciona porque el selector genera una ruta desde dentro del árbol sombreado.

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 de auditorías 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.

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 vista previa 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 de que lo hagan tus usuarios.

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

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.