Este mes, Chrome Canary estuvo repleto de funciones. Sigue leyendo para saber qué secuencias de comandos de terceros causan problemas de rendimiento en tu sitio con los detalles agregados en la línea de tiempo, cómo elegir colores coherentes con la nueva paleta de colores, cómo simular una red Wi-Fi de conferencia con perfiles de red personalizables y cómo aprovechar al máximo la IU de DevTools con el nuevo menú principal y mejores cuadros de información.
Mejor asignación de problemas de rendimiento: Detalles agregados en Rutas
En los sitios web actuales, usamos cada vez más píxeles contadores, servicios de análisis, redes sociales, carga de fuentes y publicidad de terceros, a veces demasiados. Para garantizar que esto no suceda y brindarte visibilidad sobre el problema, incorporaremos detalles agregados al cronograma.
En la pestaña Detalles agregados, puedes enfocarte solo en las funciones costosas o en todo el árbol de llamadas y, luego, desglosar los datos seleccionados por dominio, subdominio o URLs distintas. Por ejemplo, en el cronograma anterior de una carga de página, ahora puedes atribuir las ralentizaciones fácilmente a secuencias de comandos de terceros que provienen de dominios como facebook.net o twitter.com.
Nuevo menú principal exclusivo
Para ordenar la barra de herramientas principal, trasladamos el panel lateral, los íconos de configuración y de conexión a un nuevo menú principal exclusivo.
En particular, la conexión a la estación de carga es mucho más sencilla. En lugar de tener que mantener presionado el ícono anterior, cada posición de conexión tiene su propio ícono.
Además de la conexión en la estación de carga, agregamos la búsqueda de archivos de acceso rápido, combinaciones de teclas y ayuda (que te dirige a nuestra nueva página principal).
Descubre Herramientas para desarrolladores a través de sugerencias de herramientas mejoradas
Tenemos muchos botones en Herramientas para desarrolladores y sabemos que no todos son autoexplicativos. Ahora es más fácil descubrir acciones y sus atajos, ya que reemplazamos las indicaciones de herramientas nativas del sistema por indicaciones de herramientas personalizadas y coherentes con la plataforma.
Las nuevas indicaciones sobre herramientas aparecen mucho más rápido y, además, incluyen combinaciones de teclas (si las hay).
Crea perfiles de limitación de la red personalizados
Si las opciones predeterminadas del limitador de red son demasiado limitantes para tus casos de uso y necesitas una opción de “Wi-Fi para conferencias” o, por nostalgia, quieres usar un método antiguo y emular una línea “110 baudios”, tenemos buenas noticias. Agregamos un nuevo panel de configuración que te permite hacer cualquiera de esas acciones.
Paletas de colores automáticas, de Material y personalizadas
Ya sea que quieras recrear los colores de la magia o trabajar con una paleta de colores existente, el selector de colores mejorado te ayuda a elegir una paleta de colores coherente para tu sitio.
Si haces clic en el ícono de interruptor junto a la paleta, puedes elegir entre las siguientes opciones:
- Colores de la página: Esta paleta se genera automáticamente a partir de los colores que encontramos en tu CSS, por lo que es una excelente opción si extiendes un sitio existente.
- Material Design: La paleta de Material Design ofrece colores hermosos listos para usar y es una opción ideal cuando se inicia un proyecto nuevo. En este momento, encontrarás todos los colores primarios, pero pronto agregaremos todos los tonos.
- Personalizado: Es tu propio campo de pruebas. Para agregar colores nuevos, elige uno en el selector y, luego, haz clic en el ícono de signo más junto a la paleta. Para cambiar el orden, arrástralas y haz clic con el botón derecho para ver más opciones, como quitar.
Cuéntanos qué opinas y cómo podríamos ampliar la historia de los colores.
Lo mejor del resto
- Las solicitudes realizadas con la API de fetch() ahora se muestran en el panel de red.
- El diseño automático de paneles garantiza que, cuando cambies el tamaño de los paneles de DevTools
, estos se adapten a las nuevas restricciones de espacio. - Inspeccionar elemento y modo de dispositivo tiene un conjunto de íconos nuevos.
- Los atributos del panel DOM ahora tienen un color diferente, incluso cuando el nodo está resaltado. (Antes eran todos blancos).
- Los elementos ocultos (que se activan presionando "h" en un nodo DOM seleccionado) ahora muestran un indicador de círculo gris a la izquierda, y los puntos de interrupción del DOM hacen lo mismo con un círculo azul. (Esto es similar a los indicadores naranjas que ya tenemos para forzar un estado de elemento como :hover).
Como siempre, cuéntanos qué piensas en Twitter o en los comentarios a continuación, y envía errores a crbug.com/new.
¡Hasta el próximo mes!
Paul Bakaus y el equipo de DevTools