Novedades de Herramientas para desarrolladores (Chrome 72)

Kayce Basques

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:

• Visualiza las métricas de rendimiento en el panel Rendimiento.
• Destacar los nodos de texto en el árbol del DOM
• Copia la ruta de JS en un nodo DOM del árbol del DOM.
• Actualizaciones del panel de auditorías, incluida una nueva auditoría que detecta bibliotecas de JS y palabras clave nuevas para acceder al panel de auditorías desde el menú de comandos.

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.

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.

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.

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.

Figura 4. Se detectaron bibliotecas de JavaScript

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

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.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de DevTools con more_vert Más opciones > Ayuda > Informar un problema de DevTools en DevTools.
• Twittea a @ChromeDevTools.
• Deja comentarios en los videos de YouTube sobre las novedades de las Herramientas para desarrolladores o en los videos de YouTube con sugerencias de Herramientas para desarrolladores.

Novedades de DevTools

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.