Novedades de Herramientas para desarrolladores (Chrome 62)

Kayce Basques
Kayce Basques

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

Operadores de espera de nivel superior en la consola

Console ahora admite operadores await de nivel superior.

Usa operadores espera de nivel superior en la consola

Figura 1: Usa operadores await de nivel superior en la consola.

Nuevos flujos de trabajo de capturas de pantalla

Ahora puedes tomar capturas de pantalla de una parte del viewport o 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, haz lo siguiente:

  1. Haz clic en Inspeccionar Inspección o presiona Comando + Mayúsculas + C (Mac) o Control + Mayúsculas + C (Windows y Linux) para ingresar al modo de inspección de elemento.
  2. Mantén presionado Comando (Mac) o Control (Windows y Linux) y selecciona la parte del viewport de la que deseas tomar una captura de pantalla.
  3. Suelta el botón del mouse. Herramientas para desarrolladores descargará una captura de pantalla de la parte que seleccionaste.

Cómo tomar una captura de pantalla de una parte del viewport

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, sigue estos pasos:

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

    El resultado del comando "Capture node screenshot"

    Figura 4. El resultado del comando Capture node screenshot

Resaltado de la cuadrícula de CSS

Para ver la cuadrícula de CSS que afecta un elemento, coloca el cursor sobre un elemento del Árbol del DOM del panel Elements. Aparecerá un borde discontinuo alrededor de cada uno de los elementos de la cuadrícula. Esto solo funciona cuando se aplica la display:grid al elemento seleccionado, o al elemento superior del que se seleccionó.

Destaca una cuadrícula de CSS

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 crearon con el constructor especificado. Por ejemplo:

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

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

Nuevos filtros de Console

Console ahora admite filtros negativos y de URL.

Filtros negativos

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

Ejemplo de 3 mensajes que se filtrarán

Figura 6. La primera sentencia registra one, two, three y four en Console. two está oculto porque -two se ingresa en el cuadro Filtro.

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

  • En el texto del mensaje
  • Indica el nombre de archivo en el 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 cuya URL incluya <text>.

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

Ejemplo de filtrado de URL

Figura 7: Usar el filtrado de URL para mostrar solo los mensajes que se originan en 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 ese 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é que pueden obtenerse una vista previa en el panel Aplicación

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

Obtén una vista previa de un recurso de caché

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 cachés creadas con la API de Cache es... aproximada. Por ejemplo, cuando una página crea una caché nueva, debes actualizar la página o las Herramientas para desarrolladores de forma manual para verla.

En Chrome 62, la pestaña Almacenamiento en caché 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 probarla por tu cuenta.

Cobertura de código a nivel de bloqueo

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

Ejemplo de la pestaña Cobertura en Chrome 61

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

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

Ejemplo de la pestaña Cobertura en Chrome 62

Figura 11: 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 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