Novedades de Herramientas para desarrolladores (Chrome 72)

Kayce Basques

Las nuevas funciones y los cambios importantes que se incluirán en las Herramientas para desarrolladores de Chrome 72 son los siguientes:

• Visualiza las métricas de rendimiento en el panel Rendimiento.
• Destaca los nodos de texto en el árbol del DOM.
• Copia la ruta de JS a un nodo del DOM desde el árbol del DOM.
• Actualizaciones del panel Audits, incluida una nueva auditoría que detecta bibliotecas de JS y nuevas palabras clave para acceder al panel Audits 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, Herramientas para desarrolladores ahora marca las métricas de rendimiento, como DOMContentLoaded y el primer procesamiento de imagen significativo, en la sección Tiempos.

Figura 1. Primera pintura significativa en la sección Timing

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 gráfica.

Figura 2. Cómo destacar un nodo de texto

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 quieres obtener rápidamente una referencia a ese nodo del DOM. El flujo de trabajo habitual es ir al panel Elements, hacer clic con el botón derecho en el nodo del árbol DOM, seleccionar Copy > Copy selector y, luego, pasar ese selector de 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 el árbol de sombra.

Para obtener rápidamente una referencia a un nodo del DOM, haz clic con el botón derecho en el nodo del DOM y selecciona Copiar > Copiar ruta de JS. Las Herramientas para desarrolladores copian 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. 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 Auditorías

El panel Audits ahora ejecuta Lighthouse 3.2. La versión 3.2 incluye una nueva auditoría llamada Se detectaron bibliotecas 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.

Figura 4. Se detectaron bibliotecas de JavaScript

Además, ahora puedes acceder al panel Audits desde el menú de comandos escribiendo Lighthouse o PWA.

Figura 5. Escribir 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 vanguardia de la plataforma web 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 analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las Herramientas para desarrolladores.

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

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores