Jecelyn Yeen
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.
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 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 las redeclaraciones de const en Console
La consola ahora admite la redeclaración de la sentencia 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, las Herramientas para desarrolladores arrojaban 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 se admite en secuencias de comandos de REPL independientes (consulta la variable a). Ten en cuenta que, por diseño, no se admiten las siguientes situaciones:
constNo se permite volver a declarar las secuencias de comandos de la página en las secuencias de comandos de REPL- No se permite volver a declarar
constdentro de la misma secuencia de comandos de REPL (consulta la variableb)
Error de Chromium: 1076427
Visor del orden en el código fuente
Ahora puedes ver el orden de los elementos de origen en la pantalla para mejorar la inspección de accesibilidad.
El orden del contenido en un documento HTML es importante para la optimización para motores de búsqueda y la accesibilidad. Las funciones de CSS más recientes permiten que los desarrolladores creen contenido que se vea muy diferente en su orden en pantalla que en el documento HTML. Este es un gran problema de accesibilidad, ya que los usuarios de lectores de pantalla obtendrían una experiencia diferente y, probablemente, más confusa que la de los usuarios videntes.
Error de Chromium: 1094406
Nuevo acceso directo 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 podrás examinar los detalles del documento, el estado de seguridad y 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 de origen cruzado (CORS) ahora se muestran 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.
Error de Chromium: 1141824
Actualizaciones del panel de red
Cambiar el nombre de la etiqueta XHR a Fetch/XHR
Ahora, la etiqueta XHR se llama Fetch/XHR. Este cambio aclara 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 de 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
User-Agent Client Hints para dispositivos en la pestaña Condiciones de red
Ahora se aplican las User-Agent Client Hints a los dispositivos en el campo Usuario-agente de la pestaña Condiciones de red.
User-Agent Client Hints es 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 no estándar en la pestaña Problemas
Las Herramientas para desarrolladores ahora informan problemas relacionados con el modo no estándar y el modo no estándar limitado.
Los modos no estándar y no estándar limitado son modos de navegador heredados de antes de que se crearan los estándares web. Estos modos emulan comportamientos de diseño de la era anterior a los estándares 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 problema real es el modo de compatibilidad en el que se encuentra la página. Las Herramientas para desarrolladores proporcionan sugerencias para solucionarlo.
Error de Chromium: 622660
Incluye Calcular interacciones en el panel Rendimiento
Las Herramientas para desarrolladores ahora muestran las intersecciones de procesamiento en el gráfico tipo llama. Estos cambios te ayudan a identificar los eventos de observadores de intersección y depurar sus posibles sobrecargas de 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 "falta el ancho y el alto 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.
Problema de Chromium: 772558
Se dio de baja el menú contextual "Reiniciar marco" en la pila de llamadas
La opción Reiniciar marco ya no está disponible. Esta función requiere más desarrollo para funcionar bien, actualmente no funciona y suele fallar.
Error de Chromium: 1203606
[Experimental] Protocol monitor
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 Protocol monitor te permite ver todas las solicitudes y respuestas de CDP que realizan 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 directamente
Problemas de Chromium: 1204004 y 1204466
[Experimental] Grabadora de Puppeteer
La grabadora de Puppeteer ahora genera una lista de pasos según tu interacción con el navegador, mientras que, antes, las Herramientas para desarrolladores generaban una secuencia de comandos de Puppeteer directamente. Se agregó un nuevo botón Export 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 Replay para volver a reproducirlos. Sigue las instrucciones que se indican aquí para aprender a comenzar a grabar.
Ten en cuenta que este es un experimento que se encuentra en su etapa inicial. Planeamos mejorar y expandir la funcionalidad de la Grabadora con el tiempo.
Error de Chromium: 1199787
Descarga los canales de versión preliminar
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 las Herramientas para desarrolladores, te permiten probar las APIs de vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes que los usuarios.
Comunícate con el equipo de Herramientas para desarrolladores de Chrome
Usa las siguientes opciones para analizar las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con las Herramientas para desarrolladores.
- Envíanos comentarios y solicitudes de funciones a crbug.com.
- Informa un problema de las Herramientas para desarrolladores con Más opciones > Ayuda > Informar un problema de las Herramientas para desarrolladores en las Herramientas para desarrolladores.
- Envía un tweet a @ChromeDevTools.
- Deja comentarios en los videos de YouTube de Novedades de las Herramientas para desarrolladores o en los videos de YouTube de Sugerencias para las Herramientas para desarrolladores.
Novedades de las Herramientas para desarrolladores
Una lista de todo lo que se trató en la serie Novedades de las Herramientas para desarrolladores.
- Actualizaciones del servidor de MCP de Herramientas para desarrolladores
- Uso compartido de registros mejorado
- Compatibilidad con @starting-style
- Widget del editor para la visualización: mampostería
- Lighthouse 13
- Sugerencias de código de Gemini
- Mejoras para el servidor de MCP de las Herramientas para desarrolladores
- Acceso más rápido a la asistencia de IA
- Depura el registro de rendimiento completo con Gemini
- Activar o desactivar la orientación del panel lateral
- Google Developer Program
- Aspectos destacados varios
- Herramientas para desarrolladores de Chrome (MCP) para tu agente de IA
- Depura el árbol de dependencias de red con Gemini
- Cómo exportar tus chats con Gemini
- Configuración de pistas persistentes en el panel Rendimiento
- Filtra las solicitudes de red protegidas por IP
- La pestaña Elementos > Diseño agrega compatibilidad con el diseño de mampostería
- Lighthouse 12.8.2
- Aspectos destacados varios
- Depura más estadísticas con Gemini
- Emula el encabezado "Save-Data" en "Condiciones de red"
- Consulta el estado de Baseline en un cuadro de información sobre la propiedad de CSS
- Anula los factores de forma en las sugerencias de clientes de usuario-agente
- Lighthouse 12.8.0
- Aspectos destacados varios
- Herramientas para desarrolladores de Chrome más confiables y productivas
- Sube imágenes en la asistencia de IA para aplicar diseño
- Agrega encabezados de solicitud a la tabla en Red
- Consulta los aspectos destacados de Google I/O 2025
- Aspectos destacados varios
- Mejoras en el panel Rendimiento
- Orígenes conectados previamente en la estadística "Árbol de dependencias de red"
- Tiempos de respuesta y redireccionamiento del servidor en la estadística "Latencia de la solicitud de documentos"
- Redireccionamientos en el resumen de solicitudes de red
- Reducción del ruido en el registro de rendimiento
- Se dio de baja la opción "Inhabilitar muestras de JavaScript"
- Parámetro de precisión de la ubicación geográfica en Sensores
- Mejoras en el panel Elementos
- Depura valores de CSS complejos con mayor facilidad
- Compatibilidad con @function en Elementos > Estilos
- Mejoras en el panel de red
- Filtro has-request-header
- Sockets directos en apps web aisladas
- Aspectos destacados varios
- Accesibilidad
- Edición de Google I/O 2025
- Modifica y guarda los cambios de CSS en tu espacio de trabajo con Gemini
- Cómo conectar una carpeta del espacio de trabajo y guardar los cambios en tus archivos fuente
- Pregúntale a Gemini sobre las estadísticas de rendimiento
- Anota los hallazgos de rendimiento con Gemini
- Cómo agregar capturas de pantalla a tus chats con Gemini
- Nuevas estadísticas en el panel Rendimiento
- JavaScript duplicado
- JavaScript heredado
- Las especulaciones ahora admiten etiquetas de reglas
- Lighthouse 12.6.0
- Aspectos destacados varios
- Accesibilidad
- Mejoras en el panel Rendimiento
- Nuevas estadísticas de rendimiento
- Haz clic para destacar
- Tiempos del servidor en el resumen de solicitudes de red
- Cómo filtrar cookies en "Privacidad y seguridad"
- Tamaños en unidades de kB en tablas de todos los paneles
- La función Autocompletar admite corner-shape y corner-*-shape en Elementos > Estilos
- Experimental: Destaca problemas con elementos y atributos en el DOM
- Lighthouse 12.5.0
- Aspectos destacados varios
- Mejoras en el panel Rendimiento
- Vínculos de origen y de secuencia de comandos para llamadas a funciones y perfiles en Rendimiento
- Compatibilidad con los datos de campo de LCP por fase
- Estadística del árbol de dependencias de red
- Duración en lugar de tiempo total y propio en Resumen
- Destacado de la pila más pesada
- Mejoras en los estados vacíos de varios paneles
- Vista de árbol de accesibilidad en Elementos
- Lighthouse 12.4.0
- Aspectos destacados varios
- Panel de privacidad y seguridad
- Mejoras en el panel Rendimiento
- Ajustes predeterminados calibrados de limitación de la CPU
- Cómo seleccionar diferentes eventos de rendimiento en el mismo chat con la IA
- Destacado de recursos propios y de terceros en Rendimiento
- Datos de campo en las estadísticas y las descripciones emergentes de los marcadores
- Estadística de reprocesamiento forzado
- Estadística "Optimiza el tamaño del DOM"
- Extiende el seguimiento del rendimiento con console.timeStamp
- Mejoras en el panel Elementos
- Valores en tiempo real de los estilos animados
- Compatibilidad con la pseudoclase :open y varios pseudoelementos
- Cómo copiar todos los mensajes de la consola
- Unidades de bytes en el panel Memoria
- Aspectos destacados varios
- Historial persistente de chats con la IA
- Mejoras en el panel Rendimiento
- Estadística de publicación de imágenes
- Navegación con teclado clásica y moderna
- Ignora las secuencias de comandos irrelevantes en el gráfico tipo llama
- Marcador de línea de tiempo y destacado de rango al colocar el cursor sobre un elemento
- Configuración recomendada para la limitación
- Marcadores de tiempo en una superposición
- Seguimientos de pila de llamadas de JS en Summary
- La configuración de insignias se movió al menú de Elementos
- Nuevo panel "Novedades"
- Lighthouse 12.3.0
- Aspectos destacados varios
- Depura solicitudes de red, archivos de origen y seguimientos de rendimiento con Gemini
- Cómo ver el historial de chat con la IA
- Administra el almacenamiento de la extensión en Aplicación > Almacenamiento
- Mejoras de rendimiento
- Fases de interacción en las métricas en tiempo real
- Información sobre el bloqueo de renderización en la pestaña Resumen
- Compatibilidad con los eventos scheduler.postTask y sus flechas de iniciador
- Mejoras en el panel Animaciones y en la pestaña Elementos > Estilos
- Ir de Elementos > Estilos a Animaciones
- Actualizaciones en tiempo real en la pestaña Computed
- Emulación de la presión de procesamiento en Sensores
- Objetos JS con el mismo nombre agrupados por fuente en el panel Memoria
- Un nuevo aspecto para la configuración
- El panel Estadísticas de rendimiento dejó de estar disponible y se quitó de las Herramientas para desarrolladores
- Aspectos destacados varios
- Depura CSS con Gemini
- Controla las funciones potenciadas por IA en una pestaña de configuración dedicada
- Mejoras en el panel Rendimiento
- Cómo anotar y compartir los hallazgos de rendimiento
- Obtén estadísticas de rendimiento directamente en el panel Rendimiento
- Detecta cambios de diseño excesivos con mayor facilidad
- Cómo detectar las animaciones no compuestas
- La simultaneidad del hardware se traslada a Sensores
- Ignora las secuencias de comandos anónimas y enfócate en tu código en los seguimientos de pila
- Elementos > Estilos: Compatibilidad con los modos de escritura sideways-* para las superposiciones de cuadrícula y las palabras clave de CSS
- Auditorías de Lighthouse para páginas que no son HTTP en los modos de período y resumen
- Mejoras de accesibilidad
- Aspectos destacados varios
- Mejoras en el panel de red
- Rediseño de los filtros de red
- Las exportaciones de HAR ahora excluyen los datos sensibles de forma predeterminada
- Mejoras en el panel Elementos
- Valores de autocompletar para las propiedades text-emphasis-*
- Desbordamientos de desplazamiento marcados con una insignia
- Mejoras en el panel Rendimiento
- Recomendaciones en métricas en tiempo real
- Cómo navegar por las rutas de navegación
- Mejoras en el panel Memoria
- Nuevo perfil de "Elementos desconectados"
- Mejoras en los nombres de los objetos de JS sin formato
- Cómo desactivar los temas dinámicos
- Experimento de Chrome: Uso compartido de procesos
- Lighthouse 12.2.1
- Aspectos destacados varios
- La Grabadora ahora admite la exportación a Puppeteer para Firefox
- Mejoras en el panel Rendimiento
- Observaciones de métricas en tiempo real
- Cómo buscar solicitudes en el segmento de red
- Consulta los seguimientos de pila de las llamadas a performance.mark y performance.measure
- Cómo usar datos de direcciones de prueba en el panel de Autocompletar
- Mejoras en el panel Elementos
- Cómo forzar más estados para elementos específicos
- Elementos > Estilos ahora autocompleta más propiedades de cuadrícula
- Lighthouse 12.2.0
- Aspectos destacados varios
- Las estadísticas de la consola de Gemini se lanzarán en la mayoría de los países europeos
- Actualizaciones del panel de rendimiento
- Seguimiento de red mejorado
- Personaliza los datos de rendimiento con la API de extensibilidad
- Detalles en la pista de tiempos
- Cómo copiar todas las solicitudes incluidas en el panel de red
- Instantáneas del montón más rápidas con etiquetas HTML con nombre y menos desorden
- Abre el panel Animaciones para capturar animaciones y editar @keyframes en vivo
- Lighthouse 12.1.0
- Mejoras de accesibilidad
- Aspectos destacados varios
- Inspecciona el posicionamiento de anclaje de CSS en el panel Elementos
- Mejoras en el panel Fuentes
- Mejora de la función "No detenerse aquí"
- Nuevos objetos de escucha de eventos de ajuste de desplazamiento
- Mejoras en el panel de red
- Se actualizaron los ajustes predeterminados de limitación de la red
- Información del service worker en campos personalizados del formato HAR
- Envía y recibe eventos de WebSocket en el panel Rendimiento
- Aspectos destacados varios
- Mejoras en el panel Rendimiento
- Mueve y oculta segmentos con el modo de configuración de segmentos actualizado
- Ignora las secuencias de comandos en el gráfico tipo llama
- Reduce el uso de CPU 20 veces.
- El panel Estadísticas de rendimiento dejará de estar disponible
- Encuentra el uso excesivo de memoria con los nuevos filtros en las instantáneas del montón
- Inspecciona los buckets de almacenamiento en Application > Storage
- Inhabilita las advertencias de self-XSS con una función experimental de línea de comandos
- Lighthouse 12.0.0
- Aspectos destacados varios
- Comprende mejor los errores y las advertencias en la consola con Gemini
- Compatibilidad con reglas @position-try en Elementos > Estilos
- Mejoras en el panel Fuentes
- Configura la impresión con formato estilístico y el cierre de corchetes automáticos
- Las promesas rechazadas controladas se reconocen como detectadas
- Causas de errores en Console
- Mejoras en el panel de red
- Inspecciona los encabezados de sugerencias iniciales
- Oculta la columna Cascada
- Mejoras en el panel Rendimiento
- Captura las estadísticas del selector CSS
- Cómo cambiar el orden y ocultar pistas
- Ignora los retenedores en el panel Memoria
- Lighthouse 11.7.1
- Aspectos destacados varios
- Nuevo panel de Autocompletar
- Limitación de la red mejorada para WebRTC
- Compatibilidad con animaciones basadas en el desplazamiento en el panel Animaciones
- Soporte mejorado para el anidamiento de CSS en Elementos > Estilos
- Panel de rendimiento mejorado
- Cómo ocultar funciones y sus elementos secundarios en el gráfico tipo llama
- Flechas desde los iniciadores seleccionados hasta los eventos que iniciaron
- Lighthouse 11.6.0
- Información sobre la herramienta para categorías especiales en Memory > Instantáneas del montón
- Aplicación > Actualizaciones de almacenamiento
- Bytes usados para el almacenamiento compartido
- Web SQL dejó de estar disponible por completo
- Mejoras en el panel Cobertura
- Es posible que el panel Capas deje de estar disponible
- Baja del Generador de perfiles de JavaScript: Fase cuatro, final
- Aspectos destacados varios
- Encuentra el huevo de Pascua
- Actualizaciones del panel Elementos
- Emula una página enfocada en Elementos > Estilos
- Resguardos del selector de color, el reloj de ángulo y el editor de aceleración en
var() - La herramienta de longitud de CSS ya no está disponible
- Ventana emergente para el resultado de la búsqueda seleccionado en Rendimiento > Pista principal
- Actualizaciones del panel de redes
- Botón para borrar y filtro de búsqueda en la pestaña Red > EventStream
- Información sobre los motivos de exención de las cookies de terceros en Red > Cookies
- Habilita e inhabilita todos los puntos de interrupción en Fuentes
- Visualiza las secuencias de comandos cargadas en las Herramientas para desarrolladores de Node.js
- Lighthouse 11.5.0
- Mejoras de accesibilidad
- Aspectos destacados varios
- Ya está disponible la colección oficial de extensiones de la Grabadora
- Mejoras de red
- Motivo del error en la columna Estado
- Submenú Improved Copy
- Mejoras de rendimiento
- Rutas de navegación en la línea de tiempo
- Iniciadores de eventos en la pista principal
- Menú del selector de instancias de VM de JavaScript para las Herramientas para desarrolladores de Node.js
- Nuevo acceso directo y comando en Fuentes
- Mejoras en los elementos
- El pseudoelemento ::view-transition ahora se puede editar en Estilos
- Compatibilidad de la propiedad align-content con contenedores de bloques
- Compatibilidad con posturas para dispositivos plegables emulados
- Temas dinámicos
- Advertencias sobre la eliminación gradual de las cookies de terceros en los paneles Red y Aplicación
- Lighthouse 11.4.0
- Mejoras de accesibilidad
- Aspectos destacados varios
- Mejoras en los elementos
- Barra de filtros optimizada en el panel de redes
- Asistencia de
@font-palette-values - Caso admitido: Propiedad personalizada como resguardo de otra propiedad personalizada
- Compatibilidad mejorada con mapas de origen
- Mejoras en el panel Rendimiento
- Seguimiento de interacciones mejoradas
- Filtrado avanzado en las pestañas Bottom-Up, Call Tree y registro de eventos
- Marcadores de sangría en el panel Fuentes
- Información sobre herramientas útil para encabezados y contenido anulados en el panel de redes
- Nuevas opciones del menú de comandos para agregar y quitar patrones de bloqueo de solicitudes
- Se quitó el experimento de incumplimientos de la CSP
- Lighthouse 11.3.0
- Mejoras de accesibilidad
- Aspectos destacados varios
- Eliminación gradual de las cookies de terceros
- Analiza las cookies de tu sitio web con Privacy Sandbox Analysis Tool
- Lista de elementos ignorados mejorada
- Patrón de exclusión predeterminado para node_modules
- Las excepciones detectadas ahora detienen la ejecución si se detectan o pasan por código no ignorado
- Se cambió el nombre de
x_google_ignoreListporignoreListen los mapas de origen - Nuevo botón de activación del modo de entrada durante la depuración remota
- El panel Elementos ahora muestra las URLs de los nodos #document
- Política de seguridad del contenido vigente en el panel Aplicación
- Depuración de animaciones mejorada
- Cuadro de diálogo '¿Este código es de confianza?' en Fuentes y advertencia de self-XSS en la Consola
- Puntos de interrupción de objetos de escucha de eventos en Web Workers y Worklets
- La nueva insignia de medios para
<audio>y<video> - Se cambió el nombre de la carga previa a carga especulativa
- Lighthouse 11.2.0
- Mejoras de accesibilidad
- Aspectos destacados varios
- Se mejoró la sección @property en Elementos > Estilos
- Regla @property editable
- Se informan los problemas con las reglas @property no válidas
- Lista actualizada de dispositivos para emular
- Impresión con formato estilístico de JSON intercalado en etiquetas de secuencia de comandos en Fuentes
- Autocompleta campos privados en Console
- Lighthouse 11.1.0
- Mejoras de accesibilidad
- Baja de Web SQL
- Validación de la relación de aspecto de las capturas de pantalla en Application > Manifest
- Aspectos destacados varios
- Nueva sección para propiedades personalizadas en Elementos > Estilos
- Más mejoras en las anulaciones locales
- Búsqueda mejorada
- Panel Fuentes mejorado
- Espacio de trabajo optimizado en el panel Fuentes
- Cómo reordenar los paneles en Fuentes
- Destacado de sintaxis y formato estilístico para más tipos de secuencias de comandos
- Emula la función de medios prefers-reduced-transparency
- Lighthouse 11
- Mejoras de accesibilidad
- Aspectos destacados varios
- Mejoras en el panel de red
- Anula el contenido web de forma local aún más rápido
- Anula el contenido de las solicitudes de XHR y de recuperación
- Oculta las solicitudes de extensiones de Chrome
- Códigos de estado HTTP legibles por humanos
Rendimiento: Consulta los cambios en la prioridad de recuperación de los eventos de red
- Configuración de fuentes habilitada de forma predeterminada: plegado de código y revelación automática de archivos
- Depuración mejorada de problemas de cookies de terceros
- Colores nuevos
- Lighthouse 10.4.0
- Depura la carga previa en el panel Aplicación
- La extensión de depuración de WebAssembly de C/C++ para las Herramientas para desarrolladores ahora es de código abierto
- Aspectos destacados varios
- Nueva emulación de renderización (experimental): prefers-reduced-transparency
- Monitor de protocolo mejorado (experimental)
- Mejoras en la depuración de hojas de estilo faltantes
- Compatibilidad con el tiempo lineal en Elementos > Estilos > Editor de aceleración
- Compatibilidad con buckets de almacenamiento y vista de metadatos
- Lighthouse 10.3.0
- Accesibilidad: Comandos de teclado y lectura de pantalla mejorada
- Aspectos destacados varios
- Mejoras en los elementos
- Nueva insignia de subcuadrícula de CSS
- Especificidad del selector en los cuadros de información
- Valores de las propiedades de CSS personalizadas en los cuadros de información
- Mejoras en Fuentes
- Resaltado de sintaxis de CSS
- Combinación de teclas para establecer puntos de interrupción condicionales
- Application > Bounce Tracking Mitigations
- Lighthouse 10.2.0
- Ignora las secuencias de comandos de contenido de forma predeterminada
- Red > Mejoras en las respuestas
- Aspectos destacados varios
- Compatibilidad con la depuración de WebAssembly
- Se mejoró el comportamiento de los pasos en las apps de Wasm
- Cómo depurar la función Autocompletar con el panel Elementos y la pestaña Problemas
- Aserciones en la Grabadora
- Lighthouse 10.1.1
- Mejoras de rendimiento
- performance.mark() muestra el tiempo cuando se coloca el cursor sobre Rendimiento > Tiempos
- El comando profile() propaga Performance > Main
- Advertencia sobre interacciones lentas de los usuarios
- Actualizaciones de Web Vitals
- Baja del Generador de perfiles de JavaScript: Fase tres
- Aspectos destacados varios
- Anula los encabezados de respuesta de red
- Mejoras en la depuración de Nuxt, Vite y Rollup
- Mejoras de CSS en Elementos > Estilos
- Propiedades y valores de CSS no válidos
- Vínculos a fotogramas clave en la propiedad abreviada de animación
- Nuevo parámetro de configuración de la consola: Autocompletar al presionar Intro
- El menú de comandos destaca los archivos creados
- Baja del Generador de perfiles de JavaScript: Segunda etapa
- Aspectos destacados varios
- Actualizaciones de la Grabadora
- Extensiones de reproducción de la grabadora
- Cómo grabar con selectores de perforación
- Exporta grabaciones como secuencias de comandos de Puppeteer con análisis de Lighthouse
- Obtén extensiones para la Grabadora
- Actualizaciones de Elementos > Estilos
- Documentación de CSS en el panel Estilos
- Compatibilidad con el anidamiento de CSS
- Cómo marcar puntos de registro y puntos de interrupción condicionales en la consola
- Ignora las secuencias de comandos irrelevantes durante la depuración
- Comenzó la baja del Generador de perfiles de JavaScript
- Emular el contraste reducido
- Lighthouse 10
- Aspectos destacados varios
- Cómo depurar el color en HD con el panel Estilos
- UX de puntos de interrupción mejorada
- Accesos directos personalizables de la Grabadora
- Better syntax highlight for Angular
- Reorganiza las cachés en el panel Aplicación
- Aspectos destacados varios
- Borra el panel Rendimiento cuando se vuelve a cargar la página
- Actualizaciones de la Grabadora
- Visualiza y destaca el código de tu flujo de usuarios en la Grabadora
- Personaliza los tipos de selectores de una grabación
- Cómo editar el flujo de usuarios durante la grabación
- Impresión con formato estilístico automática en el lugar
- Mejoras en el resaltado de sintaxis y la vista previa intercalada para Vue, SCSS y mucho más
- Autocompletado ergonómico y coherente en la consola
- Aspectos destacados varios
- Grabadora: Opciones de copia para los pasos, reproducción en la página y menú contextual de los pasos
- Muestra los nombres reales de las funciones en las grabaciones de rendimiento
- Nuevas combinaciones de teclas en los paneles Console y Sources
- Depuración de JavaScript mejorada
- Aspectos destacados varios
- [Experimental] UX mejorada para administrar puntos de interrupción
- [Experimental] Impresión con formato estilístico automática en el lugar
- Sugerencias para propiedades de CSS inactivas
- Detección automática de selectores de texto y XPath en el panel Grabadora
- Recorre expresiones separadas por comas
- Se mejoró el parámetro de configuración de la lista de elementos ignorados
- Aspectos destacados varios
- Cómo personalizar las combinaciones de teclas en las Herramientas para desarrolladores
- Cómo alternar entre los temas claro y oscuro con una combinación de teclas
- Destaca objetos de C/C++ en el Inspector de memoria
- Compatibilidad con la información completa del iniciador para la importación de HAR
- Iniciar la búsqueda en el DOM después de presionar
Enter - Muestra los íconos
startyendpara las propiedades de flexbox de CSSalign-content - Aspectos destacados varios
- Agrupa archivos por creados o implementados en el panel Fuentes
- Seguimientos de pila vinculados para operaciones asíncronas
- Ignora automáticamente las secuencias de comandos de terceros conocidas
- Pila de llamadas mejorada durante la depuración
- Oculta las fuentes de la lista de elementos ignorados en el panel Fuentes
- Cómo ocultar los archivos de la lista de elementos ignorados en el menú de comandos
- Nuevo segmento de interacciones en el panel Rendimiento
- Desglose de los tiempos de LCP en el panel Estadísticas de rendimiento
- Genera automáticamente un nombre predeterminado para las grabaciones en el panel Grabadora
- Aspectos destacados varios
- Reproducción paso a paso en la Grabadora
- Compatibilidad con el evento de colocar el cursor sobre un elemento en el panel Grabadora
- Largest Contentful Paint (LCP) en el panel Estadísticas de rendimiento
- Identifica los destellos de texto (FOIT, FOUT) como posibles causas raíz de los cambios de diseño
- Controladores de protocolos en el panel Manifiesto
- Insignia de capa superior en el panel Elementos
- Adjunta información de depuración de Wasm en el entorno de ejecución
- Compatibilidad con Ediciones en vivo durante la depuración
- Visualiza y edita las reglas @scope en el panel Estilos
- Mejoras en los mapas de orígenes
- Aspectos destacados varios
- Reinicia el marco durante la depuración
- Opciones de reproducción lenta en el panel de Grabadora
- Cómo compilar una extensión para el panel Grabadora
- Agrupa archivos por creados o implementados en el panel Fuentes
- Los tiempos de usuario nuevo se registran en el panel de estadísticas de rendimiento
- Cómo revelar el espacio asignado de un elemento
- Simula la simultaneidad de hardware para las grabaciones de rendimiento
- Obtén una vista previa del valor que no es de color cuando se completen automáticamente las variables de CSS
- Cómo identificar los marcos de bloqueo en el panel Memoria caché atrás/adelante
- Sugerencias de autocompletado mejoradas para objetos de JavaScript
- Mejoras en los mapas de origen
- Aspectos destacados varios
- Captura eventos de doble clic y clic con el botón derecho en el panel Grabadora
- Nuevos modos de período y resumen en el panel de Lighthouse
- Control de zoom mejorado en el panel Estadísticas de rendimiento
- Cómo confirmar la eliminación de una grabación de rendimiento
- Cómo reordenar los paneles en el panel Elementos
- Cómo elegir un color fuera del navegador
- Mejoras en la vista previa de valores intercalados durante la depuración
- Compatibilidad con BLOBs grandes para autenticadores virtuales
- Nuevas combinaciones de teclas en el panel Fuentes
- Mejoras en los mapas de origen
- Función de versión preliminar: Nuevo panel de estadísticas de rendimiento
- Nuevos accesos directos para emular temas claros y oscuros
- Mejoras de seguridad en la pestaña Vista previa de red
- Mejoras en la recarga en el punto de interrupción
- Actualizaciones de Console
- Cómo cancelar la grabación del flujo de usuarios al inicio
- Muestra los pseudoelementos de resaltado heredados en el panel Estilos
- Aspectos destacados varios
- [Experimental] Copia los cambios de CSS
- [Experimental] Selección de color fuera del navegador
- Importa y exporta flujos de usuarios grabados como un archivo JSON
- Visualiza las capas en cascada en el panel Estilos
- Compatibilidad con la función de color
hwb() - Se mejoró la visualización de las propiedades privadas.
- Aspectos destacados varios
- [Experimental] Nuevos modos de período y resumen en el panel de Lighthouse
- Cómo ver y editar reglas @supports en el panel Estilos
- Admite selectores comunes de forma predeterminada
- Cómo personalizar el selector de la grabación
- Cómo cambiar el nombre de una grabación
- Obtén una vista previa de las propiedades de clase o función cuando coloques el cursor sobre ellas
- Fotogramas presentados parcialmente en el panel Rendimiento
- Aspectos destacados varios
- Regula las solicitudes de WebSocket
- Nuevo panel de la API de Reporting en el panel Aplicación
- Compatibilidad con la espera hasta que el elemento sea visible o se pueda hacer clic en él en el panel de la Grabadora
- Mejoras en el estilo, el formato y el filtrado de la consola
- Depura la extensión de Chrome con archivos de mapa de origen
- Mejoras en el árbol de carpetas de fuentes en el panel Fuentes
- Cómo mostrar los archivos de origen de los trabajadores en el panel Fuentes
- Actualizaciones del Tema oscuro automático de Chrome
- Selector de color táctil y panel dividido
- Aspectos destacados varios
- Función de versión preliminar: Árbol de accesibilidad de página completa
- Cambios más precisos en la pestaña Cambios
- Establece un tiempo de espera más largo para la grabación del flujo de usuarios
- Asegúrate de que tus páginas se puedan almacenar en caché con la pestaña Memoria caché atrás/adelante
- Nuevo filtro del panel Properties
- Emula la función multimedia de CSS forced-colors
- Comando Mostrar reglas al colocar el cursor encima
- Compatibilidad con
row-reverseycolumn-reverseen el editor de Flexbox - Nuevas combinaciones de teclas para volver a reproducir XHR y expandir todos los resultados de la búsqueda
- Lighthouse 9 en el panel de Lighthouse
- Panel Fuentes mejorado
- Aspectos destacados varios
- [Experimental] Extremos en el panel de la API de Reporting
- Función de versión preliminar: Nuevo panel de Grabadora
- Actualiza la lista de dispositivos en el modo de dispositivo
- Autocompletar con Editar como HTML
- Experiencia mejorada de depuración de código
- Sincroniza la configuración de las Herramientas para desarrolladores en todos los dispositivos
- Función de versión preliminar: Nuevo panel Resumen de CSS
- Se restableció y mejoró la experiencia de edición y copia de la longitud de CSS
- Emula la función de medios prefers-contrast de CSS
- Cómo emular la función Tema oscuro automático de Chrome
- Cómo copiar declaraciones como JavaScript en el panel Estilos
- Nueva pestaña Payload en el panel de redes
- Se mejoró la visualización de las propiedades en el panel Properties.
- Opción para ocultar errores de CORS en la consola
- Vista previa y evaluación de objetos
Intladecuados en la consola - Seguimientos de pila asíncronos coherentes
- Conserva la barra lateral de Console
- Se dio de baja el panel Caché de la aplicación en el panel Aplicación
- [Experimental] Nuevo panel de la API de Reporting en el panel Aplicación
- Nuevas herramientas de creación de longitud de CSS
- Cómo ocultar problemas en la pestaña Problemas
- Se mejoró la visualización de las propiedades.
- Lighthouse 8.4 en el panel de Lighthouse
- Cómo ordenar los fragmentos en el panel Fuentes
- Nuevos vínculos a las notas de la versión traducidas y para informar un error de traducción
- IU mejorada para el menú de comandos de las Herramientas para desarrolladores
- Usa las Herramientas para desarrolladores en tu idioma preferido
- Nuevos dispositivos Nest Hub en la lista de dispositivos
- Pruebas de origen en la vista de detalles del marco
- Nueva insignia de consultas de contenedores de CSS
- Nueva casilla de verificación para invertir los filtros de red
- Próxima baja de la barra lateral de Console
- Mostrar encabezados
Set-Cookiessin procesar en la pestaña Problemas y el panel de redes - Muestra de forma coherente los descriptores de acceso nativos como propiedades propias en la consola
- Seguimientos de pila de errores adecuados para secuencias de comandos intercaladas con #sourceURL
- Cómo cambiar el formato de color en el panel Computed
- Reemplaza los cuadros de información personalizados por cuadros de información nativos de HTML
- [Experimental] Oculta problemas en la pestaña Problemas
- Consultas de contenedores de CSS editables en el panel Estilos
- Vista previa del paquete web en el panel Red
- Depuración de la API de Attribution Reporting
- Mejor manejo de cadenas en Console
- Depuración mejorada de CORS
- Lighthouse 8.1
- URL de la nota nueva en el panel Manifest
- Se corrigieron los selectores de coincidencia de CSS
- Impresión con formato estilístico de respuestas JSON en el panel de red
- Editor de cuadrícula de CSS
- Compatibilidad con las declaraciones repetidas de
consten Console - Visor del orden en el código fuente
- Nuevo acceso directo para ver los detalles de los marcos
- Compatibilidad mejorada con la depuración de CORS
- Cambiar el nombre de la etiqueta XHR a Fetch/XHR
- Filtra el tipo de recurso de Wasm en el panel de redes
- User-Agent Client Hints para dispositivos en la pestaña Network conditions
- Informa problemas del modo no estándar en la pestaña Problemas
- Incluye Compute Intersections en el panel Rendimiento
- Lighthouse 7.5 en el panel de Lighthouse
- Se dio de baja el menú contextual "Reiniciar marco" en la pila de llamadas
- [Experimental] Protocol monitor
- [Experimental] Grabadora de Puppeteer
- Ventana emergente de información de Web Vitals
- Nuevo inspector de memoria
- Visualiza el ajuste de desplazamiento de CSS
- Nuevo panel de configuración de insignias
- Vista previa de imagen mejorada con información de la relación de aspecto
- Nuevo botón de condiciones de red con opciones para configurar
Content-Encodings - combinación de teclas para ver el valor calculado
- Palabra clave
accent-color - Categoriza los tipos de problemas con colores e íconos
- Cómo borrar tokens de confianza
- Funciones bloqueadas en la vista de detalles del marco
- Cómo filtrar experimentos en el parámetro de configuración Experimentos
- Nueva columna
Vary Headeren el panel Almacenamiento en caché - Se agregó compatibilidad con la verificación de marca privada de JavaScript.
- Asistencia mejorada para la depuración de puntos de interrupción
- Compatibilidad con la vista previa de desplazamiento con la notación
[] - Esquema mejorado de los archivos HTML
- Seguimientos de pila de errores adecuados para la depuración de Wasm
- Nuevas herramientas de depuración de flexbox de CSS
- Nueva superposición de Core Web Vitals
- Se movió el recuento de problemas a la barra de estado de Console.
- Informa problemas relacionados con las actividades web de confianza
- Cómo dar formato a las cadenas como literales de cadena de JavaScript (válidos) en la consola
- Nuevo panel de tokens de confianza en el panel Aplicación
- Emula la función de medios color-gamut de CSS
- Herramientas mejoradas para apps web progresivas
- Nueva columna
Remote Address Spaceen el panel de redes - Mejoras de rendimiento
- Muestra las funciones permitidas o no permitidas en la vista de detalles del marco
- Nueva columna
SamePartyen el panel Cookies - Se dio de baja la compatibilidad con
fn.displayNameno estándar - Baja de
Don't show Chrome Data Saver warningen el menú Configuración - [Experimental] Informes automáticos de problemas de contraste bajo en la pestaña Problemas
- [Experimental] Vista de árbol de accesibilidad completa en el panel Elementos
- Compatibilidad con la depuración de incumplimientos de Trusted Types
- Tomar una captura de pantalla del nodo más allá del viewport
- Nueva pestaña de tokens de confianza para solicitudes de red
- Lighthouse 7 en el panel de Lighthouse
- Compatibilidad para forzar el estado
:targetde CSS - Nuevo acceso directo para duplicar un elemento
- Selectores de color para propiedades de CSS personalizadas
- Nuevos accesos directos para copiar propiedades de CSS
- Nueva opción para mostrar cookies decodificadas de URL
- Cómo borrar solo las cookies visibles
- Nueva opción para borrar las cookies de terceros en el panel Almacenamiento
- Cómo editar los User-Agent Client Hints para dispositivos personalizados
- Conservar el parámetro de configuración "registro de red"
- Consulta las conexiones de WebTransport en el panel de red
- Se cambió el nombre de "En línea" a "Sin limitación"
- Nuevas opciones de copia en la consola, el panel Fuentes y el panel Estilos
- Nueva información de service workers en la vista de detalles de Frame
- Cómo medir la información de la memoria en la vista Frame details
- Cómo enviar comentarios desde la pestaña Problemas
- Fotogramas descartados en el panel Rendimiento
- Cómo emular dispositivos plegables y con pantalla doble en el modo de dispositivo
- [Experimental] Automatiza las pruebas del navegador con Puppeteer Recorder
- [Experimental] Editor de fuentes en el panel Estilos
- [Experimental] Herramientas de depuración de flexbox de CSS
- [Experimental] Nueva pestaña CSP Violations
- [Experimental] Nuevo cálculo de contraste de color: Algoritmo de contraste perceptual avanzado (APCA)
- Inicio más rápido de las Herramientas para desarrolladores
- Nuevas herramientas de visualización de ángulos de CSS
- Emula tipos de imágenes no compatibles
- Simula el tamaño de la cuota de almacenamiento en el panel Almacenamiento
- Nuevo carril de Web Vitals en el panel Rendimiento
- Informa errores de CORS en el panel de red
- Información de aislamiento de origen cruzado en la vista de detalles del marco
- Nueva información de Web Workers en la vista de detalles de Frame
- Muestra los detalles del marco de apertura de las ventanas abiertas
- Abre el panel de redes desde el panel Service workers
- Cómo copiar el valor de una propiedad
- Cómo copiar el seguimiento de pila del iniciador de red
- Obtén una vista previa del valor de la variable de Wasm cuando se pasa el mouse por encima
- Evalúa la variable de Wasm en la consola
- Unidades de medida coherentes para los tamaños de archivos y memoria
- Destaca pseudoelementos en el panel Elementos
- [Experimental] Herramientas de depuración de CSS Flexbox
- [Experimental] Personaliza las combinaciones de teclas de acordes
- Nuevas herramientas de depuración de cuadrícula de CSS
- Nueva pestaña de WebAuthn
- Mueve las herramientas entre el panel superior y el inferior
- Nuevo panel lateral Calculado en el panel Estilos
- Agrupa las propiedades de CSS en el panel Computed
- Lighthouse 6.3 en el panel de Lighthouse
- Eventos de
performance.mark()en la sección Timings - Nuevos
resource-typeyurlfiltros en el panel de redes - Actualizaciones de la vista de detalles del fotograma
- Baja de
Settingsen el menú Más herramientas - [Experimental] Visualiza y corrige problemas de contraste de colores en el panel Resumen de CSS
- [Experimental] Personaliza las combinaciones de teclas en las Herramientas para desarrolladores
- Nuevo panel de contenido multimedia
- Cómo tomar capturas de pantalla de nodos con el menú contextual del panel Elementos
- Actualizaciones de la pestaña Problemas
- Emula las fuentes locales que faltan
- Cómo emular usuarios inactivos
- Emula
prefers-reduced-data - Compatibilidad con nuevas funciones de JavaScript
- Lighthouse 6.2 en el panel de Lighthouse
- Baja de la lista de "otros orígenes" en el panel Service Workers
- Muestra el resumen de cobertura de los elementos filtrados
- Nueva vista de detalles de marcos en el panel Aplicación
- Sugerencia de color accesible en el panel Estilos
- Restablece el panel Propiedades en el panel Elementos
- Valores de encabezado
X-Client-Datalegibles por humanos en el panel de redes - Autocompletado de fuentes personalizadas en el panel Estilos
- Muestra de forma coherente el tipo de recurso en el panel de redes
- Botones para borrar en los paneles Elementos y Red
- Edición de diseño para frameworks de CSS-in-JS
- Lighthouse 6 en el panel de Lighthouse
- Baja de First Meaningful Paint (FMP)
- Compatibilidad con nuevas funciones de JavaScript
- Nuevas advertencias de accesos directos a apps en el panel Manifest
- Eventos de service worker
respondWithen la pestaña Timing - Visualización coherente del panel Computed
- Compensaciones de código de bytes para archivos de WebAssembly
- Copia y corta por línea en el panel Fuentes
- Actualizaciones de la configuración de la consola
- Actualizaciones del panel de rendimiento
- Nuevos íconos para puntos de interrupción, puntos de interrupción condicionales y puntos de registro
- Soluciona problemas del sitio con la nueva pestaña Problemas
- Cómo ver la información de accesibilidad en la información sobre la herramienta del modo de inspección
- Actualizaciones del panel de rendimiento
- Terminología de promesas más precisa en Console
- Actualizaciones del panel Estilos
- Baja del panel Propiedades en el panel Elementos
- Compatibilidad con accesos directos a apps en el panel Manifest
- Emula deficiencias visuales
- Cómo emular la configuración regional
- Depuración de la política de incorporaciones de origen cruzado (COEP)
- Nuevos íconos para puntos de interrupción, puntos de interrupción condicionales y puntos de registro
- Cómo ver las solicitudes de red que establecen una cookie específica
- Cómo fijar a la izquierda desde el menú de comandos
- Se movió la opción Configuración del menú principal
- El panel Auditorías ahora es el panel Lighthouse
- Cómo borrar todas las anulaciones locales de una carpeta
- IU de tareas largas actualizada
- Compatibilidad con íconos adaptables en el panel Manifest
- Compatibilidad con Moto G4 en el modo de dispositivo
- Actualizaciones relacionadas con las cookies
- Íconos de manifiesto de apps web más precisos
- Coloca el cursor sobre las propiedades de CSS
contentpara ver los valores sin escape - Errores de mapas de origen en la consola
- Parámetro de configuración para inhabilitar el desplazamiento más allá del final de un archivo
- Compatibilidad con las declaraciones nuevas de
letyclassen Console - Depuración mejorada de WebAssembly
- Cadenas de iniciadores de solicitudes en la pestaña Iniciador
- Destaca la solicitud de red seleccionada en la descripción general
- Columnas de URL y ruta de acceso en el panel de red
- Cadenas de usuario-agente actualizadas
- Nueva IU de configuración del panel Auditorías
- Modos de cobertura de código por función o por bloque
- La cobertura de código ahora se debe iniciar con una recarga de página
- Depura por qué se bloqueó una cookie
- Cómo ver los valores de las cookies
- Simula diferentes preferencias de prefers-color-scheme y prefers-reduced-motion
- Actualizaciones de la cobertura de código
- Depura por qué se solicitó un recurso de red
- Los paneles Console y Sources vuelven a respetar las preferencias de sangría
- Nuevas combinaciones de teclas para la navegación con el cursor
- Compatibilidad con varios clientes en el panel Auditorías
- Depuración del controlador de pagos
- Lighthouse 5.2 en el panel Auditorías
- Largest Contentful Paint en el panel Rendimiento
- Informa problemas de Herramientas para desarrolladores desde el menú principal
- Cómo copiar estilos de elementos
- Visualiza los cambios de diseño visual
- Lighthouse 5.1 en el panel Auditorías
- Sincronización del tema del SO
- Combinación de teclas para abrir el editor de puntos de interrupción
- Caché de carga previa en el panel de redes
- Propiedades privadas cuando se visualizan objetos
- Notificaciones y mensajes push en el panel Aplicación
- Autocompletar con valores de CSS
- Una nueva IU para la configuración de red
- Mensajes de WebSocket en exportaciones de HAR
- Botones de importación y exportación de HAR
- Uso de memoria en tiempo real
- Números de puerto de registro de service workers
- Inspecciona los eventos de recuperación y sincronización en segundo plano
- Puppeteer para Firefox
- Valores predeterminados significativos cuando se completan automáticamente las funciones de CSS
- Cómo borrar los datos del sitio desde el menú de comandos
- Cómo ver todas las bases de datos de IndexedDB
- Cómo ver el tamaño sin comprimir de un recurso cuando se coloca el cursor sobre él
- Puntos de interrupción intercalados en el panel Puntos de interrupción
- Recuentos de recursos de IndexedDB y de caché
- Parámetro de configuración para inhabilitar la información detallada de Inspeccionar
- Parámetro de configuración para activar o desactivar la sangría de tabulación en el editor
- Destaca todos los nodos afectados por la propiedad de CSS
- Lighthouse v4 en el panel Auditorías
- Visualizador de mensajes binarios de WebSocket
- Captura de pantalla de un área en el menú de comandos
- Filtros de service workers en el panel de red
- Actualizaciones del panel de rendimiento
- Tareas largas en las grabaciones del panel Rendimiento
- Primer procesamiento de imagen en la sección Tiempos
- Sugerencia adicional: Atajo para ver los códigos de color RGB y HSL (video)
- Puntos de registro
- Cuadros de información detallados en el modo de inspección
- Exporta datos de cobertura de código
- Navega por la consola con un teclado
- Línea de relación de contraste AAA en el selector de color
- Guardar anulaciones de geolocalización personalizadas
- Plegado de código
- Se cambió el nombre de la pestaña Frames a Messages
- Sugerencia adicional: Filtrado del panel de red por propiedad (video)
- Visualiza las métricas de rendimiento en el panel Rendimiento.
- Destacar nodos de texto en el árbol del DOM
- Copia la ruta de acceso de JS a un nodo del DOM.
- Actualizaciones del panel Audits, incluida una nueva auditoría que detecta bibliotecas de JS y nuevas palabras clave para acceder al panel Audits desde el menú de comandos
- Sugerencia adicional: Usa el modo de dispositivo para inspeccionar las consultas de medios (video)
- Coloca el cursor sobre un resultado de expresión en vivo para destacar un nodo del DOM.
- Cómo almacenar nodos del DOM como variables globales
- Información sobre el iniciador y la prioridad ahora en las importaciones y exportaciones de HAR
- Cómo acceder al menú de comandos desde el menú principal
- Puntos de interrupción de pantalla en pantalla
- Sugerencia adicional: Usa
monitorEvents()para registrar los eventos activados de un nodo en la consola (video) - Expresiones en vivo en la consola
- Destaca los nodos del DOM durante la evaluación diligente
- Optimizaciones del panel Rendimiento
- Depuración más confiable
- Habilita la limitación de la red desde el menú de comandos
- Autocompletado de puntos de interrupción condicionales
- Detén la ejecución en eventos de AudioContext
- Depura apps de Node.js con ndb
- Sugerencia adicional: Mide las interacciones de los usuarios en el mundo real con la API de User Timing
- Evaluación inmediata
- Sugerencias de argumentos
- Autocompletado de funciones
- Palabras clave de ES2017
- Lighthouse 3.0 en el panel Audits
- Compatibilidad con BigInt
- Cómo agregar rutas de acceso de propiedades al panel Watch
- Se movió la opción "Mostrar marcas de tiempo" a Configuración
- Bonus tip: Lesser-known Console methods (video)
- Cómo buscar en todos los encabezados de red
- Vistas previas de los valores de las variables de CSS
- Copiar como fetch
- Nuevas auditorías, opciones de configuración de escritorio y visualización de seguimientos
- Detén los bucles infinitos
- Tiempos de usuario en las pestañas Rendimiento
- Instancias de VM de JavaScript que se muestran claramente en el panel Memoria
- Se cambió el nombre de la pestaña Red a pestaña Página
- Actualizaciones del tema oscuro
- Información sobre el certificado de transparencia en el panel Seguridad
- Funciones de aislamiento de sitios en el panel Rendimiento
- Sugerencia adicional: Panel de capas + Inspector de animaciones (video)
- Glossary: Blackboxing en el panel de red
- Ajuste automático del zoom en el modo de dispositivo
- Impresión con formato estilístico en las pestañas Vista previa y Respuesta
- Obtén una vista previa del contenido HTML en la pestaña Vista previa
- Compatibilidad de las anulaciones locales con los estilos dentro de HTML
- Sugerencia adicional: Usa secuencias de comandos de framework de caja negra para que los puntos de interrupción del objeto de escucha de eventos sean más útiles
- Anulaciones locales
- Nuevas herramientas de accesibilidad
- La pestaña Cambios
- Nuevas auditorías de SEO y rendimiento
- Múltiples grabaciones en el panel Rendimiento
- Ejecución de código confiable con trabajadores en código asíncrono
- Sugerencia adicional: Automatiza las acciones de DevTools con Puppeteer (video)
- Performance Monitor
- Barra lateral de Console
- Agrupa mensajes similares de la consola
- Sugerencia adicional: Activa o desactiva la pseudoclase de desplazamiento (video)
- Compatibilidad con la depuración remota de varios clientes
- Workspaces 2.0
- 4 auditorías nuevas
- Simula notificaciones push con datos personalizados
- Activa eventos de sincronización en segundo plano con etiquetas personalizadas
- Sugerencia adicional: Puntos de interrupción del objeto de escucha de eventos (video)
- Await de nivel superior en la consola
- Nuevos flujos de trabajo de capturas de pantalla
- Destacado de cuadrícula de CSS
- Una nueva API de Console para consultar objetos
- Nuevos filtros de Console
- Importaciones de HAR en el panel de red
- Recursos de caché con vista previa
- Depuración de caché más predecible
- Cobertura de código a nivel de bloque
- Simulación de limitación de dispositivos móviles
- Consulta el uso del almacenamiento
- Cómo ver cuándo un service worker almacenó respuestas en caché
- Habilita el medidor de FPS desde el menú de comandos
- Configura el comportamiento de la rueda del mouse para acercar o alejar, o bien para desplazarte
- Compatibilidad con la depuración de módulos de ES6
- Nuevo panel de auditorías
- Insignias de terceros
- Un nuevo gesto para Continuar hasta aquí
- Entrar en asíncrono
- Vistas previas de objetos más informativas en la consola
- Selección de contexto más informativa en la consola
- Actualizaciones en tiempo real en la pestaña Cobertura
- Opciones de limitación de la red más sencillas
- Pilas asíncronas activadas de forma predeterminada
- Cobertura de código CSS y JS
- Capturas de pantalla de página completa
- Cómo bloquear solicitudes
- Paso por encima de async await
- Menú de comandos unificado