Novedades de Herramientas para desarrolladores (Chrome 72)

Kayce Basques
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:

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.

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, Herramientas para desarrolladores ahora destaca ese nodo de texto en la viewport.

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 (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.

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 en las que se detectó Lighthouse. la página. Encontrarás 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 "light" 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 plataformas 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   Más > 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.