Qué hay de nuevo en DevTools (Chrome 94)

Published on Updated on

Translated to: English, Português, 한국어, 中文, Pусский, 日本語

Gracias Carlos Caballero por la traducción y Miguel Ángel por la revisión.

¿Tienes interés en mejorar DevTools? Regístrate para participar en la Google User Research aquí.

Utiliza DevTools en tu idioma preferido

Chrome DevTools ahora soporta más de 80 idiomas, lo que permite que lo puedas utilizar en tu idioma preferido.

Ve a Configuración, a continuación selecciona tu idioma preferido siguiendo la ruta Configuración avanzada > Idioma y finalmente, reinicia las DevTools.

Cambia el idioma en Configuración > Preferencias

Chromium issue: 1163928

Nest Hub en la lista de dispositivos

Ahora puedes simular las dimensiones físicas de Nest Hub y Nest Hub Max utilizando el modo dispositivo.

Clic Toggle Device Toolbar   Toggle Device Toolbar  , selecciona Nest Hub o Nest Hub Max en la lista de dispositivos.

Nest Hub en el modo dispositivo

Chromium issue: 1223525

Pruebas de origen en la vista de detalle de Frame

Ahora se puede obtener información sobre los pruebas de origen en la vista de detalles de frame debajo del panel de Aplicación

Pruebas de origen permite el acceso a funcionalidades nuevas o experimentales, para construir una funcionalidad que los usuarios puedan probar durante un tiempo limitado antes de que dicha funcionalidad esté disponible para todo el mundo.

Abre una página con prueba de origen (por ejemplo demo page). En el panel Applicación, desplazate hacia la sección Fotogramas/Marcos y selecciona el fotograma/marco top.

Pruebas de origen en la vista de detalle de Frame

Chromium issue: 607555

Nueva insignia de consultas de contenedor CSS

Una nueva insignia container se agrega junto a los elementos del contenedor (los elementos ancestros que coinciden con los criterios de las reglas at @container). Haga clic en la insignia para alternar la visualización del contenedor elegido y todos sus descendientes en la página.

Insignia de consultas de contenedor CSS

Chromium issue: 1146422

Nuevo checkbox para invertir los filtros del panel de Red

Utiliza el nuevo checkbox Invertir para invertir los filtros en el panel de Red.

Por ejemplo, puedes escribir "status-code: 404" para filtrar las peticiones de la red con status 404. Habilita el checkbox Invertir para negar el filtro (se muestran todas las peticiones de la red las cuales no tienen el status 404).

Invertir los filtros de la red

Chromium issue: 1054464

Eliminación próxima (deprecated) de la barra lateral de la Consola

La barra lateral de la consola será eliminada en favor de mover los filtros de UI a la barra de herramientas. ¿Tiene alguna duda o comentario? Háganoslo saber a través de este issue tracker.

Mensaje de aviso de próxima eliminación de la barra lateral de la consola.

Chromium issue: 1232937

Mostrar cabecera Set-Cookie sin procesar en la pestaña Problemas y el panel Red

DevTools ahora muestra la cabecera Set-Cookie sin procesar (raw) en la pestaña Problemas.

Anteriormente, DevTools no mostraba cookies con formato incorrecto (cabecera "Set-Cookie" incorrecta) en el panel Red. Con el nuevo filtro response-header-set-cookie agregado al panel Red, los usuarios pueden filtrar la respuesta de la cabecera Set-Cookie antes de ser procesada. DevTools vinculará la cabecera sin procesar Set-Cookie en la pestaña Problemas al panel Red.

Cabecera `Set-Cookie` sin procesar en la pestaña Problemas y el panel Red

Chromium issue: 1179186

Visualización coherente de los descriptores de acceso nativos como propiedades propias en la consola

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

Por ejemplo, al evaluar la expresión new Int8Array([1, 2, 3]) en la Consola, los descriptores de acceso nativos como length,byteOffset no se mostraban en la vista previa. Con esta última actualización, los descriptores de acceso nativos se muestran en la vista previa y los valores se evalúan por adelantado cuando se expanden.

Visualización coherente de los descriptores de acceso nativos como propiedades propias en la consola

Chromium issues: 1076820, ​​1199247

Pila de error más adecuada para scripts en línea con #sourceURL

DevTools ahora resuelve correctamente los scripts en línea con #sourceURL y muestra la pila de errores adecuada para la depuración.

Anteriormente, DevTools mostraba una ubicación incorrecta para los scripts en línea con #sourceURL, en relación con el documento próximo en lugar de con respecto a la etiqueta de apertura <script>.

Pila de error más adecuada para scripts en línea con #sourceURL

Chromium issues: 1183990, ​​578269

Cambiar el formato de color en el panel Computado

Ahora puede cambiar el formato de color de cualquier elemento en el panel Computado con Mayús + clic en la vista previa del color.

Mayús+Clic la vista previa del color para cambiar el formato de color

Chromium issue: 1226371

Sustitución de tooltips personalizados por tooltips nativos en HTML

DevTools ahora adopta tooltips nativos de HTML en todos los componentes. DevTools ha tenido una implementación personalizada de información en los tooltips durante mucho tiempo debido a la falta de estilo de los tooltips nativos de HTML.

Desafortunadamente, mantener una implementación personalizada de tooltips es complicado y frecuentemente nos encontramos con complicados bugs.

Después de volver a ponderar los beneficios de las implementaciones personalizadas, encontramos que los tooltips nativos de HTML son suficientes para DevTools y la adopción de tooltips nativos evita una gran variedad de problemas para nuestros usuarios.

DevTools tooltip

Chromium issue: 1223391

[Experimental] Ocultar problemas en la pestaña de Problemas

Para habilitar esta característica experimental, marca el checkbox Habilitar ocultar menú de problemas que se encuentra en Configuración > Experimental.

Habilita el menú ocultar problemas experimental para ocultar problemas en la pestaña Problemas. De este modo, puede centrarse en los problemas que le importan.

En la pestaña Issue, sitúe el ratón en un problema, haga click en el menú de problemas   Más   a la derecha, seleccione Ocultar problemas como estes para ocultarlo.

Menú contextual experimental para ocultar problemas

Chromium issue: 1175722

Descarga de los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo por defecto. Estos canales de prueba te dan acceso a las últimas funcionalidades de DevTools, probar innovadoras APIs de la plataforma web y encontrar errores en tus sitios antes que tus usuarios lo hagan.

Ponerse en contacto con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre nuevas funcionalidades y cambios en el artículo o cuaquier cosa relacionada con DevTools.

  • Envía una sugerencia u opinión a través de crbug.com.
  • Reporta un problema con DevTools usando Más opciones   Más   > Ayuda > Reportar un problema con DevTools in DevTools.
  • Haz un Tweet a @ChromeDevTools.
  • Deja un comentario en los vídeos de YouTube sobre Qué hay de nuevo en DevTools.

Más características de DevTools

Por favor, revisa la versión en inglés de What's New In DevTools para una lista completa de las características lanzadas. Debajo tienes más contenido que ha sido traducido al castellano.

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.