Usa el nuevo menú contextual del panel DOM para editar nodos de manera eficiente. Debugea los trabajadores de servicios directamente a través del panel Recursos. Elige entre todos los tonos de Material Design en el selector de color. Bibliotecas de JS de caja negra con mayor facilidad.
Nuevo menú contextual mejorado del panel DOM
Analizamos las acciones más utilizadas en el panel DOM y concluimos que el menú contextual de clic derecho debe ser más organizado y despejado.
Ahora es mucho más fácil ocultar o borrar rápidamente un elemento, activar un estado determinado, como :active o :hover, o editar su código HTML. Si usas un panel táctil y no quieres hacer clic con el botón derecho, haz clic en los tres puntos junto al elemento seleccionado.
Cómo depurar service workers a través del panel Recursos
Los trabajadores del servicio son fantásticos una vez que los configuras, pero pueden ser difíciles de entender al principio. Esto se agravó por el hecho de que depurarlos requería salir de las Herramientas para desarrolladores y abrir chrome://serviceworker-internals/ en una nueva ventana del navegador.
Ya no. Ahora puedes depurar los trabajadores del servicio del dominio actual directamente desde el panel Recursos. Todavía es un trabajo en curso, pero ya es una gran mejora con respecto al statu quo anterior.
Todos los colores: tonos de material design en el selector de color
Hace unas semanas, agregamos la paleta de Material Design al selector de color para brindarte colores primarios y en negrita listos para usar. Para diseñar una página completa, inevitablemente necesitas acceso completo a todos los tonos de Material Design, por lo que los incorporamos.
Para mostrar los tonos, mantén presionado uno de los colores primarios y haz clic en un tono.
Bibliotecas de JavaScript de Blackbox con mayor facilidad en la configuración
El uso de JavaScript en el modo de caja negra existe desde hace tiempo, pero no era muy fácil de descubrir. Es una función que te permite convertir una secuencia de comandos en una caja negra en una página para enfocarte solo en tu código creado (y ocultar todo el código de unión).
Ahora la trasladamos a Configuración. Pruebe lo siguiente:
Lo mejor del resto
- ¿Falta el acceso a los botones de activación de renderización? La configuración de renderización se trasladó al menú principal de DevTools (en “Más herramientas”). Además de los sospechosos habituales (es decir, el medidor de FPS), también trasladamos allí la opción “Emular medios impresos”.
- ¿Te cansaste de escribir chrome://inspect en el cuadro multifunción? Inspeccionar dispositivos ahora también se puede encontrar en el nuevo menú principal, en “Más herramientas”.
- ¿Cerraste accidentalmente una de estas pestañas del panel lateral que se pueden cerrar, como Renderización o Búsqueda? Ahora puedes volver a abrirlas con el nuevo menú de la izquierda.
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