Novedades de Herramientas para desarrolladores (Chrome 79)

Kayce Basques
Kayce Basques

Nuevas funciones para cookies

Depura por qué se bloqueó una cookie

Después de registrar la actividad de red, selecciona un recurso de red y navega hasta la red La pestaña Cookies 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 los motivos por los que podrías ver más cookies bloqueadas en Chrome 76 y versiones posteriores.

La pestaña Cookies

La pestaña Cookies.

  • No se enviaron las cookies de solicitud amarillas. Están ocultos de forma predeterminada. Haz clic en Mostrar cookies de solicitud filtradas para mostrarlas.
  • Se enviaron cookies de respuesta amarillas, pero no se almacenaron.
  • Desplázate sobre Más información. información para saber por qué se usa una cookie se bloqueó.
  • La mayoría de los datos de las tablas Request Cookies y Response Cookies provienen de la encabezados HTTP del recurso. Los datos de Dominio, Ruta de acceso y Vencimiento/Máxima edad provienen de la Protocolo de las Herramientas para desarrolladores de Chrome.

Problemas de Chromium #856777, #993843

Ver los valores de las cookies

Haz clic en una fila del Panel de cookies para ver el valor de esa cookie.

Ver el valor de una cookie

Ver el valor de una cookie

Problema de Chromium #462370

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

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

Abre el menú de comandos, ejecuta el comando Show Rendering y, luego, configura Emulate CSS media del menú desplegable prefers-color-scheme para depurar tus prefers-color-scheme: dark y prefers-color-scheme: light estilos.

prefers-color-scheme: oscuro

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

También puedes simular prefers-reduced-motion: reduce con la función Emula contenido multimedia de CSS Menú desplegable prefers-reduced-motion junto a Emulate CSS media feature prefers-color-scheme menú desplegable.

Problema de Chromium #1004246

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 y probar el impacto en tus apps web. Sorprendentemente, esta nueva función mejora el la confiabilidad de la emulación de la ubicación geográfica: antes, las aplicaciones web podían detectar la falsificación de identidad de la ubicación mediante que coincida con la zona horaria local del usuario. Ahora que la ubicación geográfica y la emulación de zona horaria de coincidencia se acoplan, se elimina esta categoría de discrepancias.

Actualizaciones de cobertura de código

En la pestaña Cobertura, puedes encontrar JavaScript y CSS que no uses.

La pestaña Cobertura ahora usa colores nuevos para representar el código usado y no utilizado. Esta combinación de colores es demostró ser 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 azul de la derecha representa el código usado.

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

La pestaña Cobertura.

La pestaña Cobertura.

En el panel Sources, se muestran los datos de cobertura de código cuando están disponibles. Hacer clic en las marcas rojas o azules que se encuentra al lado del número de línea abre la pestaña Cobertura y destaca el archivo.

Datos de cobertura en el panel Sources.

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, #1004185

Depurar 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 Initiator. para comprender por qué se solicitó el recurso. En la sección Solicitar pila de llamadas, se describen las Pila de llamadas de JavaScript que conduce a la solicitud de red

La pestaña Initiator

La pestaña Initiator.

Problemas de Chromium 963183, 842488

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

Durante mucho tiempo, Herramientas para desarrolladores tuvo una configuración para personalizar tu preferencia de sangría a 2 espacios (4) espacios, 8 espacios o tabulaciones. Recientemente, el parámetro de configuración resultó inútil porque la consola y Los paneles de fuentes ignoraban el parámetro de configuración. Este error ya se solucionó.

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

Problema de Chromium #977394

Nuevas combinaciones de teclas para la navegación del cursor

Presiona Control + P en la consola o en los paneles de fuentes para mover el cursor a la línea superior. Presiona Control + N para mover el cursor a la línea que aparece a continuación.

Problema de Chromium #983874

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 plataformas 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.
  • Informa un problema en Herramientas para desarrolladores con Más opciones   Más > Ayuda > Informa 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.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.