Novedades de Herramientas para desarrolladores (Chrome 71)

Kayce Basques
Kayce Basques

Entre las nuevas funciones y los principales cambios que se implementarán en las Herramientas para desarrolladores de Chrome en Chrome 71, se incluyen las siguientes:

Sigue leyendo o mira la versión en video de esta página:

Coloca el cursor sobre una expresión en vivo para destacar un nodo del DOM

Cuando una expresión en vivo se evalúe como un nodo del DOM, coloca el cursor sobre el resultado de la expresión en vivo para destacar ese nodo en el viewport.

Coloca el cursor sobre un resultado de expresión en vivo para destacar el nodo en el viewport.

Figura 1: Coloca el cursor sobre un resultado de expresión en vivo para destacar el nodo en el viewport

Almacena nodos del DOM como variables globales

Para almacenar un nodo del DOM como una variable global, ejecuta una expresión en Console que se evalúe como un nodo, haz clic con el botón derecho en el resultado y selecciona Store as global variable.

Almacenarlas como una variable global en la consola.

Figura 2. Almacenar como variables globales en Console

O bien, haz clic con el botón derecho en el nodo del Árbol del DOM y selecciona Store as global variable.

Almacena los elementos como una variable global en el árbol del DOM.

Figura 3. Almacenar como variables globales en el árbol del DOM

La información del iniciador y la prioridad ahora en las importaciones y exportaciones de HAR

Si quieres diagnosticar registros de red con colegas, puedes exportar las solicitudes de red a un archivo HAR.

Exportar solicitudes de red a un archivo HAR

Figura 8: Exporta solicitudes de red a un archivo HAR

Para volver a importar el archivo al panel Network, arrástralo y suéltalo.

Cuando exportas un archivo HAR, Herramientas para desarrolladores ahora incluye información sobre la prioridad y el iniciador en el archivo HAR. Cuando vuelvas a importar archivos HAR a Herramientas para desarrolladores, ahora se propagarán las columnas Initiator y Priority.

El campo _initiator proporciona más contexto sobre la causa de la solicitud del recurso. Esto se asigna a la columna Initiator de la tabla Requests.

La columna del iniciador.

Figura 9: La columna de iniciador

También puedes mantener presionada la tecla Mayúsculas y colocar el cursor sobre una solicitud para ver su iniciador y dependencias.

Ver iniciadores y dependencias

Figura 10: Visualiza iniciadores y dependencias

El campo _priority indica el nivel de prioridad que el navegador le asignó al recurso. Esto se asigna a la columna Prioridad en la tabla Solicitudes, que está oculta de forma predeterminada.

La columna Prioridad.

Figura 11: La columna Prioridad

Haz clic con el botón derecho en el encabezado de la tabla Requests y selecciona Prioridad para mostrar la columna Prioridad.

Cómo mostrar la columna Prioridad

Figura 12: Cómo mostrar la columna Prioridad

Accede al menú de comandos desde el menú principal

Usa el Menú de comandos para acceder rápidamente a los paneles, las pestañas y las funciones de Herramientas para desarrolladores.

El menú Comandos.

Figura 13: El menú Comandos

Ahora puedes abrir el menú Comandos desde el menú principal. Haz clic en el botón Main Menu main y selecciona Run command.

Apertura del menú de comandos desde el menú principal.

Figura 14: Apertura del menú de comandos desde el menú principal

Puntos de interrupción de pantalla en pantalla

Pantalla en pantalla es una nueva API experimental que permite que una página cree una ventana de video flotante en el escritorio.

Habilita las casillas de verificación enterpictureinpicture, leavepictureinpicture y resize en el panel Event Listener Breakpoints para pausar cuando se activa uno de estos eventos de pantalla en pantalla. Las Herramientas para desarrolladores hacen una pausa en la primera línea del controlador.

Eventos de pantalla en pantalla en el panel Event Listener Breakpoints.

Figura 16: Eventos de pantalla en pantalla en el panel de interrupciones del objeto de escucha de eventos

(Sugerencia adicional) Ejecuta monitorEvents() en la consola para ver cómo se activan los eventos de un elemento

Supongamos que deseas agregar un borde rojo alrededor de un botón después de enfocarlo y presionar R, E, D, pero no sabes a qué eventos agregar objetos de escucha. Usa monitorEvents() para registrar todos los eventos del elemento en la consola.

  1. Obtén una referencia al nodo.

    Usar “Almacenar como variable global” para obtener una referencia al nodo

    Figura 17: El uso de Almacenar como variable global para obtener una referencia al nodo

  2. Pasa el nodo como primer argumento a monitorEvents().

    Pasar el nodo a monitorEvents()

    Figura 18: Pasa el nodo a monitorEvents()

  3. Interactúa con el nodo. Herramientas para desarrolladores registra todos los eventos del nodo en la consola.

    Los eventos del nodo en la consola.

    Figura 19: Los eventos del nodo en la consola

Llama a unmonitorEvents() para dejar de registrar eventos en la consola.

unmonitorEvents(temp1);

Pasa un array como el segundo argumento a monitorEvents() si solo deseas supervisar ciertos eventos o tipos de eventos:

monitorEvents(temp1, ['mouse', 'focus']);

El tipo mouse le indica a las Herramientas para desarrolladores que registre todos los eventos relacionados con el mouse, como mousedown y click. Otros tipos admitidos son key, touch y control.

Revisa la Referencia de línea de comandos para ver otras funciones prácticas a las que puedes llamar desde la consola.

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