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 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 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 próxima 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 próxima baja de las cookies de terceros en la pestaña Problemas.

Problema 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 proporciona orientación sobre las nuevas APIs de Chrome que preservan la privacidad.

Para analizar las cookies, haz lo siguiente:

Instala la extensión en Chrome.
Abre tu sitio web en una pestaña para realizar un mejor análisis.
Abre Herramientas para desarrolladores y navega al panel Privacy Sandbox. Es posible que este panel esté 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.

Privacy Sandbox Analysis Tool.

Si deseas obtener más información para usar Privacy Sandbox Analysis Tool (PSAT), consulta lo siguiente:

Instructivo de PSAT.
Para predecir lo que es probable que suceda 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 aprender a analizar situaciones comunes, como estadísticas, comercio electrónico, servicios de SSO, contenido incorporado y mucho más, consulta las demostraciones de ejemplos en Situaciones de análisis.

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

Fichas ignoradas mejoradas

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 elementos ignorados. Para que puedas enfocarte solo en tu código, Debugger ahora omitirá las secuencias de comandos de /node_modules/ y /bower_components/ de forma predeterminada. Puedes inhabilitar esta regla en cualquier momento desde la 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 código no ignorado

Cuando depuras código con la opción Pause on Opportunities 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.
Excepciones capturadas que pasan por marcos no ignorados en la pila de llamadas. Por ejemplo, mira la captura de pantalla.

Detener una excepción detectada que pasó por 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 "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 Debugger ya no predice que Promise.finally() detectará una excepción, de forma similar a como el bloque try...finally no detecta ninguna.

Problemas de Chromium: 1489312, 1291064.

Se cambió el nombre de `x_google_ignoreList` por `ignoreList` en los mapas de fuentes

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 agrupadores 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 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 a través de chrome://inspect/#devices.

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

Problema de Chromium: 1410433.

En el panel Elements, ahora se muestran las URLs de `#document` nodos

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

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

Problema de Chromium: 1376976.

Política de Seguridad de Contenido Efectiva en el panel Aplicaciones

Ahora puedes ver los detalles de la Política de Seguridad del Contenido (CSP) de un fotograma inspeccionado. Para ver los detalles, navega a Application > Frames, 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 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 se sigue reproduciendo si ya se estaba reproduciendo y, de lo contrario, se detiene. 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, 1489721.

Diálogo “Do you trust this code?” (¿Confías en este código?) en la sección Fuentes y la advertencia de autogeneración de mensajes XSS en la consola.

El experimento Mostrar advertencia sobre Auto-XSS cuando se pega el código está habilitado de forma predeterminada. Self-XSS (autosecuencia de comandos entre sitios) es un ataque que te engaña para que pegues código malicioso en Herramientas para desarrolladores y le permite a un atacante obtener 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 entiendes y que has revisado. Para pegarlo, escribe allow pasting cuando se te solicite. Una vez que se haya permitido el pegado una vez, la advertencia no se volverá a mostrar.

El diálogo "¿Confies en este código?" cuando pegues el código en Sources.

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

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

Problema de Chromium: 1445175.

La nueva insignia de medios 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 esos elementos.

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 realice una renderización previa y una carga previa de la mayoría de las páginas a las que se navega.

El antes y después del cambio de nombre de la precarga en carga especulativa.

Problema de Chromium: 1478888.

Lighthouse 11.2.0

El panel de Lighthouse ahora ejecuta Lighthouse 11.2.0. Consulte 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 indicador de puntuación de rendimiento incluye información más detallada sobre cómo cada métrica afecta la puntuación.

Renovación del rendimiento anterior y posterior

Para aprender los conceptos básicos del uso del panel 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 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, 1484918.

Otros aspectos destacados

Estas son algunas correcciones y mejoras notables en 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 con formato estilístico (1464974).
- La información de cobertura se actualizó cuando se volvió 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).
- Paréntesis admitidos en rutas de pila y URL en seguimientos de pila (1473926).
Sources: 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 acciones superior ahora ajusta el texto cuando se cambia el tamaño (1487276).
Elementos > Estilos:
- Se corrigió la resolución de las variables de CSS heredadas para elementos con ranuras (1492162).
- Cuando se inhabilita una propiedad de CSS, ahora se quitan sus comentarios para corregir las fallas de sintaxis (1101224).
Red: Ahora en la columna Prioridad se muestra un cuadro de información con información sobre la prioridad inicial (se muestra lo mismo cuando se marca la opción Filas de solicitud grandes) (1495735).
Bajas:
- El parámetro de configuración Formato de color se inhabilitó en versiones anteriores y ahora se quitó.
- Ahora se quitó la opción Borrar todas las anulaciones de Fuentes debido al poco 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 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 plataforma 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.
Para informar un problema de Herramientas para desarrolladores, use Más opciones > Ayuda > Informar 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.