Resumen de Herramientas para desarrolladores (diciembre de 2013)

Varias funciones actualizadas han llegado recientemente a las Herramientas para desarrolladores de Chrome. Comenzaremos con las actualizaciones del panel Elemento y pasaremos a hablar de Console, Rutas y mucho más.

Se inhabilitaron las reglas de estilo para copiarse como comentados

Si copias reglas de CSS completas en el panel Estilos, ahora se incluirán los estilos que desactivaste y aparecerán en tu portapapeles como comentados. [crbug.com/316532]

Copiar como ruta de acceso de CSS

La opción "Copy as CSS path" ahora está disponible como elemento de menú para los nodos del DOM en el panel Elements (similar al elemento de menú Copiar XPath).

Copia la ruta de acceso CSS.

No es necesario que la generación de selectores CSS se limite a tus hojas de estilo o JavaScript, también pueden ser alternativas para estrategias de localizador en las pruebas de WebDriver. [crbug.com/277286]

Cómo ver los estilos de los elementos de Shadow DOM

Ahora es posible inspeccionar los estilos de los elementos secundarios de una shadow root. [crbug.com/279390]

La función copy() de Console funciona para objetos

El método copy() de la API de línea de comandos ahora funciona con objetos. Prueba copy({foo:'bar'}) en el panel de la consola y observa cómo una versión encadenada y con formato del objeto ahora está en el 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]

Quita objetos de escucha de eventos con facilidad

Prueba getEventListeners(document).mousewheel[0]; en el panel de Console para recuperar el primer objeto de escucha de eventos de rueda del mouse del documento. Continuando con 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 de estilo "Valor de propiedad de CSS no válido" que quizás viste. Nos esforzamos por hacer que la implementación sea más sólida contra los CSS reales, incluidos los hackeos del navegador. crbug.com/309982]

Operaciones del cronograma resumidas en un gráfico circular

Gráfico de operaciones del cronograma

El panel Timeline ahora contiene un gráfico circular en el panel Details que muestra de manera visual la fuente de los costos de procesamiento; esto te ayuda a identificar los cuellos de botella rápidamente.

Descubrirá que gran parte de la información que antes aparecía en las ventanas emergentes ahora se ascendió a su propio panel. Para ver, iniciar una grabación de Timeline y seleccionar un fotograma, toma nota del nuevo panel Details que contiene un gráfico circular. En la vista Frames, obtendrás estadísticas interesantes, como los FPS promedio (1000ms/frame duration) para los fotogramas seleccionados. [crbug.com/247786]

Detalles del evento de cambio de tamaño de la imagen

Los eventos de cambio de tamaño y decodificación de imágenes en el panel Timeline ahora contienen un vínculo al nodo del DOM en el panel Elements.

Detalles del cambio de tamaño de la imagen

El vínculo URL de la imagen te lleva al recurso correspondiente en el panel Recursos. crbug.com/244159]

Marcos de GPU

Los fotogramas que ocurren en la GPU ahora se muestran en la parte superior, encima de los fotogramas en el subproceso principal (crbug.com/305863).

Oyente de popstate

'popstate' ahora está disponible como un punto de interrupción de objeto de escucha de eventos en la barra lateral del panel Sources. [crbug.com/88112]

Configuración de procesamiento disponible en el panel lateral

Ahora, cuando se abre el panel lateral, 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 de 'renderización' en el panel lateral de la consola".

Copiar imagen como URL de datos

Copiar imagen como URL de datos

El contenido de los recursos de imagen del panel Recursos ahora puede copiarse como un URI de datos (data:image/png;base64,iVBO...).

Para probarlo, busca el recurso de imagen en Marcos > [Recurso] > Imágenes, haz clic con el botón derecho en la vista previa de la imagen para acceder al menú contextual y selecciona "Copiar imagen como URL de datos". crbug.com/321132]

Filtrado de URI de datos

Si nunca pensaste que pertenecen, ahora puedes filtrar los URI de datos de la pestaña Red. Selecciona el ícono de filtro.

Ícono de filtro
para ver otros tipos de filtro de recursos. crbug.com/313845]

Filtrado de URI de datos

Se corrigieron errores de sincronización de red.

Te pedimos disculpas si viste tu imagen y, al parecer, tardó 300,000 años en descargarse. ;) Ya se corrigieron estos tiempos incorrectos para 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. Primero, el botón de registro actúa como esperas de Rutas o un perfil de CPU. Y como es de esperar, si vuelves a cargar la página mientras Herramientas para desarrolladores está abierto, la grabación de red comenzará automáticamente. Luego, se desactivará, por lo que si quieres capturar la actividad de red después de cargar la página, actívalo. Esto facilita la visualización de tu cascada sin solicitudes de red tardías que sesguen los resultados. crbug.com/325878]

Los temas de Herramientas para desarrolladores ahora están disponibles a través de extensiones

Las hojas de estilo del usuario ahora están disponibles a través de los experimentos de Herramientas para desarrolladores (casilla de verificación: "Permitir temas de IU personalizados"), que permiten que una extensión de Chrome aplique estilos personalizados a Herramientas para desarrolladores. Consulta Ejemplo de extensión de tema de Herramientas para desarrolladores para ver un ejemplo. crbug.com/318566]

Eso es todo en esta edición del resumen de Herramientas para desarrolladores. Si aún no lo has hecho, consulta la edición de noviembre.