Novedades de Herramientas para desarrolladores (Chrome 94)

Usa las Herramientas para desarrolladores en tu idioma preferido

Las Herramientas para desarrolladores de Chrome ahora admiten más de 80 idiomas, lo que te permite trabajar en tu idioma preferido.

Abre Configuración y, luego, selecciona tu idioma preferido en el menú desplegable Preferencias > Idioma y vuelve a cargar Herramientas para desarrolladores.

Preferences" width="800" height="494">

Error de Chromium: 1163928

Nuevos dispositivos Nest Hub en la lista de dispositivos

Ahora puedes simular las dimensiones del Nest Hub y el Nest Hub Max en el modo de dispositivo.

Haz clic en Alternar barra de herramientas del dispositivo   Activa o desactiva la barra de herramientas del dispositivo  y selecciona Nest Hub o Nest Hub Max en la lista de dispositivos.

Dispositivo Nest Hub en el modo de dispositivo

Error de Chromium: 1223525

Pruebas de origen en la vista Detalles del frame

Ahora puedes obtener información sobre las pruebas de origen de un sitio en la vista de detalles del marco en el panel Aplicación.

Las pruebas de origen te dan acceso a una función nueva o experimental para que desarrolles funcionalidades que tus usuarios puedan probar por un tiempo limitado antes de que la función esté disponible para todos.

Abre una página con pruebas de origen (p.ej., la página de demostración). En el panel Application, desplázate hacia abajo hasta la sección Frames y selecciona el primer fotograma.

Pruebas de origen en la vista Detalles del frame

Error de Chromium: 607555

Nueva insignia de consultas de contenedores de CSS

Se agrega una nueva insignia de contenedor junto a los elementos del contenedor (los elementos superiores que coinciden con los criterios de las reglas @ de @container). Haz clic en la insignia para activar o desactivar la visualización de una superposición del contenedor elegido y todos sus elementos secundarios de consulta en la página.

Insignia de consultas de contenedores de CSS

Error de Chromium: 1146422

Nueva casilla de verificación para invertir los filtros de red

Usa la nueva casilla de verificación Invertir para invertir los filtros en el panel Red.

Por ejemplo, puedes escribir "status-code: 404" para filtrar las solicitudes de red con el estado 404. Habilita la casilla de verificación Invertir para negar el filtro (mostrar todas las solicitudes de red que no tengan el estado 404).

Invertir los filtros de red

Error de Chromium: 1054464

La barra lateral de la consola dejará de estar disponible próximamente

Se quitará la barra lateral de la consola y se trasladará la IU del filtro a la barra de herramientas. ¿Tienes alguna inquietud o comentario? Infórmanos a través de esta herramienta de seguimiento de errores.

Mensaje de baja de la barra lateral de la consola

Problema de Chromium: 1232937

Mostrar encabezados Set-Cookie sin procesar en la pestaña Issues y el panel Network

Las Herramientas para desarrolladores ahora muestran encabezados Set-Cookie sin procesar en la pestaña Problemas.

Anteriormente, las Herramientas para desarrolladores no mostraban las cookies con formato incorrecto (encabezado Set-Cookie incorrecto) en el panel Network. Con el nuevo filtro response-header-set-cookie agregado en el panel Network, los usuarios pueden filtrar la respuesta del encabezado Set-Cookie sin procesar. Las Herramientas para desarrolladores vincularán los encabezados Set-Cookie sin procesar de la pestaña Problemas al panel Red.

Encabezados "Set-Cookie" sin procesar en la pestaña Problemas y el panel Red

Error de Chromium: 1179186

Los descriptores de acceso nativos se muestran de forma coherente como propiedades propias en la consola

La consola ahora muestra los descriptores de acceso nativos como sus propias propiedades de manera coherente.

Por ejemplo, cuando se evaluaba la expresión new Int8Array([1, 2, 3]) en la consola, los descriptores de acceso nativos como length y byteOffset no se mostraban en la vista previa. Con esta actualización más reciente, los descriptores de acceso nativos se muestran en la vista previa y los valores se evalúan de forma anticipada cuando se expanden.

Los descriptores de acceso nativos se muestran de forma coherente como propiedades propias en la consola

Problemas de Chromium: 1076820 y ​​1199247

Seguimientos de pila de errores adecuados para secuencias de comandos intercaladas con #sourceURL

Ahora, Herramientas para desarrolladores resuelve correctamente los secuencias de comandos intercalados con #sourceURL y muestra seguimientos de pila de errores adecuados para la depuración.

Anteriormente, Herramientas para desarrolladores mostraba la ubicación incorrecta para las secuencias de comandos intercaladas con #sourceURL, en relación con el documento circundante en lugar de con la etiqueta de apertura <script>.

Seguimientos de pila de errores adecuados para secuencias de comandos intercaladas con #sourceURL

Problemas de Chromium: 1183990 y ​​578269

Cómo cambiar el formato de color en el panel Computed

Ahora puedes cambiar el formato de color de cualquier elemento en el panel Computed presionando Mayúsculas y haciendo clic en la vista previa del color.

Presiona Mayúsculas y haz clic en la vista previa del color para cambiar el formato de color

Error de Chromium: 1226371

Reemplaza las sugerencias personalizadas por sugerencias HTML nativas

Las Herramientas para desarrolladores ahora adoptan Tooltips HTML nativos en todos los componentes. Herramientas para desarrolladores tiene una implementación de información sobre herramientas personalizada desde hace mucho tiempo debido a la falta de diseño de una información sobre herramientas HTML nativa.

Lamentablemente, mantener una implementación de Tooltip personalizada es complicado y, con frecuencia, nos encontramos con errores complejos.

Después de reevaluar los beneficios de las implementaciones personalizadas, descubrimos que las sugerencias nativas en HTML son suficientes para las Herramientas para desarrolladores y que adoptarlas evita una gran variedad de problemas para nuestros usuarios.

Cuadro de información de Herramientas para desarrolladores

Error de Chromium: 1223391

[Experimental] Oculta problemas en la pestaña Problemas

Habilita el experimento Ocultar el menú de problemas para ocultar los problemas en la pestaña Problemas. De esta manera, puedes enfocarte en los problemas importantes que te interesan.

En la pestaña Problema, coloca el cursor sobre un problema, haz clic en el menú de problemas  Más  a la derecha y selecciona Ocultar problemas como este para ocultarlo.

Menú contextual experimental para ocultar problemas

Error de Chromium: 1175722

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 analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores