Novedades de Herramientas para desarrolladores (Chrome 120)

Sofia Emelianova
Sofia Emelianova

Eliminación gradual de las cookies de terceros

Es posible que tu sitio use cookies de terceros, y es hora 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 los problemas de las cookies de terceros se habilitó 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 próxima baja y 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 DevTools está en desarrollo activo con la versión preliminar 0.3.2 más reciente. 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, sigue estos pasos:

  1. Instala la extensión en Chrome.
  2. Abre tu sitio web en una sola pestaña para obtener un mejor análisis.
  3. Abre DevTools 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 lo siguiente:

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 Pause on caught exceptions de Casilla de verificación. marcada, el depurador 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
  • Se detectaron excepciones que pasan por marcos no ignorados en la pila de llamadas. Por ejemplo, consulta 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 DevTools > Sources, agrega la carpeta hidden a la lista de elementos ignorados y marca Casilla de verificación. Pause on caught exceptions.
  2. En la página, en la lista de situaciones "Caught", 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 verifican) en llamadas asíncronas, el depurador busca controladores de rechazo en todas 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.

La especificación de mapas de origen adoptó el campo ignoreList en lugar de x_google_ignoreList, y DevTools 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 origen te permiten depurar el código que escribiste en lugar del código minificado que entrega tu sitio web.

Para obtener más información sobre los mapas de origen, consulta los siguientes recursos:

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.

Error 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 Aplicación > Marcos, selecciona un marco y desplázate hacia abajo hasta la sección Política de seguridad del contenido (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 Animaciones, 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. Antes, 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 obtenga el control de tus cuentas web y tu información personal.

Si eres un usuario nuevo de DevTools y tratas de pegar código, el panel Sources ahora te muestra el diálogo Do you trust this code? y la Console 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

Error de Chromium: 345205.

Puntos de interrupción del objeto de escucha de eventos en los trabajadores web y los 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.

El depurador se detuvo cuando un service worker llamó a la función set timeout.

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á aún más. El equipo de DevTools quiere expresar su gratitud a Junseo (Jeremy) Yoo por realizar esta mejora.

Error de Chromium: 1448214.

Se cambió el nombre de la carga previa a Carga especulativa

Para evitar el uso excesivo del término anterior y reflejar mejor el comportamiento, se cambió el nombre de Application > Preloading a Speculative loads. 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. Las estadísticas de rendimiento ahora se puntúan y se 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 conocer los aspectos básicos del uso del panel Lighthouse en DevTools, consulta Lighthouse: Optimiza 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 de las correcciones y mejoras más importantes de esta versión:

  • Rendimiento: Se corrigió el indicador de 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 ahora se actualiza cuando se vuelve 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).
  • Fuentes: Se admiten los textos destacados de sintaxis de la palabra clave using de TypeScript (1490515).
  • El menú Quick Open ahora muestra 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.