Novedades de Herramientas para desarrolladores (Chrome 92)

Jecelyn Yeen

Editor de cuadrícula de CSS

Es 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.

Cuando se aplican los códigos display: grid o display: inline-grid a un elemento HTML de tu página, puedes ver un ícono junto a él en el panel Styles. Haz clic en el ícono para activar o desactivar el editor de cuadrícula 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.

Problema de Chromium: 1203241

Compatibilidad con las redeclaraciones de const en la consola

Ahora, la consola admite la redeclaración de la instrucción const, además de las redeclaraciones existentes de let y class. La imposibilidad de volver a declarar era una molestia común para los desarrolladores web que usan la consola para experimentar con código JavaScript nuevo.

Esto permite que los desarrolladores copien y peguen código en la consola de Herramientas para desarrolladores para ver cómo funciona o experimentar, realizar pequeños cambios en el código y repetir el proceso sin actualizar la página. Anteriormente, DevTools mostraba un error de sintaxis si el código redeclaraba una vinculación const.

Consulta el siguiente ejemplo. Se admite la redeclaración de const en secuencias de comandos REPL separadas (consulta la variable a). Ten en cuenta que los siguientes casos no se admiten por diseño:

• No se permite la redeclaración de secuencias de comandos de página const en secuencias de comandos de REPL
• No se permite la redeclaración de const dentro del mismo script de REPL (consulta la variable b).

Error de Chromium: 1076427

Visor del orden de la fuente

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

El orden del contenido en un documento HTML es importante para la optimización por motores de búsqueda y la accesibilidad. Las funciones de CSS más recientes permiten a los desarrolladores crear contenido que se ve muy diferente en el orden en pantalla de lo que se encuentra 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 acceso directo para ver los detalles del fotograma

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

Esto te lleva a una vista de los detalles del iframe en el panel Aplicación, donde 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.

Error de Chromium: 1192084

Compatibilidad mejorada con la depuración de CORS

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

Problema de Chromium: 1141824

Actualizaciones del panel de red

Cambia el nombre de la etiqueta XHR a Fetch/XHR

Ahora, la etiqueta XHR se llama Fetch/XHR. Este cambio deja más claro que este filtro incluye las solicitudes de red de XMLHttpRequest y de la API de Fetch.

Error de Chromium: 1201398

Filtra 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.

Error de Chromium: 1103638

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

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

Los User-Agent Client Hints 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.

Error de Chromium: 1174299

Cómo informar problemas del modo Quirks en la pestaña Problemas

Las Herramientas para desarrolladores ahora informan problemas del modo de Quirks y del modo de Quirks limitado.

El modo de Quirks y el modo de Quirks limitado son modos de navegador heredados de antes de que se crearan los estándares web. Estos modos emulan comportamientos de diseño previos a la era de los estándares que suelen causar efectos visuales inesperados.

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

Problema de Chromium: 622660

Se incluyó la función Compute Intersections en el panel Rendimiento

Las Herramientas para desarrolladores ahora muestran Compute Intersections en el gráfico de llamas. Estos cambios te ayudan a identificar los eventos de observadores de intersección y a depurar sus posibles sobrecargas de rendimiento.

Error de Chromium: 1199137

Lighthouse 7.5 en el panel de Lighthouse

El panel de Lighthouse ahora ejecuta la versión 7.5 de Lighthouse. Ahora se quita 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 y alto definidos.

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

Error de Chromium: 772558

Se quitó la opción "Reiniciar frame" del menú contextual en la pila de llamadas.

La opción Restart frame ya no está disponible. Esta función requiere más desarrollo para funcionar bien. Actualmente, no funciona y suele fallar.

Problema de Chromium: 1203606

[Experimental] Monitor de protocolo

Las Herramientas para desarrolladores de Chrome usan el Chrome DevTools Protocol (CDP) para instrumentar, inspeccionar, depurar y generar perfiles de los navegadores Chrome. El Monitor de protocolo te permite ver todas las solicitudes y respuestas del CDP que realiza Herramientas para desarrolladores.

Se agregaron dos funciones nuevas para facilitar las pruebas de la 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 de CDP sin formato directamente

Problemas de Chromium: 1204004, 1204466

[Experimental] Grabadora de Puppeteer

El grabador de Puppeteer ahora genera una lista de pasos según tu interacción con el navegador, mientras que, antes, DevTools generaba directamente una secuencia de comandos de Puppeteer. Se agregó un nuevo botón Exportar para que puedas 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 reproducirlos. Sigue las instrucciones que se indican aquí para comenzar a grabar.

Ten en cuenta que este es un experimento en etapa inicial. Tenemos previsto mejorar y ampliar la funcionalidad de Grabadora con el tiempo.

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 vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

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

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de Herramientas para desarrolladores con more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Envía un tuit a @ChromeDevTools.
• Deja comentarios en los videos de Novedades de las Herramientas para desarrolladores de YouTube o en los videos de Sugerencias sobre las Herramientas para desarrolladores de YouTube.

Novedades de Herramientas para desarrolladores

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