Novedades de Herramientas para desarrolladores (Chrome 120)

Sofia Emelianova
Sofia Emelianova
GitHub

Eliminación gradual de las cookies de terceros

Es posible que tu sitio use cookies de terceros. Es momento de tomar medidas, ya que pronto se darán de baja. Para obtener información sobre qué hacer con las cookies afectadas, consulta Prepárate para el fin de las cookies de terceros.

La casilla de verificación Casilla de verificación Incluir problemas con las cookies de terceros está habilitada de forma predeterminada para todos los usuarios de Chrome, por lo que la pestaña Problemas ahora te advierte sobre las cookies que se verán afectadas por la baja y la eliminación gradual de las cookies de terceros. Puedes borrar la casilla de verificación en cualquier momento para dejar de ver estos problemas.

Una advertencia sobre la próxima baja de las cookies de terceros en la pestaña Problemas

Error de Chromium: 1466310.

Analiza las cookies de tu sitio web con Privacy Sandbox Analysis Tool

La extensión Privacy Sandbox Analysis Tool para Herramientas para desarrolladores está en desarrollo activo con la última versión previa al lanzamiento de 0.3.2. La herramienta te permite comprender cómo tu sitio web usa las cookies y te brinda orientación sobre las nuevas APIs de Chrome que preservan la privacidad.

Para analizar tus cookies, haz lo siguiente:

  1. Instala la extensión en Chrome.
  2. Abre tu sitio web en una pestaña para realizar un mejor análisis.
  3. Abre Herramientas para desarrolladores y navega al panel Privacy Sandbox. Es posible que este panel esté oculto detrás del botón desplegable Más pestañas. en la parte superior.
  4. Abre la sección Cookies y haz clic en Analyze this tab. Si la herramienta no encontró ninguna cookie, intenta volver a cargar la página.

Privacy Sandbox Analysis Tool

Para obtener más información sobre cómo usar la Privacy Sandbox Analysis Tool (PSAT), consulta los siguientes recursos:

Además, consulta la guía sobre Cómo informar problemas.

Lista de elementos ignorados mejorada

Patrón de exclusión predeterminado para node_modules

Esta versión habilita la expresión regular predeterminada como una regla de exclusión personalizada en Configuración. Configuración > Lista de elementos ignorados. Para ayudarte a enfocarte solo en tu código, el depurador ahora omitirá las secuencias de comandos de /node_modules/ y /bower_components/ de forma predeterminada. Puedes inhabilitar esta regla en la configuración en cualquier momento.

El antes y el después de agregar una expresión regular.

Error de Chromium: 1496301.

Las excepciones ahora detienen la ejecución si se detectan o pasan por código no ignorado.

Cuando depuras código con la opción Casilla de verificación. Pause on Excepciones detectadas marcada, Debugger ahora detiene la ejecución en las siguientes excepciones detectadas, tanto síncronas como asíncronas:

  • Excepciones detectadas en fotogramas no ignorados en la pila de llamadas
  • Excepciones capturadas que pasan por marcos no ignorados en la pila de llamadas. Por ejemplo, mira la captura de pantalla.

Detenerse en una excepción detectada que pasó por código no ignorado

Para probar este comportamiento, abre esta página de demostración:

  1. Abre Herramientas para desarrolladores > Fuentes, agrega la carpeta hidden a la lista de elementos ignorados y marca Casilla de verificación. Pausar en excepciones detectadas.
  2. En la página, en la lista de situaciones "Atrapados", haz clic en los diferentes botones y observa la ejecución detenida en los casos mencionados.

Para pausar la ejecución en excepciones detectadas o no detectadas (cuando se marcan) en llamadas asíncronas, Debugger busca controladores de rechazo en las promesas. A partir de esta versión, el depurador ya no predice que Promise.finally() capturará una excepción, de manera similar a como el bloque try...finally no captura ninguna.

Problemas de Chromium: 1489312, 1291064.

Se cambió el nombre de x_google_ignoreList por ignoreList en los mapas de origen.

En la especificación de los mapas de origen, se adoptó el campo ignoreList en lugar de x_google_ignoreList, y Herramientas para desarrolladores ahora admite el nombre nuevo con un resguardo para el anterior. Los frameworks y los empaquetadores ahora pueden usar el nuevo nombre de campo.

Los mapas de fuentes te permiten depurar el código que escribiste en lugar del código reducido que entrega tu sitio web.

Para obtener más información sobre los mapas de orígenes, consulta:

Nuevo botón de activación del modo de entrada durante la depuración remota

Ahora puedes alternar entre la entrada táctil y del mouse cuando depuras una pestaña de Chrome de forma remota. Por ejemplo, cuando ejecutas una instancia de Chrome con --remote-debugging-port=<port> y te conectas a este destino de red a través de chrome://inspect/#devices.

Mira el video para ver el modo de entrada en acción.

Error de Chromium: 1410433.

El panel Elementos ahora muestra las URLs de los nodos #document.

Para que puedas depurar iframes con mayor facilidad, el panel Elementos ahora muestra documentURL junto a los nodos #document.

En el antes y el después, se muestra documentURL junto al nodo #document.

Problema de Chromium: 1376976.

Política de seguridad del contenido vigente en el panel de la aplicación

Ahora puedes ver los detalles de la Política de Seguridad del Contenido (CSP) de un marco inspeccionado. Para ver los detalles, navega a Application > Frames, selecciona un marco y desplázate hacia abajo hasta la sección Content Security Policy (CSP).

La sección Política de Seguridad del Contenido, que se encuentra en la pestaña Aplicación

Error de Chromium: 1424714.

Depuración de animaciones mejorada

En la pestaña Animations, ahora puedes hacer lo siguiente:

  • Haz clic en cualquier parte del encabezado del cronograma para establecer el cabezal de reproducción. La animación seguirá reproduciéndose si ya estaba en reproducción y se detendrá de lo contrario. Anteriormente, tenías que arrastrarlo.
  • Cambia el tamaño de la columna de nombre para ver los nombres completos de las animaciones.

Problemas de Chromium: 1492460, 1489721.

Diálogo "¿Este código es de confianza?" en Fuentes y advertencia de XSS propio en la consola

El experimento Casilla de verificación Mostrar advertencia sobre el XSS propio cuando se pega código se habilitó de forma predeterminada. El XSS propio (secuencia de comandos entre sitios propia) es un ataque que te engaña para que pegues código malicioso en DevTools y permite que un atacante tome el control de tus cuentas web y tu información personal.

Si eres un usuario nuevo de Herramientas para desarrolladores e intentas pegar código, el panel Sources mostrará el diálogo ¿Confías en este código? y la consola muestra una advertencia similar. Pega solo el código que entiendas y hayas revisado. Para pegar, escribe allow pasting cuando se te solicite. Una vez que se permita pegar, la advertencia nunca se volverá a mostrar.

El diálogo &quot;¿Este código es de confianza?&quot; cuando pegas código en Fuentes

Problema de Chromium: 345205.

Interrupciones de los objetos de escucha de eventos en trabajadores web y worklets

Cuando estableces un punto de interrupción de evento en Sources > Event Listener Breakpoints, además de detenerte en este evento en tu sitio web, el depurador ahora también se detiene cuando ocurre el evento correspondiente en un trabajador web o una worklet de cualquier tipo, incluida la worklet de almacenamiento compartido.

Se pausó el depurador cuando un service worker llama a la función de tiempo de espera establecida.

Error de Chromium: 1445175.

La nueva insignia de contenido multimedia para <audio> y <video>

Ahora puedes habilitar la nueva insignia multimedia para los elementos <audio> y <video> en el panel Elementos. Cuando hagas clic en la insignia, se te dirigirá al panel Media para que puedas depurar estos elementos.

Se habilitó la nueva insignia multimedia para las etiquetas de audio y video.

Esta función está en desarrollo y se mejorará. El equipo de Herramientas para desarrolladores quiere agradecer a Junseo (Jeremy) Yoo por lograr esta mejora.

Problema de Chromium: 1448214.

Se cambió el nombre de la precarga por Carga especulativa

Para evitar un uso excesivo del término anterior y reflejar mejor el comportamiento, se cambió el nombre de Aplicación > Precarga a Cargas especulativas. La carga especulativa permite una carga de página casi instantánea basada en reglas de especulación que puedes definir para que tu sitio web renderice previamente y precargue la mayoría de las páginas a las que se navega.

Antes y después de cambiar el nombre de la carga previa a la carga especulativa.

Error de Chromium: 1478888.

Lighthouse 11.2.0

El panel de Lighthouse ahora ejecuta Lighthouse 11.2.0. Consulta la lista completa de cambios.

Esta actualización incluye una revisión de la categoría de rendimiento. Ahora las estadísticas de rendimiento se califican y priorizan en función de su impacto estimado en las métricas de rendimiento. Además, el medidor de puntuación de rendimiento incluye información más detallada sobre cómo cada métrica afecta la puntuación.

Antes y después de la revisión del rendimiento

Para aprender los conceptos básicos del uso del panel de Lighthouse en Herramientas para desarrolladores, consulta Lighthouse: Cómo optimizar la velocidad del sitio web.

Problemas de Chromium: 772558.

Mejoras de accesibilidad

Esta versión tiene las siguientes mejoras de accesibilidad:

  • Los lectores de pantalla ahora anunciarán el estado (marcado o desmarcado) de las casillas de verificación en Sources > Breakpoints.
  • Ahora puedes acceder al menú desplegable Ocultar problemas como este con el teclado.

Problemas de Chromium: 1488645, 1484918.

Otros aspectos destacados

Estas son algunas correcciones y mejoras notables de esta versión:

  • Rendimiento: Se corrigió el indicador LCP que a veces faltaba en la grabación (1487136).
  • Cargas especulativas: Se corrigieron las URLs completas de los destinos en el menú desplegable del panel Red (1471020).
  • Cobertura:
    • Se corrigió la cobertura línea por línea para el código impreso de forma legible (1464974).
    • La información de cobertura se actualizó cuando se volvió a cargar la página (1494457).
  • Consola:
    • Se corrigió la selección de texto parcial en los mensajes (1487449).
    • Se corrigió el parpadeo del menú desplegable de autocompletado (1487453).
    • Se admiten paréntesis en las rutas de pila y las URLs de los seguimientos de pila (1473926).
  • Sources: Se admite el resaltado de sintaxis de la palabra clave using de TypeScript (1490515).
  • El menú Quick Open ahora muestra los métodos privados (1492957).
  • Application > Background services: La barra de acción superior ahora une el texto cuando se cambia el tamaño (1487276).
  • Elementos > Estilos:
    • Se corrigió la resolución de las variables CSS heredadas para los elementos con ranuras (1492162).
    • Cuando se inhabilita una propiedad CSS, ahora se quitan sus comentarios para corregir las pausas de sintaxis (1101224).
  • Red: La columna Prioridad ahora muestra una información sobre herramientas con información sobre la prioridad inicial (se muestra lo mismo cuando se marca Big request rows) (1495735).
  • Bajas:
    • El parámetro de configuración Formato de color se inhabilitó en versiones anteriores y ahora se quitó.
    • La opción Borrar todas las anulaciones en Fuentes ahora se quitó debido al bajo uso después de la optimización de las anulaciones (1473681).

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 plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

Comunícate con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.

Novedades de DevTools

Una lista de todo lo que se analizó en la serie Novedades de DevTools.