Se usó la API de Cloud Translation para traducir esta página.

Novedades de Herramientas para desarrolladores (Chrome 71)

Kayce Basques

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

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

Coloca el cursor sobre una expresión instantánea para destacar un nodo del DOM

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

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

Figura 1: Coloca el cursor sobre el resultado de una 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 la consola que se evalúe como un nodo, haz clic con el botón derecho en el resultado y, luego, selecciona Store as global variable.

Almacenar como una variable global en la consola

Figura 2. Almacenar como una variable global en la consola

También puedes hacer clic con el botón derecho en el nodo del árbol del DOM y seleccionar Store as global variable.

Almacenar como una variable global en el árbol del DOM.

Figura 3. Almacenar como una variable global en el árbol del DOM

Información sobre el iniciador y la prioridad ahora en importaciones y exportaciones de HAR

Si quieres diagnosticar los 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, solo tienes que arrastrarlo y soltarlo.

Cuando exportas un archivo HAR, las Herramientas para desarrolladores ahora incluyen información sobre el iniciador y la prioridad en ese archivo. Cuando importas archivos HAR de nuevo a Herramientas para desarrolladores, ahora se propagan las columnas Initiator y Priority.

El campo _initiator proporciona más contexto sobre la razón por la que se solicitó el recurso. Esto se asigna a la columna Initiator de la tabla Requests.

La columna del iniciador.

Figura 9: La columna del iniciador

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

Visualiza iniciadores y dependencias.

Figura 10: Visualiza iniciadores y dependencias

El campo _priority indica el nivel de prioridad que el navegador 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 Solicitudes y selecciona Prioridad para que se muestre la columna Prioridad.

Cómo mostrar la columna Prioridad

Figura 12: Cómo mostrar la columna Prioridad

Nota: Los campos _initiator y _priority comienzan con guiones bajos, ya que la especificación de HAR establece que los campos personalizados deben comenzar con guiones bajos.

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

Figura 13: Menú de comandos

Ahora puedes abrir el menú de comandos desde el menú principal. Haz clic en el botón Menú principal y selecciona Ejecutar comando.

Figura 14: Cómo abrir el 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 active uno de estos eventos de pantalla en pantalla. Herramientas para desarrolladores se detiene en la primera línea del controlador.

Eventos pantalla en pantalla en el panel Event Listener Breakpoints.

Figura 16: Eventos pantalla en pantalla en el panel Event Listener Breakpoints

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

Supongamos que quieres 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.

Obtén una referencia al nodo.

Figura 17: Usar Almacenar como variable global para obtener una referencia al nodo
Pasa el nodo como primer argumento a monitorEvents().

Figura 18: Pasa el nodo a monitorEvents()
Interactúa con el nodo. Las Herramientas para desarrolladores registran todos 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 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.

Consulta la Referencia de línea de comandos para obtener otras funciones útiles a las que puedes llamar desde la consola.

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.
Para informar un problema de Herramientas para desarrolladores, use Más opciones > Ayuda > Informar 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.