Novedades de Herramientas para desarrolladores (Chrome 79)

Kayce Basques
Kayce Basques

Nuevas funciones para cookies

Depura el motivo del bloqueo de una cookie

Después de registrar la actividad de red, selecciona un recurso de red y navega a la pestaña actualizada 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 por qué es posible que veas más cookies bloqueadas en Chrome 76 y versiones posteriores.

La pestaña Cookies.

La pestaña Cookies.

  • Las cookies de solicitud amarillas no se enviaron por cable. Estos están ocultos de forma predeterminada. Haz clic en Mostrar cookies de solicitud filtradas para verlas.
  • Las cookies de respuesta amarillas se enviaron por cable, pero no se almacenaron.
  • Coloca el cursor sobre More Information info para saber por qué se bloqueó una cookie.
  • La mayoría de los datos de las tablas de Solicitar cookies y Cookies de respuesta provienen de los encabezados HTTP del recurso. Los datos de Domain, Path y Expiration/Max-Age provienen del protocolo de Chrome Herramientas para desarrolladores.

Problemas de Chromium #856777 y #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 "prefieres de movimiento reducido".

La consulta de medios prefers-color-scheme te permite hacer coincidir el estilo de tu sitio con las preferencias de tus usuarios. 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 IUs en modo oscuro.

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

prefers-color-scheme: oscuro

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

También puedes simular prefers-reduced-motion: reduce con el menú desplegable Emulate CSS media feature prefers-reduced-motion junto al menú desplegable Emulate CSS media feature prefers-color-scheme.

Problema de Chromium #1004246

Emulación de zona horaria

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

Actualizaciones de la cobertura de código

En la pestaña Cobertura, puedes encontrar JavaScript y CSS sin usar.

La pestaña Cobertura ahora usa colores nuevos para representar el código usado y no usado. Se ha demostrado 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 no utilizado y la barra azulada de la derecha representa el código utilizado.

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 mostrar todos los tipos de cobertura.

La pestaña Cobertura

La pestaña Cobertura

El panel Sources muestra los datos de cobertura de 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 Cobertura y se destacará el archivo.

Datos de cobertura en el panel de fuentes

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

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 navega a la pestaña Initiator para comprender por qué se solicitó el recurso. En la sección Solicitud de pila de llamadas, se describe la pila de llamadas de JavaScript que conduce a la solicitud de red.

La pestaña Iniciador

La pestaña Initiator.

Problemas de Chromium 963183 y 842488

Los paneles de la consola y de fuentes vuelven a respetar las preferencias de sangría.

Durante mucho tiempo, Herramientas para desarrolladores ha tenido una configuración para personalizar tu preferencia de sangría en 2 espacios, 4 espacios, 8 espacios o pestañas. Recientemente, la configuración fue básicamente inútil porque los paneles Console y los paneles de fuentes ignoraban la configuración. Este error ya está corregido.

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

Problema de Chromium #977394

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

Presiona Control + P en el panel de la consola o del panel de fuentes para mover el cursor a la línea anterior. Presiona Control + N para mover el cursor a la línea que aparece debajo.

Problema de Chromium #983874

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   Más   > 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).

Novedades de Herramientas para desarrolladores

Una lista de todos los temas abordados en la serie Novedades de Herramientas para desarrolladores.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Se canceló Chrome 82.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59