Novedades de Herramientas para desarrolladores (Chrome 72)

Kayce Basques

Entre las nuevas funciones y los cambios importantes que llegará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.
• Destaca nodos de texto en el árbol del DOM.
• Copia la ruta de acceso de JS en un nodo del DOM desde el árbol del DOM.
• Actualizaciones del panel de auditorías, incluida una nueva auditoría que detecta bibliotecas de JS y palabras clave nuevas para accediendo 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, las Herramientas para desarrolladores ahora marcan métricas de rendimiento como DOMContentLoaded y Primera pintura significativa en la sección Tiempos.

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

Destaca nodos de texto

Cuando colocas el cursor sobre un nodo de texto en el árbol del DOM, Herramientas para desarrolladores ahora destaca ese nodo de texto en la viewport.

Figura 2. Destaca un nodo de texto

Copiar la ruta de JS

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

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 Copy > Copiar JS de la ruta de acceso. Herramientas para desarrolladores copia en el portapapeles una expresión document.querySelector() que apunta a la el nodo de inicio de sesión. Como se mencionó anteriormente, esto es particularmente útil cuando trabajas con Shadow DOM, pero puedes usar para cualquier nodo del DOM.

Figura 3. Copiar la ruta de JS

Herramientas para desarrolladores copia una expresión como la que se muestra a continuación en el portapapeles:

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

Actualizaciones del panel de auditorías

El panel Audits ahora está ejecutando Lighthouse 3.2. La versión 3.2 incluye una nueva auditoría llamada Bibliotecas de JavaScript detectadas En esta auditoría, se enumeran las bibliotecas de JS en las que se detectó Lighthouse. la página. Encontrarás esta auditoría en tu informe, en Prácticas recomendadas > Auditorías aprobadas.

Figura 4. Bibliotecas de JavaScript detectadas

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

Figura 5. Escribiendo lighthouse en el menú de comandos

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataforma web de vanguardia y detectan problemas en tu sitio antes que los usuarios.

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

• Para enviarnos sugerencias o comentarios, accede a crbug.com.
• Informa un problema en Herramientas para desarrolladores con Más opciones   > Ayuda > Informa problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Twittea a @ChromeDevTools.
• Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

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