Novedades de Herramientas para desarrolladores (Chrome 93)

Consultas editables de contenedores CSS en el panel Estilos

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

Las consultas de contenedores proporcionan un enfoque mucho más dinámico para el diseño responsivo. La regla at @container funciona de manera similar a una consulta de medios con @media. Sin embargo, en lugar de consultar el viewport y el usuario-agente para obtener información, @container consulta el contenedor principal que coincide con ciertos criterios.

En el panel Elements, haz clic en un elemento del DOM con la regla arroba @container. Herramientas para desarrolladores ahora muestra la información de @container en el panel Estilos. Haz clic en él para editar el tamaño. El panel Estilos también muestra la información del contenedor correspondiente. Coloca el cursor sobre él para destacar el elemento contenedor en la página y verificar su tamaño. Haz clic en él para seleccionar el elemento contenedor.

Por el momento, la función de consultas de contenedores se encuentra en fase experimental. Activa la marca #enable-container-queries en chrome://flags para probarla.

Consultas editables de contenedores CSS en el panel Estilos

Problema de Chromium: 1146422

Vista previa del paquete web en el panel Red

Un paquete web es un formato de archivo para encapsular uno o más recursos HTTP en un solo archivo. Ahora puede obtener una vista previa del contenido del paquete web en el panel Red.

Por el momento, la función de paquete web se encuentra en fase experimental. Habilita la marca #enable-experimental-web-platform-features en chrome://flags para probarla.

Vista previa del paquete web

Problema de Chromium: 1182537

Depuración de la API de Attribution Reporting

Los errores de la API de Attribution Reporting ahora se informan en la pestaña Problemas.

Attribution Reporting es una nueva API que te ayuda a medir cuando una acción del usuario (como un clic o una vista en el anuncio) genera una conversión sin usar identificadores entre sitios.

Errores de la API de Attribution Reporting en la pestaña Problemas

Problema de Chromium: 1190735

Mejor manejo de cadenas en la consola

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

Nuevo menú contextual en la consola

En Chrome 90, las Herramientas para desarrolladores actualizaron Console para dar formato a las salidas de strings como literales de JSON válidos. Recibimos comentarios de los desarrolladores en los que se indica que este cambio podría ser confuso, algunos creen que la cantidad de escapes es excesiva y hace que el resultado sea ilegible.

La consola ahora formatea salidas de cadenas como literales de JavaScript válidos y, además, te ofrece 3 opciones de copia de cadenas. La opción Copiar como literal de JavaScript omitirá los caracteres especiales correspondientes y colocará la string entre comillas simples, comillas dobles o acentos graves según el contenido de la cadena. En cambio, la opción Copiar contenido de la cadena copia el contenido de la cadena sin procesar (incluidas las líneas nuevas y otros caracteres especiales) al portapapeles. Por último, Copy as JSON literal le da formato a la string como un literal de JSON válido y la copia en el portapapeles.

Problema de Chromium: 1208389

Depuración de CORS mejorada

Los TypeErrors relacionados con CORS en Console ahora están vinculados al panel Network y a la pestaña Issues.

Haz clic en los dos íconos nuevos que aparecen junto al mensaje de error relacionado con CORS para ver la solicitud de red o comprender mejor el mensaje de error y obtener posibles soluciones en la pestaña Problemas.

Íconos junto al mensaje de error relacionado con CORS

Problema de Chromium: 1213393

Lighthouse 8.1

El panel de Lighthouse ahora ejecuta Lighthouse 8.1.

Faro

Si tu sitio expone mapas de fuentes a Lighthouse, busca el botón Ver mapa de árbol para ver un desglose del código JavaScript enviado, que se puede filtrar por tamaño y cobertura en la carga.

El informe también incluye un filtro de métrica nuevo (consulta el filtro Mostrar auditorías relevantes para en la captura de pantalla). Elija una métrica para centrarse en las oportunidades y los diagnósticos más relevantes para mejorar solo esa métrica.

La categoría de rendimiento realizó varios cambios en la puntuación para alinearse con otras herramientas de rendimiento y reflejar mejor el estado de la Web.

Consulta las notas de la versión para obtener una lista completa de los cambios.

Problema de Chromium: 772558

Muestra la URL de la nueva nota en el panel del manifiesto

En el panel Manifest, ahora se muestra la URL nueva de la nota.

Actualmente, tienes ChromeOS (CrOS), Apps de Chrome y apps para Android que declaran una "nota nueva". se puede seleccionar como una app para tomar notas en la configuración de la pluma stylus (aparece si el dispositivo CrOS se usó con una pluma stylus). Cuando se selecciona como app para tomar notas, se puede iniciar desde la opción "Crear nota" de la paleta de pluma stylus. . Agregar el campo new-note-url al manifiesto de la aplicación forma parte del esfuerzo por agregar una funcionalidad equivalente a las apps web.

Nueva URL de nota en el panel del manifiesto

Problema de Chromium: 1185678

Se corrigieron los selectores de coincidencias de CSS.

Las Herramientas para desarrolladores corrigieron los selectores de coincidencias de CSS, ya que no funcionaban en la última versión.

Los selectores separados por comas del panel Styles tienen un color diferente según si coinciden con el nodo del DOM seleccionado:

  • Las partes no coincidentes se muestran en color gris claro.
  • Una parte del selector coincidente se muestra en negro.

Selectores de coincidencias de CSS

Problema de Chromium: 1219153

Cómo imprimir respuestas de JSON con formato estil en el panel Red

Ahora puedes imprimir las respuestas de JSON en el panel Red.

Abre una respuesta JSON en el panel Red y haz clic en el ícono {} para imprimirla con formato estilístico.

 Cómo imprimir respuestas de JSON con formato estil en el panel Red

Error de Chromium: 998674

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataformas web de vanguardia y detectan problemas en tu sitio antes que los usuarios.

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

  • Para enviarnos sugerencias o comentarios, accede a crbug.com.
  • Informa un problema en Herramientas para desarrolladores con Más opciones   Más > Ayuda > Informa problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
  • Twittea a @ChromeDevTools.
  • Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.