Recientemente, se agregaron varias funciones actualizadas a las Herramientas para desarrolladores de Chrome, algunas pequeñas y otras grandes. Comenzaremos con las actualizaciones del panel de elementos y, luego, hablaremos sobre la consola, el cronograma y mucho más.
Las reglas de diseño inhabilitadas se copian como comentarios
Si copias reglas de CSS completas en el panel Estilos, ahora se incluirán los estilos que desactivaste, que aparecerán en el portapapeles como comentarios. [crbug.com/316532]
Copiar como ruta de CSS
La opción "Copiar como ruta de CSS" ahora está disponible como elemento de menú para los nodos DOM en el panel Elementos (similar al elemento de menú Copiar XPath).
La generación de selectores CSS no tiene que limitarse a tus hojas de estilo o JavaScript, también pueden ser alternativas para las estrategias de localizador en las pruebas de WebDriver. [crbug.com/277286]
Cómo ver los estilos de los elementos de Shadow DOM
Ahora se pueden inspeccionar los estilos de los elementos secundarios de un raíz de sombra. [crbug.com/279390]
copy() de la consola funciona para objetos
El método copy() de la API de la línea de comandos ahora funciona para objetos. Prueba copy({foo:'bar'}) en el panel de consola y observa cómo una versión con formato de cadena del objeto ahora está en tu portapapeles. [crbug.com/289348]
Filtro de regex para la consola
Filtra los mensajes de la consola con expresiones regulares en el panel de la consola. crbug.com/318308]
Cómo quitar objetos de escucha de eventos fácilmente
Prueba getEventListeners(document).mousewheel[0]; en el panel de consola para recuperar el primer objeto de escucha de eventos del mouse en el documento. A partir de esto, prueba $_.remove() para quitar ese objeto de escucha de eventos ($_ = valor de la expresión evaluada más recientemente). crbug.com/309524]
Eliminación de advertencias de CSS
Se quitaron las advertencias del estilo "Valor de propiedad CSS no válido" que podrías haber visto. Se están realizando esfuerzos continuos para que la implementación sea más sólida contra el CSS del mundo real, incluidos los hacks del navegador. crbug.com/309982]
Operaciones de la línea de tiempo resumidas en un gráfico circular
El panel de cronograma ahora contiene un gráfico circular en el panel de detalles que muestra visualmente la fuente de tus costos de renderización, lo que te ayuda a identificar los cuellos de botella de un vistazo.
Verás que gran parte de la información que solía mostrarse en los pop-overs ahora se promocionó a su propio panel. Para verlos, inicia una grabación de Rutas de recorrido y selecciona un fotograma. Observa el nuevo panel de detalles, que contiene un gráfico circular. En la vista de fotogramas, obtendrás estadísticas interesantes, como los FPS promedio (1000ms/frame duration) de los fotogramas seleccionados. [crbug.com/247786]
Detalles del evento de cambio de tamaño de imagen
Los eventos de cambio de tamaño y decodificación de imágenes en el panel de cronograma ahora contienen un vínculo al nodo DOM en el panel de elementos.
El vínculo URL de la imagen te dirige al recurso correspondiente en el panel Recursos. crbug.com/244159].
Marcos de GPU
Los fotogramas que se producen en la GPU ahora se muestran en la parte superior, por encima de los fotogramas del subproceso principal. crbug.com/305863]
Pausa en los objetos de escucha de popstate
'popstate' ahora está disponible como punto de interrupción del objeto de escucha de eventos en la barra lateral del panel Sources. [crbug.com/88112]
Configuración de renderización disponible en el panel lateral
Cuando abres el panel lateral, ahora se muestran varios paneles, uno de los cuales es el panel de renderización. Úsalo para mostrar rectángulos de pintura, medidor de FPS, etc. Esta opción está habilitada de forma predeterminada en Configuración > "Mostrar vista "Rendering" en el panel lateral de la consola".
Cómo copiar una imagen como URL de datos
Ahora se puede copiar el contenido de los recursos de imagen del panel Recursos como un URI de datos (data:image/png;base64,iVBO...).
Para probar esto, busca el recurso de imagen en Marcos > [Recurso] > Imágenes y haz clic con el botón derecho en la vista previa de la imagen para acceder al menú contextual y, luego, selecciona "Copiar imagen como URL de datos". crbug.com/321132]
Filtrado de URI de datos
Si nunca pensaste que pertenecían, los URIs de datos ahora se pueden filtrar desde la pestaña Red. Selecciona el ícono de filtro.
Se corrigieron errores de sincronización de red
Si viste que tu imagen tardaba 300,000 años en descargarse, te pedimos disculpas. ;) Se corrigieron los tiempos incorrectos de los recursos de red. crbug.com/309570]
El comportamiento de grabación de red tiene más control
El comportamiento de la red de grabación es un poco diferente. En primer lugar, el botón de grabación funciona exactamente como lo harías con Rutas o un perfil de CPU. Y, como es de esperar, si vuelves a cargar la página mientras Herramientas para desarrolladores está abierto, se iniciará automáticamente la grabación de red. Luego, se desactivará, por lo que, si quieres capturar la actividad de red después de la carga de la página, actívala. Esto facilita la visualización de tu cascada sin que las solicitudes de red tardías sesguen los resultados. crbug.com/325878]
Los temas de DevTools ahora están disponibles a través de extensiones
Los diseños de usuario ahora están disponibles a través de los experimentos de DevTools (casilla de verificación: "Permitir temas de IU personalizados"), lo que permite que una extensión de Chrome aplique diseños personalizados a DevTools. Consulta Sample DevTools Theme Extension para ver un ejemplo. crbug.com/318566]
Eso es todo para esta edición del resumen de DevTools. Si aún no lo has hecho, consulta la edición de noviembre.