Novedades de Herramientas para desarrolladores (Chrome 92)

Editor de cuadrícula de CSS

Una función muy solicitada. Ahora puedes obtener una vista previa de la cuadrícula de CSS y crearla con el nuevo editor de cuadrícula de CSS.

Editor de cuadrícula de CSS

Cuando se aplica display: grid o display: inline-grid a un elemento HTML de tu página, puedes ver un ícono junto a él en el panel Estilos. Haz clic en el ícono para activar o desactivar el editor de cuadrícula de CSS. Aquí puedes obtener una vista previa de los posibles cambios con los íconos en pantalla (p.ej., justify-content: space-around) y crear la apariencia de la cuadrícula con un solo clic.

Error de Chromium: 1203241

Compatibilidad con la redeclaración de const en Console

La consola ahora admite la nueva declaración de la sentencia const, además de las declaraciones nuevas de let y class existentes. La imposibilidad de volver a declarar era un problema común para los desarrolladores web que usan la consola para experimentar con un nuevo código JavaScript.

Esto permite a los desarrolladores copiar y pegar 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 actualizar la página. Anteriormente, DevTools arrojaba un error de sintaxis si el código volvía a declarar una vinculación const.

Consulta el siguiente ejemplo. La nueva declaración de const es compatible con secuencias de comandos de REPL separadas (consulta la variable a). Ten en cuenta que las siguientes situaciones no son compatibles de forma predeterminada:

  • No se permite la redeclaración de const de secuencias de comandos de página en secuencias de comandos de REPL.
  • No se permite la nueva declaración de const dentro de la misma secuencia de comandos de REPL (consulta la variable b).

Reasignaciones de const

Error de Chromium: 1076427

Visor del orden de la fuente

Ahora puedes ver el orden de los elementos de origen en la pantalla para realizar una mejor inspección de accesibilidad.

Visor del orden de la fuente

El orden del contenido en un documento HTML es importante para la optimización de motores de búsqueda y la accesibilidad. Las funciones más recientes de CSS permiten a los desarrolladores crear contenido que se ve muy diferente en el orden en pantalla que en el documento HTML. Este es un gran problema de accesibilidad, ya que los usuarios de lectores de pantalla tendrían una experiencia diferente y, probablemente, confusa en comparación con los usuarios videntes.

Error de Chromium: 1094406

Nuevo atajo para ver los detalles del marco

Para ver los detalles del iframe, haz clic con el botón derecho en el elemento iframe del panel Elementos y selecciona Show frame details.

Mostrar detalles del marco

Se te dirigirá a una vista de los detalles del iframe en el panel de la aplicación, en la que puedes examinar los detalles del documento, el estado de seguridad y aislamiento, la política de permisos y mucho más para depurar posibles problemas.

Vista de los detalles del marco

Error de Chromium: 1192084

Compatibilidad mejorada de depuración de CORS

Los errores de uso compartido de recursos entre dominios (CORS) ahora aparecen en la pestaña Problemas. Existen varios motivos por los que se producen errores de CORS. Haz clic para expandir cada problema y comprender las posibles causas y soluciones.

Problemas de CORS en la pestaña Problemas

Error de Chromium: 1141824

Actualizaciones del panel de redes

Cambia el nombre de la etiqueta XHR a Recuperación/XHR

Se cambió el nombre de la etiqueta XHR a Obtención/XHR. Este cambio deja más claro que este filtro incluye las solicitudes de red de XMLHttpRequest y de la API de Fetch.

Etiqueta de recuperación/XHR

Error de Chromium: 1201398

Cómo filtrar el tipo de recurso Wasm en el panel de red

Ahora puedes hacer clic en el nuevo botón Wasm para filtrar las solicitudes de red de Wasm.

Filtrar por Wasm

Error de Chromium: 1103638

Sugerencias de clientes de usuario-agente para dispositivos en la pestaña Condiciones de red

Las Client Hints de usuario-agente ahora se aplican a los dispositivos en el campo Usuario-agente de la pestaña Condiciones de red.

Las sugerencias de cliente del usuario-agente son una nueva expansión de la API de Client Hints que permite a los desarrolladores acceder a información sobre el navegador de un usuario de una manera ergonómica y que preserva la privacidad.

Sugerencias de clientes de usuario-agente para dispositivos en la pestaña Condiciones de red

Error de Chromium: 1174299

Informa problemas del modo Quirks en la pestaña Problemas

DevTools ahora informa problemas del modo de peculiaridades y del modo de peculiaridades limitadas.

Los modos Quirks y Quirks Limited son modos de navegador heredados anteriores a la creación de los estándares web. Estos modos emulan comportamientos de diseño anteriores a la era de los estándares que, a menudo, causan efectos visuales inesperados.

Cuando se depuran problemas de diseño, los desarrolladores pueden pensar que se deben a errores de CSS o HTML creados por el usuario, mientras que el problema real es el modo de compatibilidad en el que se encuentra la página. Las Herramientas para desarrolladores proporcionan sugerencias para solucionarlo.

Informa problemas del modo Quirks en la pestaña Problemas

Error de Chromium: 622660

Se incluye Calcular intersecciones en el panel Rendimiento

DevTools ahora muestra Compute Intersections en el gráfico de llama. Estos cambios te ayudan a identificar los eventos de observadores de intersección y depurar sus posibles sobrecargas de rendimiento.

Calcular intersecciones en el panel Rendimiento

Error de Chromium: 1199137

Lighthouse 7.5 en el panel de Lighthouse

El panel de Lighthouse ahora ejecuta Lighthouse 7.5. Se quitó la advertencia "Faltan el ancho y la altura explícitos" para las imágenes con aspect-ratio definido en CSS. Anteriormente, Lighthouse mostraba advertencias para las imágenes sin ancho ni altura definidos.

Consulta las notas de la versión para obtener una lista completa de los cambios.

Error de Chromium: 772558

Se dio de baja el menú contextual "Restart frame" en la pila de llamadas.

La opción Restart frame dejó de estar disponible. Esta función requiere más desarrollo para funcionar bien. Actualmente, está dañada y, a menudo, falla.

Menú contextual de Restart frame obsoleto

Problema de Chromium: 1203606

[Experimental] Monitor de protocolo

Chrome DevTools usa el Protocolo de herramientas para desarrolladores de Chrome (CDP) para instrumentar, inspeccionar, depurar y generar perfiles de navegadores Chrome. El Monitor de protocolos te brinda una forma de ver todas las solicitudes y respuestas de CDP que realiza DevTools.

Se agregaron dos funciones nuevas para facilitar las pruebas de CDP:

  • El nuevo botón Guardar te permite descargar los mensajes grabados como un archivo JSON.
  • Un campo nuevo que te permite enviar un comando CDP sin formato directamente

Monitor de protocolo

Problemas de Chromium: 1204004 y 1204466

[Experimental] Grabadora de Puppeteer

El registrador de Puppeteer ahora genera una lista de pasos según tu interacción con el navegador, mientras que antes DevTools generaba una secuencia de comandos de Puppeteer directamente. Se agregó un nuevo botón Exportar para permitirte exportar los pasos como una secuencia de comandos de Puppeteer.

Después de grabar los pasos, puedes usar el nuevo botón Volver a reproducir para volver a reproducirlos. Sigue las instrucciones que se indican aquí para comenzar a grabar.

Ten en cuenta que este es un experimento en etapa inicial. Planeamos mejorar y expandir la función de grabador con el tiempo.

Grabadora de Puppeteer

Error de Chromium: 1199787

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de versión preliminar te brindan acceso a las funciones más recientes de DevTools, te permiten probar las APIs de plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

Comunícate con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.

Novedades de DevTools

Una lista de todo lo que se analizó en la serie Novedades de DevTools.