Novedades de Herramientas para desarrolladores (Chrome 120)

Eliminación gradual de las cookies de terceros

Es posible que tu sitio use cookies de terceros, por lo que es hora de tomar medidas, ya que pronto se darán de baja. Para saber qué hacer con las cookies afectadas, consulta Preparación para el fin de las cookies de terceros.

La 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 de las cookies de terceros. Puedes desmarcar la casilla de verificación en cualquier momento para dejar de ver estos 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 se encuentra en desarrollo activo con la versión preliminar más reciente 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 sola pestaña para obtener el mejor análisis.
3. Abre DevTools y navega al panel Privacy Sandbox. Es posible que este panel esté oculto detrás del botón de menú desplegable en la parte superior.
4. Abre la sección Cookies y haz clic en Analyze this tab. Si la herramienta no encontró ninguna cookie, vuelve a cargar la página.

Para obtener más información sobre cómo usar Privacy Sandbox Analysis Tool (PSAT), consulta lo siguiente:

• PSAT's How To.
• Para predecir lo que probablemente sucederá una vez que la baja entre en vigencia, configura un entorno de evaluación.
• Para identificar los aspectos que se verán afectados, consulta Acciones de análisis generales.
• Para obtener información sobre cómo analizar situaciones comunes, como análisis, comercio electrónico, servicios de SSO, contenido incorporado y mucho más, consulta los ejemplos de demostración en Situaciones de análisis.

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 > Lista de ignorados. Para ayudarte a enfocarte solo en tu código, el Debugger 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.

Error de Chromium: 1496301.

Ahora, las excepciones detienen la ejecución si se detectan o pasan por código no ignorado.

Cuando depuras código con la opción Pausar en excepciones detectadas marcada, el Depurador ahora detiene la ejecución en las siguientes excepciones detectadas, tanto síncronas como asíncronas:

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

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

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

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

Problemas de Chromium: 1489312 y 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 nuevo nombre con una alternativa para el anterior. Los frameworks y los bundlers 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 reducido que publica tu sitio web.

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

• ¿Qué son los mapas de origen?
• Depura tu código original en lugar del implementado con mapas de origen

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

Ahora puedes alternar entre la entrada táctil y la 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 cómo se activa y desactiva el modo de entrada.

Error de Chromium: 1410433.

El panel Elementos ahora muestra URLs para los nodos #document

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

Error de Chromium: 1376976.

Política de Seguridad del Contenido vigente en el panel Aplicación

Ahora puedes ver los detalles de la Política de Seguridad del Contenido (CSP) de un frame 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).

Error de Chromium: 1424714.

Se mejoró la depuración de animaciones

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

• Haz clic en cualquier parte del encabezado de la línea de tiempo para establecer el cabezal de reproducción. La animación continúa reproduciéndose si ya se estaba reproduciendo y se detiene en caso contrario. Anteriormente, tenías que arrastrarlo.
• Cambia el tamaño de la columna de nombres para ver los nombres completos de las animaciones.

Problemas de Chromium: 1492460 y 1489721.

Diálogo "¿Confías en este código?" en Sources y advertencia de XSS propio en Console

Se habilitó de forma predeterminada el experimento Mostrar advertencia sobre Self-XSS cuando se pega código . El XSS propio (secuencias de comandos entre sitios propias) es un ataque que te engaña para que pegues código malicioso en Herramientas para desarrolladores y permite que un atacante obtenga el control de tus cuentas web y tu información personal.

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

Error de Chromium: 345205.

Puntos de interrupción del objeto de escucha de eventos en Web Workers y worklets

Cuando estableces un punto de interrupción de eventos en Fuentes > Puntos de interrupción de detectores de eventos, además de detenerse en este evento en tu sitio web, el Depurador ahora también se detiene cuando el evento correspondiente ocurre en un trabajador web o worklet de cualquier tipo, incluido el worklet de Shared Storage.

Error de Chromium: 1445175.

La nueva insignia de medios para <audio> y <video>

Ahora puedes habilitar la nueva insignia de medios para los elementos <audio> y <video> en el panel Elementos. Cuando haces clic en la insignia, se te dirige al panel de medios para que puedas depurar estos elementos.

Esta función está en desarrollo y se mejorará aún más. El equipo de Herramientas para desarrolladores desea expresar su gratitud a Junseo (Jeremy) Yoo por implementar esta mejora.

Error de Chromium: 1448214.

Se cambió el nombre de la precarga 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 especulativas que puedes definir para que tu sitio web renderice previamente y obtenga previamente las páginas a las que se navega con mayor frecuencia.

Error de Chromium: 1478888.

Lighthouse 11.2.0

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

Esta actualización incluye una revisión general de la categoría de rendimiento. Las estadísticas de rendimiento ahora se califican y priorizan según su impacto estimado en las métricas de rendimiento. Además, el indicador del puntaje de rendimiento incluye información más detallada sobre cómo cada métrica afecta el puntaje.

Para conocer los conceptos básicos del uso del panel Lighthouse en las Herramientas para desarrolladores, consulta Lighthouse: Optimiza la velocidad del sitio web.

Error de Chromium: 772558.

Mejoras de accesibilidad

Esta versión incluye las siguientes mejoras de accesibilidad:

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

Problemas de Chromium: 1488645 y 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 Network (1471020).
• Cobertura:
  • Se corrigió la cobertura línea por línea para el código con formato (1464974).
  • La información de cobertura ahora se actualiza cuando se vuelve a cargar la página (1494457).
• Consola:
  • Se corrigió la selección parcial de texto en los mensajes (1487449).
  • Se corrigió el parpadeo del menú desplegable de autocompletar (1487453).
  • Se admiten paréntesis en las rutas de la pila y las URLs en los seguimientos de pila (1473926).
• Fuentes: Se admitió el resaltado de sintaxis de la palabra clave using de TypeScript (1490515).
• El menú Apertura rápida ahora muestra métodos privados (1492957).
• Aplicación > Servicios en segundo plano: La barra de acción superior ahora ajusta el texto cuando se cambia el tamaño (1487276).
• Elements > Styles:
  • Se corrigió la resolución de las variables CSS heredadas para los elementos ranurados (1492162).
  • Cuando se inhabilita una propiedad de CSS, ahora se quitan sus comentarios para corregir las interrupciones de sintaxis (1101224).
• Red: La columna Prioridad ahora muestra una sugerencia con información sobre la prioridad inicial (se muestra la misma información cuando se marca Filas de solicitudes grandes) (1495735).
• Obsolescencias:
  • El parámetro de configuración Formato de color se inhabilitó en versiones anteriores y ahora se quitó.
  • Se quitó la opción Delete all overrides de Sources debido a su 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 vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

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

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de Herramientas para desarrolladores con more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Envía un tuit a @ChromeDevTools.
• Deja comentarios en los videos de Novedades de las Herramientas para desarrolladores de YouTube o en los videos de Sugerencias sobre las Herramientas para desarrolladores de YouTube.

Novedades de Herramientas para desarrolladores

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