Novedades de Herramientas para desarrolladores (Chrome 72)

Kayce Basques
Kayce Basques

Entre las nuevas funciones y los principales cambios que se implementarán en las Herramientas para desarrolladores de Chrome en Chrome 72, se incluyen las siguientes:

Versión de video de estas notas de la versión

Visualiza las métricas de rendimiento

Después de registrar una carga de página, Herramientas para desarrolladores ahora marca 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

Destacar 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 acceso de JS

Supongamos que escribes una prueba de automatización que implica hacer clic en un nodo (con la función page.click() de Puppeteer, por ejemplo) y deseas 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 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 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 > Copy JS path. Las Herramientas para desarrolladores copian en el portapapeles una expresión document.querySelector() que apunta al nodo. Como se mencionó anteriormente, esto es muy útil cuando se trabaja con Shadow DOM, pero puedes usarlo para cualquier nodo del DOM.

Copiar la ruta de acceso de JS

Figura 3. Copiar la ruta de acceso 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 ejecuta Lighthouse 3.2. La versión 3.2 incluye una auditoría nueva llamada Bibliotecas de JavaScript detectadas. En esta auditoría, se enumeran las bibliotecas de JS Lighthouse que 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ú de comandos 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 Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

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

  • Envíanos tus sugerencias o comentarios a través de crbug.com.
  • Informa un problema en Herramientas para desarrolladores mediante Más opciones   Más   > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
  • Envía un tweet a @ChromeDevTools.
  • Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).

Novedades de Herramientas para desarrolladores

Una lista de todos los temas abordados en la serie Novedades de Herramientas para desarrolladores.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Se canceló Chrome 82.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59