Novedades de Herramientas para desarrolladores (Chrome 67)

Kayce Basques
Kayce Basques
X GitHub Error

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

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

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

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 Network Search

Haz clic en Coincidir mayúsculas y minúsculas Coincidir mayúsculas y minúsculas para que tu consulta distinga entre mayúsculas y minúsculas. Haz clic en Use Regular Expression Usar expresión regular para mostrar cualquier resultado que coincida con el patrón que proporciones. No necesitas unir tu 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 Global Search ahora coincide con la del panel nuevo Network Search. Ahora también imprime los resultados para facilitar la lectura.

IU anterior y 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 de 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, las Herramientas para desarrolladores ahora muestran una vista previa de ese color.

Un ejemplo de los valores de color de una variable 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, a la derecha, 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 a fetch() de esa solicitud en el portapapeles.

Copiar el código equivalente a fetch() de una solicitud

Figura 5. Cómo copiar el código equivalente a fetch() para una solicitud

Herramientas para desarrolladores produce 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

Nuevas auditorías

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

Nuevas opciones de configuración

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

  • Conserva la configuración del viewport y el usuario-agente del escritorio. En otras palabras, puedes evitar que el panel Auditorías simule un dispositivo móvil.
  • Inhabilitar la limitación de CPU y de red
  • Conservar el almacenamiento, como IndexedDB y LocalStorage, 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 tu auditoría en el panel Rendimiento.

Botón Ver seguimiento

Figura 7: El botón Ver seguimiento

Detener bucles infinitos

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

  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(). Cuando haces clic en Start Infinite Loop, se ejecuta un bucle do...while que nunca se detiene. Se reanuda el intervalo porque no se estaba ejecutando cuando se seleccionó Stop Current JavaScript Call Detener.

Tiempos de usuario en las pestañas Rendimiento

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

Visualización de las mediciones de User Timing en la pestaña Bottom-Up.

Figura 8: Consultar 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 Memory

El panel Memory (Memoria) ahora muestra claramente todas las instancias de VM de JavaScript asociadas con una página, en lugar de ocultarlas detrás del menú desplegable Target (Destino) como antes.

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

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

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 correcto representa 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 valor de la derecha corresponde a Memory Footprint.

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

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

Dos ventanas de Herramientas para desarrolladores, una al lado de la otra, que muestran 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 Página.

Actualizaciones sobre el Tema oscuro

Chrome 67 se envía con una serie de 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: Una 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 los certificados de transparencia en el panel de seguridad.

Figura 12: Información sobre la transparencia de la certificación en el panel 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 de cada proceso para que puedas ver el trabajo total que genera cada uno.

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

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

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   Más   > 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.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 Primeros pasos

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