Qué hay de nuevo en DevTools (Chrome 92)

Published on Updated on

Translated to: English, 中文

Traducción cedida por Miguel Ángel.

¿Tienes interés en mejorar DevTools? Regístrate para participar en la Google User Research aquí.

Editor de CSS Grid

¡Cuánto tiempo esperando esta función! Ahora puedes previsualizar el resultado de la declaración de Grid en CSS y editarla desde un nuevo editor en el inspector de elementos.

Editor de CSS Grid

Cuando un elemento HTML de la página tiene un display: grid o display: inline-grid aplicado a él, verás que aparece un icono al lado de la declaración en el panel de Styles.

Haz clic en ese icono para abrir el editor de CSS Grid. Desde ahí puedes previsualizar un cambio en la declaración del Grid (por ejemplo, puedes ver cómo quedaría el justify-content: space-around) y aplicar los cambios con solo un clic.

Chromium issue: 1203241

Soporte para la redeclaración de const en la consola

La pestaña de Consola ahora soporta la redeclaración de variables const, sumándose así a las redeclaraciones de let y class que ya existían..

Esto permite a los desarrolladores hacer un copiado y pegado de código en la consola de DevTools para ver cómo funciona o experimentar, hacer pequeños cambios en el código y repetir el proceso sin necesidad de refrescar la página. Anteriormente, DevTools mostraban un error de sintaxis al intentar redeclarar una variable const en la consola.

Veamos un ejemplo. La redeclaración de const se admite en scripts REPL separados (mira el ejemplo de la variable a más abajo). Ten en cuenta que lo siguiente no se soporta por diseño:

  • const declaradas en scripts de la página no se pueden redeclarar en scripts REPL.
  • const no se puede redeclarar en el mismo script REPL (mira el ejemplo de la variable b).
Redeclaraciones de constantes

Chromium issue: 1076427

Visor de orden de los elementos

Ahora puedes ver el orden de los elementos de la página en tu pantalla para mejorar la inspección de la accesibilidad.

Visor de orden del código

El orden del contenido en un documento HTML es muy importante para el SEO y la accesibildad. Las nuevas funcionalidades de CSS permite a los desarrolladores crear contenido que parezca muy diferente en el orden en pantalla que como está plasmado en el documento HTML. Este es un problema de accesibilidad muy grande ya que un usuario que usa un lector de pantallas puede tener una diferente, y seguramente confusa, experiencia que un usuario que usa un navegador.

Chromium issue: 1094406

Nuevos accesos directos a los detalles de un iframe

Ahora puedes ver los detalles de un iframe al hacer clic con el botón secundario en un elemento iframe y seleccionar la opción Show frame details.

Show frame details

Esto te llevará a una nueva vista con todos los detalles en el panel de Application, donde puedes examinar todos los detalles del documento, como seguridad, estado de isolación, política de permisos y poder depurar posibles problemas.

Detalles de la vista Frame

Chromium issue: 1192084

Mejor soporte para depurar CORS

Los errores de Cross-origin resource sharing (CORS) ahora aparecen en la pestaña de Issues y, además, se muestran las diferentes razones por las que se producen los errores. Puedes hacer click en cada Issue para ver el detalle de las potenciales causas y las soluciones.

Problemas de CORS en la pestaña Issues

Chromium issue: 1141824

Actualizaciones en el panel de Network

Renombrar etiqueta XHR por Fetch/XHR

La etiqueta XHR ha sido renombrada a Fetch/XHR. Este cambio ahora deja más claro que este filtro incluye tanto las peticiones de red realizadas con XMLHttpRequest como con Fetch API.

Etiqueta Fetch/XHR

Chromium issue: 1201398

Filtra los recursos de tipo Wasm en el panel de Network

Ahora puedes filtrar los recursos de red de Web Assembly usando el botón Wasm en el panel de Network.

Filtro para Wasm

Chromium issue: 1103638

User-Agent Client Hints por dispositivo en la pestaña de condiciones

Ahora los User-Agent Client Hints son aplicados por dispositivo en el campo User Agent debajo de la pestaña de Network Conditions.

Los User-Agent Client Hints son una nueva expansión de la Client Hints API. Esto permite a los desarrolladores a acceder a información sobre el navegador del usuario y su dispositivo preservando la privacidad del usuario y de una forma mucho más ergonómica.

User-Agent Client Hints para dispositivos en la pestaña Network

Chromium issue: 1174299

Reporta problemas con el modo Quirks en la pestaña de Issues

DevTools ahora reporta los posibles problemas con el modo Quirks y el modo Limited-Quirks.

El modo Quirks y Limited-Quirks son modos de navegadores antiguos cuando todavía los estándares web no fueron establecidos. Estos modos emulan la era pre-standard para como se comportaba el diseño en el navegador y en ocasiones causan efectos visuales inesperados.

Cuando depuras problemas de diseño, los desarrolladores pueden pensar que son causados por CSS que han producido o errores en el HTML, mientras que el problema en realidad está en el modo de compatibilidad en que la página se encuentra. Ahora DevTools proporciona sugerencias para solucionarlo.

Reporta los problemas del modo Quirks en la pestaña Issues

Chromium issue: 622660

Incluye las intersecciones computadas en el panel de Performance

DevTools ahora te muestra el coste de las intersecciones computadas en la pila de JavaScript. Este cambio te puede ayudar a identificar los eventos de Intersection Observer y depurar cualquier problema potencial de rendimiento.

Interseciones computadas en el panel de Performance

Chromium issue: 1199137

Lighthouse 7.5 en el panel de Lighthouse

El panel de Lighthouse ahora está ejecutando Lighthouse 7.5. La advertencia de "falta un width y height explícito" ha sido eliminado en imágenes que usan la propiedad aspect-ratio en CSS. Previamente, Lighthouse mostraba siempre esta advertencia si tu imagen no tenía definidos width y height.

Puedes ver todos los cambios de Lighthouse en sus nota de lanzamiento.

Chromium issue: 772558

"Restart frame" queda obsoleto en el menú contextual de la pila de llamada

La opción Restart frame queda obsoleta. Esta característica requiere más desarrollo para que funcione correctamente ya que actualmente está rota y falla frecuentemente.

El menú contextual Restart frame ha quedado obsoleto

Chromium issue: 1203606

[Experimental] Monitor de protocolo

Para activar este experimento, activa la casilla Protocol Monitor en Settings > Experiments.

Chrome DevTools usa el Chrome DevTools Protocol (CDP) para instrumentalizar, inspeccionar, depurar y analizar el comportamiento de Chrome. El monitor de Protocolo te provee una forma de ver todas las peticiones CDP y las respuestas realizadas por DevTools.

Dos nuevas funcionalidades han sido añadidas para facilitar las pruebas de CDP:

  • Un nuevo botón Save que te permite guardar las respuestas CDP en un archivo JSON.
  • Un nuevo campo que te permite enviar un comando CDP directamente.
Protocol monitor

Chromium issues: 1204004, 1204466

[Experimental] Grabadora de Puppeteer

Para activar este experimento, activa la casilla Recorder en Settings > Experiments.

La grabadora de Puppeteer ahora genera una lista de pasos basada en tu interacción con el navegador, donde antes DevTools generaba directamente un script de Puppeteer. Un nuevo botón Export ha sido añadido que te permite exportar los pasos como un script de Puppeteer.

Después de grabar los pasos, puedes usar el botón Replay para reproducir los pasos. Sigue las instrucciones para aprender cómo empezar a utilizar este nuevo modo de grabación.

Ten en cuenta que este experimento está en sus primeras etapas de desarrollo. Hay planes para mejorar y expandir esta funcionalidad de grabación con el tiempo.

Grabadora de Puppeteer

Chromium issue: 1199787

Descarga de los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo por defecto. Estos canales de prueba te dan acceso a las últimas funcionalidades de DevTools, probar innovadoras APIs de la plataforma web y encontrar errores en tus sitios antes que tus usuarios lo hagan.

Ponerse en contacto con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre nuevas funcionalidades y cambios en el artículo o cuaquier cosa relacionada con DevTools.

  • Envía una sugerencia u opinión a través de crbug.com.
  • Reporta un problema con DevTools usando Más opciones   Más   > Ayuda > Reportar un problema con DevTools in DevTools.
  • Haz un Tweet a @ChromeDevTools.
  • Deja un comentario en los vídeos de YouTube sobre Qué hay de nuevo en DevTools.

Más características de DevTools

Por favor, revisa la versión en inglés de What's New In DevTools para una lista completa de las características lanzadas. Debajo tienes más contenido que ha sido traducido al castellano.

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.