Se usó la API de Cloud Translation para traducir esta página.

Novedades de Herramientas para desarrolladores (Chrome 120)

Sofia Emelianova

Eliminación gradual de las cookies de terceros

Es posible que tu sitio utilice cookies de terceros, por lo que 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 Cómo prepararse para el fin de las cookies de terceros.

La casilla de verificación Incluir problemas relacionados con las cookies de terceros está habilitada de forma predeterminada para todos los usuarios de Chrome. Por lo tanto, 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 desmarcar la casilla de verificación en cualquier momento para dejar de ver estos problemas.

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

Problema de Chromium: 1466310.

Analiza las cookies de tu sitio web con la herramienta de análisis de Privacy Sandbox

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

Para analizar tus cookies, haz lo siguiente:

Instala la extensión en Chrome.
Abra su sitio web en una sola pestaña para realizar un mejor análisis.
Abre Herramientas para desarrolladores y navega al panel Privacy Sandbox. Este panel podría estar oculto detrás del botón desplegable en la parte superior.
Abre la sección Cookies y haz clic en Analizar esta pestaña. Si la herramienta no encontró ninguna cookie, intenta volver a cargar la página.

La herramienta de análisis de Privacy Sandbox

Si deseas obtener más información para usar la herramienta de análisis de Privacy Sandbox (PSAT), consulta los siguientes vínculos:

Instructivos de PSA.
Para predecir lo que es probable que suceda una vez que entre en vigencia la baja, configura un Entorno de evaluación.
Para identificar los aspectos que se verán afectados, consulta Acciones de análisis general.
Para aprender a analizar situaciones comunes, como estadísticas, 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 para informar problemas.

Ficha de elementos ignorados mejorada

Patrón de exclusión predeterminado para `node_modules`

Esta versión habilita la expresión regular predeterminada como regla de exclusión personalizada en Configuración > Lista de omisión. Para que puedas 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 cualquier momento desde Configuración.

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

Problema de Chromium 1496301.

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

Cuando depuras el código con la marca Pause on detected excepciones marcada, Debugger ahora detiene la ejecución en las siguientes excepciones detectadas, tanto síncronas como asíncronas:

Excepciones capturadas en marcos no ignorados de la pila de llamadas.
Se capturaron excepciones que pasan a través de marcos no ignorados en la pila de llamadas. Por ejemplo, mira la captura de pantalla.

Haz una pausa en una excepción detectada que pasó a través de código no ignorado.

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

Abre Herramientas para desarrolladores > Fuentes, agrega la carpeta hidden a la lista de elementos ignorados y marca Pausar en excepciones detectadas.
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 las llamadas asíncronas, Debugger busca controladores de rechazo en las promesas. A partir de esta versión, Debugger 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 orígenes

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

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 origen, 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 la del mouse cuando depures 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 esta red de destino mediante chrome://inspect/#devices.

Mira el video para ver cómo se activa el modo de entrada de texto.

Problema de Chromium 1410433.

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

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

El antes y el después muestran documentURL junto al nodo #document.

Problema de Chromium: 1376976.

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

Ahora puedes ver los detalles de la Política de Seguridad del Contenido (CSP) de un fotograma 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 ubicada en la pestaña Aplicación

Problema de Chromium 1424714.

Depuración de animación 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 se sigue reproduciendo si ya se estaba reproduciendo y, de lo contrario, se detiene. Anteriormente, debías arrastrarla.
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 Fuentes y en la advertencia de auto-XSS en la consola

El experimento de Mostrar advertencia sobre Self-XSS al pegar código se habilitó de forma predeterminada. Self-XSS (secuencia de comandos entre sitios propios) es un ataque que te engaña para pegar 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 Sources ahora te mostrará el diálogo Do you trust this code? y la Console mostrará una advertencia similar. Pega solo el código que entiendes y que revisaste tú mismo. Para pegar, escribe allow pasting cuando se te solicite. Una vez que se haya permitido el pegado, la advertencia no se mostrará nunca más.

El cuadro de diálogo "¿Confias en este código?" cuando pegas el código en Sources.

Problema de Chromium: 345205.

Interrupciones de 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 pausar este evento en tu sitio web, Debugger ahora también hace una pausa cuando el evento correspondiente ocurre en un trabajador web o un worklet de cualquier tipo, incluido el Worklet de almacenamiento compartido.

Se pausó el depurador cuando un service worker llama a la función set timeout.

Problema de Chromium 1445175.

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

Ahora puedes habilitar la nueva insignia de contenido multimedia para los elementos <audio> y <video> en el panel Elementos. Cuando hagas clic en la insignia, accederás al panel Contenido multimedia, donde podrás depurar estos elementos.

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

Problema 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 Aplicación > Precarga a Cargas especulativas. La carga especulativa permite cargar páginas casi instantáneas según las reglas de especulación que puedes definir para que tu sitio web realice un procesamiento previo y una carga previa de la mayoría de las páginas a las que se accedió.

El antes y el después de cambiar el nombre de la precarga en carga especulativa.

Problema 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 mejora en 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 nivel de rendimiento incluye información más detallada sobre cómo cada métrica afecta la puntuación.

Revisión del rendimiento anterior y posterior

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

Problemas 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 este con el teclado.

Problemas de Chromium: 1488645 y 1484918.

Otros aspectos destacados

Estas son algunas 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 con impresión (1464974).
- Se actualizó la información de cobertura 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 autocompletar (1487453).
- Se admiten paréntesis en rutas de pila y URLs en seguimientos de pila (1473926).
Fuentes: Se admite el resaltado de sintaxis de la palabra clave using de TypeScript (1490515).
El menú de Quick Open ahora muestra métodos privados (1492957).
Aplicación > Servicios en segundo plano: La barra de acciones superior ahora une el texto cuando se cambia el tamaño (1487276).
Elements > Styles:
- Se corrigió la resolución de las variables de CSS heredadas para los elementos ranuras (1492162).
- Cuando se inhabilita una propiedad de CSS, se quitan los comentarios para corregir las fallas de sintaxis (1101224).
Red: En la columna Prioridad ahora se muestra información sobre la prioridad inicial (lo mismo se muestra cuando se marcan las Filas de solicitud grande) (1495735).
Bajas:
- El parámetro de configuración Formato de color se inhabilitó en las versiones anteriores y ahora se quitó.
- La opción Borrar todas las anulaciones de Fuentes ahora se quitó debido al poco uso después de la optimización de anulaciones (1473681).

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

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

Envíanos tus sugerencias o comentarios a través de crbug.com.
Informa un problema en Herramientas para desarrolladores mediante Más opciones > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
Envía un tweet a @ChromeDevTools.
Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).