Novedades de Herramientas para desarrolladores (Chrome 62)

Kayce Basques
Kayce Basques
X GitHub

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

Operadores await de nivel superior en la consola

La consola ahora admite operadores await de nivel superior.

Cómo usar operadores await de nivel superior en la consola

Figura 1. Cómo usar operadores await de nivel superior en la consola

Nuevos flujos de trabajo de capturas de pantalla

Ahora puedes tomar una captura de pantalla de una parte de la ventana gráfica o de un nodo HTML específico.

Capturas de pantalla de una parte de la ventana gráfica

Para tomar una captura de pantalla de una parte de tu ventana gráfica, haz lo siguiente:

  1. Haz clic en Inspeccionar Inspeccionar o presiona Comando + Mayúsculas + C (Mac) o Ctrl + Mayúsculas + C (Windows, Linux) para ingresar al modo de inspección de elementos.
  2. Mantén presionada la tecla Comando (Mac) o Control (Windows y Linux) y selecciona la parte de la ventana gráfica de la que quieras tomar una captura de pantalla.
  3. Suelta el mouse. Las Herramientas para desarrolladores descargan una captura de pantalla de la parte que seleccionaste.

Cómo tomar una captura de pantalla de una parte de la ventana gráfica

Figura 2. Cómo tomar una captura de pantalla de una parte de la ventana gráfica

Capturas de pantalla de nodos HTML específicos

Para tomar una captura de pantalla de un nodo HTML específico, haz lo siguiente:

  1. Selecciona un elemento en el panel Elementos.

    Ejemplo de un nodo

    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 DOM del panel Elementos.

  2. Abre el menú de comandos.

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

    El resultado del comando "Tomar una captura de pantalla del nodo"

    Figura 4. El resultado del comando Capture node screenshot

Destacado de cuadrícula de CSS

Para ver la cuadrícula CSS que afecta a un elemento, coloca el cursor sobre un elemento en el árbol del DOM del panel Elementos. Aparecerá un borde discontinuo alrededor de cada elemento de la cuadrícula. Esto solo funciona cuando el elemento seleccionado o el elemento principal del elemento seleccionado tienen aplicado display:grid.

Cómo destacar una cuadrícula de CSS

Figura 5. Cómo destacar 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.

Nueva API para consultar objetos del montón

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

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

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

Nuevos filtros de la consola

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

Ejemplo de 3 mensajes que se filtrarán

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

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

  • En el texto del mensaje
  • En el nombre del archivo desde el que se originó el mensaje
  • En el texto del registro de seguimiento de la pila

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

Filtros de URL

Escribe url:<text> en el cuadro Filter para mostrar solo los mensajes que se originaron en una secuencia de comandos cuya URL incluye <text>.

El filtro usa la coincidencia parcial. Si <text> aparece en cualquier parte de la URL, Herramientas para desarrolladores mostrará el mensaje.

Ejemplo de filtrado de URLs

Figura 7. Usar el filtrado de URLs para mostrar solo los mensajes que provienen de secuencias de comandos cuya 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 de HAR en el panel de red

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

Cómo importar un archivo HAR

Figura 8. Cómo importar un archivo HAR

Recursos de caché con vista previa en el panel Application

Haz clic en una fila de una tabla de Cache Storage para ver una vista previa de ese recurso debajo de la tabla.

Cómo obtener una vista previa de un recurso de caché

Figura 9. Cómo obtener 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 memorias caché creadas con la API de Cache es… difícil. Por ejemplo, cuando una página crea una caché nueva, debes actualizar manualmente la página o Herramientas para desarrolladores para ver la caché nueva.

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

Consulta la demostración de Cache Storage para probarlo tú mismo.

Cobertura de código a nivel de bloque

En Chrome 61 y versiones anteriores, la pestaña Coverage marca todo el código dentro de una función como usado, siempre y cuando se llame a la función.

Ejemplo de la pestaña Coverage en Chrome 61

Figura 10: Ejemplo de la pestaña Cobertura en Chrome 61. La línea 4 está marcada como usada, aunque nunca se ejecuta.

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

Ejemplo de la pestaña Coverage en Chrome 62

Figura 11: Un ejemplo de la pestaña Coverage 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 tu navegador de desarrollo predeterminado. Estos canales de versión preliminar te brindan acceso a las funciones más recientes de DevTools, te permiten probar las APIs de vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores