隆Estamos en directo en Twitch!

隆Entra y participa!

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