Se usó la API de Cloud Translation para traducir esta página.

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 Audits, incluida una nueva auditoría que detecta bibliotecas JS y palabras clave nuevas para acceder al panel Audits desde el menú Command.

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.

Primera pintura significativa en la sección Tiempo

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, las Herramientas para desarrolladores ahora destacan ese nodo en la ventana de visualización.

Destaca un nodo de texto

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 (por ejemplo, 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 consiste en ir al panel Elements, hacer clic con el botón derecho en el nodo del árbol del 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 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 > Copy JS path. Las Herramientas para desarrolladores copia en tu portapapeles una expresión document.querySelector() que apunta al nodo. Como se mencionó anteriormente, esto es particularmente útil cuando trabajas con Shadow DOM, pero puedes usarlo para cualquier nodo del DOM.

Copiar la ruta de JS

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 que Lighthouse detectó en la página. Puedes encontrar esta auditoría en tu informe, en Prácticas recomendadas > Auditorías aprobadas.

Bibliotecas de JavaScript detectadas

Figura 4. Bibliotecas de JavaScript detectadas

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

Escribiendo " faro" en el menú de comandos

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.
Para informar un problema de Herramientas para desarrolladores, use Más opciones > Ayuda > Informar 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.