Novedades de Herramientas para desarrolladores (Chrome 79)

Kayce Basques

Nuevas funciones para las cookies

Depura por qué se bloqueó una cookie

Después de registrar la actividad de red, selecciona un recurso de red y, luego, navega a la pestaña Cookies actualizada para comprender por qué se bloquearon las cookies de solicitud o respuesta de ese recurso. Consulta Cambios en el comportamiento predeterminado sin SameSite para comprender por qué es posible que veas más cookies bloqueadas en Chrome 76 y versiones posteriores.

La pestaña Cookies

• No se enviaron cookies de solicitud amarillas a través del cable. Están ocultos de forma predeterminada. Haz clic en mostrar las cookies de solicitud que se filtraron para mostrarlas.
• Las cookies de respuesta amarillas se enviaron por cable, pero no se almacenaron.
• Coloca el cursor sobre Más información para saber por qué se bloqueó una cookie.
• La mayoría de los datos de las tablas Cookies de solicitud y Cookies de respuesta provienen de los encabezados HTTP del recurso. Los datos de Dominio, Ruta de acceso y Vencimiento/Max-Age provienen del protocolo de Herramientas para desarrolladores de Chrome.

Problemas de Chromium #856777 y #993843

Cómo ver los valores de las cookies

Haz clic en una fila del panel Cookies para ver el valor de esa cookie.

Visualizar el valor de una cookie

Error #462370 de Chromium

Simula diferentes preferencias de prefers-color-scheme y prefers-reduced-motion

La consulta de medios prefers-color-scheme te permite adaptar el estilo de tu sitio a las preferencias del usuario. Por ejemplo, si la consulta de medios prefers-color-scheme: dark es verdadera, significa que el usuario configuró su sistema operativo en modo oscuro y prefiere las IU en modo oscuro.

Abre el Menú de comandos, ejecuta el comando Mostrar renderización y, luego, configura el menú desplegable Emular prefers-color-scheme de la función de medios de CSS para depurar tus estilos prefers-color-scheme: dark y prefers-color-scheme: light.

Cuando se establece prefers-color-scheme: dark (cuadro central), el panel Styles (cuadro derecho) muestra el CSS que se aplica cuando esa consulta de medios es verdadera y la ventana gráfica muestra los estilos del modo oscuro (cuadro izquierdo).

También puedes simular prefers-reduced-motion: reduce con el menú desplegable Emular la función de medios de CSS prefers-reduced-motion junto al menú desplegable Emular la función de medios de CSS prefers-color-scheme.

Error #1004246 de Chromium

Emulación de zona horaria

La pestaña Sensores ahora te permite no solo anular la ubicación geográfica, sino también emular zonas horarias arbitrarias y probar el impacto en tus apps web. Quizás te sorprenda saber que esta nueva función también mejora la confiabilidad de la emulación de la ubicación geográfica: anteriormente, las apps web podían detectar la suplantación de ubicación comparando la ubicación con la zona horaria local del usuario. Ahora que la emulación de la ubicación geográfica y la zona horaria están vinculadas, se elimina esta categoría de discrepancias.

Actualizaciones de la cobertura de código

La pestaña Cobertura puede ayudarte a encontrar código JavaScript y CSS sin usar.

La pestaña Coverage ahora usa colores nuevos para representar el código usado y el no usado. Se demostró que esta combinación de colores es más accesible para las personas con deficiencias en la visión de los colores. La barra roja de la izquierda representa el código sin usar, y la barra azulada de la derecha representa el código usado.

El nuevo cuadro de texto del filtro de tipo de cobertura te permite filtrar la información de cobertura por su tipo: mostrar solo la cobertura de JavaScript, solo la de CSS o mostrar todos los tipos de cobertura.

La pestaña Cobertura

El panel Sources muestra los datos de cobertura del código cuando están disponibles. Si haces clic en las marcas rojas o azuladas junto al número de línea, se abrirá la pestaña Coverage y se destacará el archivo.

Datos de cobertura en el panel Sources La línea 8 es un ejemplo de código sin usar. La línea 11 es un ejemplo de código utilizado.

Problemas de Chromium #1003671 y #1004185

Depura por qué se solicitó un recurso de red

Después de registrar la actividad de red, selecciona un recurso de red y, luego, navega a la pestaña Iniciador para comprender por qué se solicitó el recurso. En la sección Solicitar pila de llamadas, se describe la pila de llamadas de JavaScript que conduce a la solicitud de red.

La pestaña Iniciador

Problemas de Chromium 963183 y 842488

Los paneles Console y Sources vuelven a respetar las preferencias de sangría

Durante mucho tiempo, las Herramientas para desarrolladores tuvieron un parámetro de configuración para personalizar tu preferencia de sangría en 2, 4 u 8 espacios, o bien en tabulaciones. Recientemente, el parámetro de configuración era prácticamente inútil porque los paneles de la consola y de Sources lo ignoraban. Ya se corrigió este error.

Ve a Configuración > Preferencias > Fuentes > Sangría predeterminada para establecer tu preferencia.

Error de Chromium #977394

Nuevas combinaciones de teclas para la navegación con el cursor

Presiona Control + P en los paneles Console o Sources para mover el cursor a la línea anterior. Presiona Control + N para mover el cursor a la línea siguiente.

Error de Chromium #983874

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