Novedades de Herramientas para desarrolladores (Chrome 62)

Nuevas funciones y cambios para Herramientas para desarrolladores en Chrome 62:

• Compatibilidad con operadores de await de nivel superior en Console.
• Capturas de pantalla de una parte del viewport y capturas de pantalla de nodos HTML específicos.
• Destacar cuadrícula de CSS
• Una nueva API de Console para consultar objetos.
• Filtros negativos y filtros de URL en la Consola.
• Importaciones HAR en el panel Network.
• Recursos de caché de vista previa.
• Depuración de caché más predecible.
• Cobertura de código a nivel de bloque.

Operadores await de nivel superior en Console

Console ahora admite operadores await de nivel superior.

Figura 1. Uso de operadores await de nivel superior en Console

Nuevos flujos de trabajo de capturas de pantalla

Ahora, puedes tomar una captura de pantalla de una parte del viewport o de un nodo HTML específico.

Capturas de pantalla de una parte del viewport

Para tomar una captura de pantalla de una parte de tu viewport:

1. Haz clic en Inspect o presiona Comando + Mayúsculas + C (Mac) o Control + Mayúsculas + C (Windows y Linux) para ingresar al modo Inspeccionar elemento
2. Mantén presionada la tecla Comando (Mac) o Control (Windows, Linux) y selecciona el viewport del que quieres tomar una captura de pantalla.
3. Suelta el mouse. Herramientas para desarrolladores descarga una captura de pantalla de la parte que seleccionaste.

Figura 2. Cómo tomar una captura de pantalla de una parte del viewport

Capturas de pantalla de nodos HTML específicos

Para tomar una captura de pantalla de un nodo HTML específico:

1. Selecciona un elemento en el panel Elements.

   

   Figura 3. En este ejemplo, el objetivo es tomar una captura de pantalla del encabezado azul que contiene el texto Tools. Ten en cuenta que este nodo ya está seleccionado en el árbol del DOM de la Panel Elements

2. Abre el menú de comandos.

3. Comienza a escribir node y selecciona Capture node screenshot. Herramientas para desarrolladores descarga una captura de pantalla del nodo seleccionado.

   

   Figura 4. El resultado del comando Capture node screenshot

Resaltado de cuadrícula de CSS

Para ver la cuadrícula de CSS que afecta a un elemento, coloca el cursor sobre un elemento en el árbol del DOM de la Panel Elements. Aparecerá un borde discontinuo alrededor de cada uno de los elementos de la cuadrícula. Esto solo funciona cuando el elemento seleccionado, o el elemento superior del elemento seleccionado, tiene aplicado display:grid.

Figura 5. Destaca una cuadrícula de CSS

Mira el siguiente video para aprender los conceptos básicos de la cuadrícula de CSS en menos de 2 minutos.

Una nueva API para consultar objetos de montón

Llama a queryObjects(Constructor) desde la consola para mostrar un array de objetos que se hayan crearse con el constructor especificado. Por ejemplo:

• queryObjects(Promise) Muestra todas las promesas.
• queryObjects(HTMLElement) Muestra todos los elementos HTML.
• queryObjects(foo), donde foo es el nombre de una función. Devuelve todos los objetos para los que se crearon instancias a través de new foo().

El alcance de queryObjects() es el contexto de ejecución seleccionado actualmente en la consola. Consulta Selecciona el contexto de ejecución.

Nuevos filtros de Console

La consola ahora admite filtros negativos y de URL.

Filtros negativos

Escribe -<text> en el cuadro Filtro para filtrar cualquier mensaje de la consola que incluya <text>.

Figura 6. La primera sentencia registra one, two, three y four en la consola. two está oculto porque se ingresó -two en el cuadro Filtro

Herramientas para desarrolladores filtra un mensaje si se encuentra <text>:

• En el texto del mensaje
• En el nombre del archivo del que se originó el mensaje.
• En el texto de seguimiento de pila

El filtro negativo también funciona con expresiones regulares, como -/[4-5]*ms/.

Filtros de URL

Escribe url:<text> en el cuadro Filtro para mostrar solo los mensajes que se originaron a partir de una secuencia de comandos cuyo La URL incluye <text>.

El filtro utiliza coincidencias parciales. Si <text> aparece en alguna parte de la URL, las Herramientas para desarrolladores mostrará el elemento mensaje.

Figura 7. Usar filtros de URL para mostrar solo mensajes que se originen en secuencias de comandos cuyas URL incluye hymn. Si colocas el cursor sobre el nombre de la secuencia de comandos, verás que el nombre del host incluye este texto.

Importaciones HAR en el panel Network

Arrastra y suelta un archivo HAR en el panel Network para importarlo.

Figura 8. Importar un archivo HAR

Recursos de caché de vista previa en el panel Application

Haz clic en una fila de una tabla de Almacenamiento en caché para obtener una vista previa de ese recurso debajo de la tabla.

Figura 9. Obtén una vista previa de un recurso de caché

Depuración de caché más responsiva

En Chrome 61 y versiones anteriores, la depuración de las cachés creadas con la API de Cache es... aproximada. Para Por ejemplo, cuando una página crea una nueva caché, debes actualizar manualmente la página o Herramientas para desarrolladores en orden para ver la nueva caché.

En Chrome 62, la pestaña Almacenamiento en caché ahora se actualiza en tiempo real cada vez que creas, actualizas o borrar una caché o un recurso. Mira el siguiente video para ver un ejemplo.

Consulta la demostración de almacenamiento en caché para probarla por tu cuenta.

Cobertura de código a nivel de bloque

En Chrome 61 y versiones anteriores, la pestaña Cobertura marca todo el código de una función como utilizado, por lo que siempre que se llame a la función.

Figura 10: Un ejemplo de la pestaña Cobertura en Chrome 61. La línea 4 está marcada como usada, a pesar de que Nunca se ejecuta

A partir de Chrome 62, la pestaña Cobertura te indica a qué código se llama dentro de una función.

Figura 11: Un ejemplo de la pestaña Cobertura en Chrome 62. La línea 4 está marcada como no utilizada.

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.
• Informa un problema en Herramientas para desarrolladores con Más opciones   > 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.