Novedades de Herramientas para desarrolladores (Chrome 92)

Editor de cuadrícula de CSS

Esta es una función muy solicitada. Ahora puedes obtener una vista previa y crear una cuadrícula de CSS con el nuevo editor de cuadrícula de CSS.

Cuando se aplican display: grid o display: inline-grid a un elemento HTML de tu página, puedes ver que aparece 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.

Problema de Chromium: 1203241

Compatibilidad con redeclaraciones de const en la consola

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

Esto permite a los desarrolladores copiar y pegar el 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, las Herramientas para desarrolladores mostraban un error de sintaxis si el código volvía a declarar una vinculación const.

Consulta el siguiente ejemplo. La redeclaración de const se admite en secuencias de comandos de REPL independientes (consulta la variable a). Ten en cuenta que las siguientes situaciones no son compatibles con su diseño:

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

Problema de Chromium: 1076427

Visualizador del orden de las fuentes

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

El orden del contenido de un documento HTML es importante para la optimización y accesibilidad de los motores de búsqueda. Las nuevas funciones de CSS permiten a los desarrolladores crear contenido que se ve muy diferente en el orden en pantalla que 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 respecto de los usuarios videntes.

Problema de Chromium: 1094406

Nueva combinación de teclas para ver los detalles del marco

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

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

Problema 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. Existen varios motivos que provocan errores de CORS. Haz clic para expandir cada problema y comprender sus posibles causas y soluciones.

Problema de Chromium: 1141824

Actualizaciones del panel de red

Cambiar el nombre de la etiqueta XHR a Fetch/XHR

El nombre de la etiqueta XHR ahora se llama Fetch/XHR. Este cambio deja en claro que este filtro incluye las solicitudes de red de XMLHttpRequest y de la API de Fetch.

Problema de Chromium: 1201398

Filtra el tipo de recurso de Wasm en el panel Red

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

Problema de Chromium: 1103638

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

Ahora se aplican User-Agent Client Hints a los dispositivos en el campo Usuario-agente, en la pestaña Condiciones de la red.

User-Agent Client Hints es una nueva expansión de la API de Client Hints que permite que los desarrolladores accedan a la información del navegador de un usuario de una forma ergonómica y que preserva la privacidad.

Problema de Chromium: 1174299

Informa problemas con el modo no estándar en la pestaña Problemas

Las Herramientas para desarrolladores ahora informan problemas sobre el modo no estándar y el modo de nociones específicas.

El modo no estándar y el modo no estándar son modos de navegación heredados de antes de que se crearan los estándares web. Estos modos emulan comportamientos de diseño anteriores a la época estándar que a menudo causan efectos visuales inesperados.

Cuando 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 verdadero problema es el Modo de compatibilidad en el que se encuentra la página. Las Herramientas para desarrolladores proporcionan sugerencias para solucionarlo.

Problema de Chromium: 622660

Cómo incluir intersecciones de cómputos en el panel Rendimiento

Las Herramientas para desarrolladores ahora muestran las intersecciones de cómputos en el gráfico tipo llama. Estos cambios te ayudan a identificar los eventos de los observadores de intersección y a depurar sus posibles sobrecargas de rendimiento.

Problema de Chromium: 1199137

Lighthouse 7.5 en el panel de Lighthouse

El panel de Lighthouse ahora ejecuta Lighthouse 7.5. "Falta el ancho y la altura explícitos" se quitó la advertencia de 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.

Problema de Chromium: 772558

La opción "Reiniciar fotograma" dejó de estar disponible menú contextual en la pila de llamadas

La opción Reiniciar marco dejó de estar disponible. Esta función requiere un mayor desarrollo para funcionar bien, ya que no funciona y, con frecuencia, falla.

Problema de Chromium: 1203606

[Experimental] Supervisor de protocolos

Las Herramientas para desarrolladores de Chrome usan el protocolo de Herramientas para desarrolladores de Chrome (CDP) para instrumentar, inspeccionar, depurar y generar perfiles de los navegadores Chrome. El monitor de protocolo te proporciona una manera de ver todas las solicitudes y respuestas de CDP que realizaron las Herramientas para desarrolladores.

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 de CDP sin procesar de forma directa

Problemas de Chromium: 1204004, 1204466

[Experimental] Grabadora de títeres

La grabadora de Puppeteer ahora genera una lista de pasos según tu interacción con el navegador. En su lugar, las Herramientas para desarrolladores generaban directamente una secuencia de comandos de Puppeteer. 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 estas instrucciones para comenzar a grabar.

Ten en cuenta que este es un experimento en su etapa inicial. Con el tiempo, planeamos mejorar y expandir la funcionalidad de la grabadora.

Problema de Chromium: 1199787

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 plataformas 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.
• Informa un problema en Herramientas para desarrolladores con Más opciones   > Ayuda > Informa 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.