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
consten secuencias de comandos de REPL - No se permite la redeclaración de
constdentro del mismo script de REPL (consulta la variableb).
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