Imagen de la etiqueta devtools

Qué hay de nuevo en DevTools (Chrome 93)

· 5 minutos de lectura · ¿Una errata? Edita el artículo

¡Ya tenemos disponible una nueva versión de Google Chrome! Y con ello, un montón de novedades para mejorar las herramientas de desarrollo. He traducido las notas de lanzamiento oficial para que tengas en castellano las novedades del navegador en tu idioma. ⬇️

Consultas de contenedores CSS editables en el panel de Estilos

Ahora puedes ver y editar las consultas de contenedores CSS en el panel de Estilos.

Consultas a contenedores CSS en el panel de Estilos
Consultas a contenedores CSS en el panel de Estilos

Las consultas de contenedores (container queries) ofrecen una manera mucho más dinámica de realizar diseños adaptables. La regla @container funciona de una forma similar a las consultas de medios (media queries). Sin embargo, en lugar de consultar el tamaño de la ventana y la información del agente del usuario, @container consulta el contenedor ascendiente que cumple cierto criterio.

En el panel de Elementos, haz clic en el elemento del DOM que tenga la regla @container, DevTools ahora muestra la información de @container en el panel de Estilos. Clica en él para editar su tamaño. El panel Estilos también muestra la información correspondiente al contenedor. Coloca el puntero del mouse encima para resaltar el elemento contenedor en la página y revisa el tamaño del contenedor. Haz clic en él para seleccionar el elemento contenedor.

Actualmente la característica de consultas de contenedores es experimental. Por favor, activa la opción #enable-container-queries en chrome://flags para probarlo.

Chromium issue: 1146422

Previsualización de paquetes Web en el panel de Red

Un paquete Web es un formato de encapsulación de uno o más recursos HTTP en un sólo fichero. Ahora puedes previsualizar el contenido de tu paquete web en el panel de Red.

Actualmente la característica de paquete web es experimental. Por favor, activa la opción #enable-experimental-web-platform-features en chrome://flags para probarlo.

Previsualización paquete web
Previsualización paquete web

Chromium issue: 1182537

Depuración de la API de Informes de Atribución

Los errores de la API de Informes de Atribución ahora son notificados en la pestaña Problemas.

Informes de Atribución es una nueva API que te ayuda a medir cuando una acción de usuario (como un clic a un anuncio o una visualización) conduce a una conversión, sin necesidad de usar identificadores de sitios cruzados.

Errores de la API de Informes de Atribución en el panel Problemas
Errores de la API de Informes de Atribución en el panel Problemas

Chromium issue: 1190735

Mejor manejo de cadenas de texto en la Consola

Nuevo menú contextual en la Consola que te permite copiar cualquier cadena de texto como contenido, un literal de JavaScript o un literal JSON.

Nuevo menú contextual en la Consola
Nuevo menú contextual en la Consola

En Chrome 90, DevTools actualizó la Consola para que siempre formatease la salida de las cadenas de texto como literales JSON válidos. Hemos recibido retroalimentación de equipos de desarrollo que este cambio puede ser confuso ya que sienten que la cantidad de secuencias de escape es excesiva y hace la salida illegible.

La Consola ahora formatea la salida de la cadena de texto como un literal JavaScript válido y, además, te proporciona 3 opciones para copiar las cadenas. La opción Copiar como literal JavaScript va a añadir las secuencias de escape a los carácteres especiales y envolverá las cadenas de texto en comillas simples, dobles o comillas invertidas dependiendo del contenido de la cadena. En su lugar, la opción Copiar cadena como contenido copia el contenido de la cadena tal cuál se encuentra (incluyendo nuevas líneas y otros carácteres especiales) al portapapeles. Finalmente, Copiar como literal JSON formatea la cadena como un JSON literal válido y lo copia al portapapeles.

Chromium issue: 1208389

Mejoras en la depuración de CORS

Los errores relacionados CORS de TypeErrors en la Consola ahora están enlazados al panel Red y la pestaña Problemas.

Haz clic en los dos nuevos iconos al lado de los mensajes de error relacionados con CORS para ver la petición en la red o entender el mensaje de error con más detalle y recibir soluciones potenciales en la pestaña Problemas.

Iconos al lado de los mensajes de error relacionados con CORS
Iconos al lado de los mensajes de error relacionados con CORS

Chromium issue: 1213393

Lighthouse 8.1

El panel de Lighthouse ahora usa Lighthouse 8.1.

Lighthouse
Lighthouse

Si tu sitio expone mapas de código fuente (source maps) a Lighthouse, revisa el botón Ver mapa de árbol para ver un desglose del JavaScript que has enviado, filtrable por tamaño y cobertura al ser cargado.

El reporte también incluye una nueva métrica para filtrar (Revisa la captura de pantalla sobre el filtro Mostrar auditorías relevantas a). Selecciona una métrica para enfocarte en las oportunidades y diagnósticos más relevantes para mejorar esa métrica.

La Categoría de Rendimiento tiene algunos cambios de puntuación para alinearse con otras herramientas de rendimiento y reflejar mejor el estado de la web.

Revisa las notas de lanzamiento para una lista entera de cambios.

Chromium issue: 772558

Muestra una nueva nota URL en el panel de Manifiesto

El panel Manifiesto ahora muestra una nueva nota URL.

Actualmente en Chrome OS (CrOS), Aplicaciones Chrome y Aplicaciones Android que declaran la capacidad “nueva-nota” pueden ser seleccionados como una aplicación para tomar notas en la configuración de Stylus (se muestra si el dispositivo CrOS ha sido usado con un stylus). Cuando se selecciona la aplicación de tomar notas, la aplicación puede ser lanzada desde el botón “Crear Nota” de la paleta del stylus. Añadir un campo new-note-url en el manifiesto de la aplicación es parte de los esfuerzos por añadir una funcionalidad equivalente en las aplicaciones web.

Nueva nota URL en el panel de Manifiesto
Nueva nota URL en el panel de Manifiesto

Chromium issue: 1185678

Arreglados los selectors CSS coincidentes

DevTools ha arreglado los selectores CSS coincidentes, que no funcionaban en el último lanzamiento.

Los selectores separados por coma en el panel de Estilos tienen colores diferentes dependiendo si coinciden con el nodo de DOM seleccionado:

  • Una porción que no coincide se muestra con un gris claro.
  • Un selector que coincide se muestra en negro.
Selectores CSS coincidentes
Selectores CSS coincidentes

Chromium issue: 1219153

Mostrando las respuestas JSON con formato legible

Ahora puedes ver las respuestas JSON en el panel de Red en un formato legible.

Abre la respuesta JSON en el panel de Red, haz clic en el botón {} para formatear el código.

Muestra el código JSON con un formato legible
Muestra el código JSON con un formato legible

Chromium bug: 998674

Contenido del artículo

Comparte el artículo