Novedades de Herramientas para desarrolladores (Chrome 67)

Kayce Basques
Kayce Basques

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

Versión en video de las notas de la versión:

Abre el panel Red y, luego, presiona Comando + F (Mac) o Control + F (Windows, Linux y ChromeOS) para abrir el nuevo panel Búsqueda de red. Herramientas para desarrolladores busca en los encabezados y los cuerpos de todas las solicitudes de red la consulta que proporciones.

Buscando el texto "cache-control" con el nuevo panel de Búsqueda de red.

Figura 1: Buscando el texto cache-control con el nuevo panel de Búsqueda de red

Haz clic en Match Case Coincidir mayúsculas y minúsculas para que tu consulta distinga mayúsculas de minúsculas. Haz clic en Use Regular Expression Usar expresión regular para mostrar cualquier resultado que coincida con el patrón que proporcionaste. No es necesario que envuelvas la regex en barras diagonales.

Una consulta de expresión regular en el panel de búsqueda de red.

Figura 2. Una consulta de expresión regular en el panel de búsqueda de red.

La IU del panel de Búsqueda global ahora coincide con la IU del nuevo panel Búsqueda de red. Ahora también imprime los resultados para facilitar la lectura.

La IU anterior y la nueva.

Figura 3. La IU anterior se encuentra a la izquierda y la nueva, a la derecha.

Presiona Comando + Opción + F (Mac) o Control + Mayúsculas + F (Windows, Linux y ChromeOS) para abrir la Búsqueda global. También puedes abrirlo a través del Menú de comandos.

Vistas previas de los valores de las variables CSS en el panel Styles

Cuando el valor de una propiedad de color de CSS, como background-color o color, se establece en una variable de CSS, Herramientas para desarrolladores ahora muestra una vista previa de ese color.

Un ejemplo de los valores de color de las variables de CSS.

Figura 4. En la IU anterior de la izquierda, no hay una vista previa de color junto a color: var(--main-color), mientras que en la IU nueva de la derecha, sí hay

Copiar como recuperado

Haz clic con el botón derecho en una solicitud de red y selecciona Copy > Copy As Fetch para copiar el código equivalente en fetch() de esa solicitud en el portapapeles.

Copia el código equivalente a fetch() para una solicitud.

Figura 5. Copia el código equivalente de fetch() para una solicitud

Herramientas para desarrolladores genera código como el siguiente:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

Actualizaciones del panel de auditorías

Auditorías nuevas

El panel Audits (Auditorías) tiene 2 auditorías nuevas, incluidas las siguientes:

Nuevas opciones de configuración

Ahora puedes configurar el panel Audits (Auditorías) para hacer lo siguiente:

  • Conserva la configuración del usuario-agente y la viewport para computadoras de escritorio. En otras palabras, puedes evitar que el panel Audits (Auditorías) simule un dispositivo móvil.
  • Inhabilita la limitación de la red y la CPU.
  • Conserva el almacenamiento, como LocalStorage e IndexedDB, en todas las auditorías.

Nuevas opciones de configuración de auditoría.

Figura 6. Nuevas opciones de configuración de auditoría

Ver seguimientos

Después de auditar una página, haz clic en Ver seguimiento para ver los datos de rendimiento de carga en los que se basa la auditoría en el panel Rendimiento.

El botón Ver seguimiento

Figura 7: El botón Ver seguimiento

Cómo detener los bucles infinitos

Si trabajas mucho con bucles for, bucles do...while o recursividad, es probable que hayas ejecutado un bucle infinito por error al desarrollar tu sitio. Para detener el bucle infinito, ahora puedes:

  1. Abre el panel Fuentes.
  2. Haz clic en Detener Pausar. El botón cambia a Resume Script Execution Reanudar.
  3. Mantén presionado Resume Script Execution Reanudar y selecciona Stop Current JavaScript Call Detener.

En el video de arriba, el reloj se actualiza con un temporizador de setInterval(). Si haces clic en Start Infinite Loop, se ejecutará un bucle do...while que nunca se detiene. El intervalo se reanuda porque no se estaba ejecutando cuando estaba seleccionada la opción Stop Current JavaScript Call Detener.

Tiempos de usuario en las pestañas Rendimiento

Cuando veas un registro de rendimiento, haz clic en la sección User Timing para ver las mediciones de User Timing en las pestañas Summary, Bottom-Up, Call Tree y Event Log.

Cómo ver las mediciones de User Timing en la pestaña Bottom-Up

Figura 8: Cómo ver las mediciones de User Timing en la pestaña Bottom-Up La barra azul a la izquierda de la sección User Timing indica que está seleccionada.

En general, ahora puedes seleccionar cualquiera de las secciones (Main Thread, User Timing, GPU, ScriptStreamer, etc.) y ver la actividad de esa sección en las pestañas.

Selecciona instancias de VM de JavaScript en el panel de memoria

El panel Memory ahora muestra claramente todas las instancias de VM de JavaScript asociadas con una página, en lugar de ocultarlas en el menú desplegable Target, como antes.

Capturas de pantalla antes y después del panel de Memory

Figura 9: En la IU anterior de la izquierda, las instancias de VM de JavaScript están ocultas detrás del menú desplegable Target, mientras que en la IU nueva de la derecha se muestran en la tabla Select JavaScript VM Instance.

Junto a la instancia developers.google.com, hay 2 valores: 8.7 MB y 13.3 MB. El valor de la izquierda representa la memoria asignada debido a JavaScript. El valor de la derecha representa toda la memoria del SO que se asigna debido a esa instancia de VM. El valor de la derecha incluye el valor de la izquierda. En el Administrador de tareas de Chrome, el valor de la izquierda corresponde a JavaScript Memory y el de la derecha corresponde a Memory Footprint.

Se cambió el nombre de la pestaña Red por pestaña de Página

En el panel Fuentes, la pestaña Red ahora se llama Página.

Dos ventanas de Herramientas para desarrolladores una al lado de la otra, lo que demuestra el cambio de nombre.

Figura 10: En la IU anterior de la izquierda, la pestaña que muestra los recursos de la página se llama Red, mientras que, en la IU nueva de la derecha, se llama Page.

Actualizaciones del Tema oscuro

Chrome 67 se envía con varios cambios menores en el esquema de colores del tema oscuro. Por ejemplo, los íconos de punto de interrupción y la línea de ejecución actual ahora son de color verde.

Captura de pantalla del nuevo ícono del punto de interrupción y la línea actual del esquema de colores de ejecución.

Figura 11: Captura de pantalla del nuevo ícono del punto de interrupción y la línea actual del esquema de colores de ejecución

Certificado de transparencia en el panel de seguridad

El panel Seguridad ahora brinda información sobre el certificado de transparencia.

Información sobre el Certificado de transparencia en el panel de Seguridad.

Figura 12: Información sobre la transparencia de la certificación en el panel de seguridad

Aislamiento de sitios en el panel Rendimiento

Si tienes habilitado el aislamiento de sitios, el panel Rendimiento ahora proporciona un gráfico tipo llama para cada proceso, de modo que puedas ver el trabajo total que genera cada uno.

Gráficos tipo llama por proceso en una grabación de la presentación

Figura 13: Gráficos tipo llama por proceso en una grabación de la presentación

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