Usa el nuevo menú contextual del panel DOM para editar nodos de manera eficiente. Depura los service workers directamente desde el panel Recursos. Elige entre todos los tonos de Material Design en el selector de color. Bibliotecas de JS de caja negra con mayor facilidad.
El nuevo menú contextual mejorado del panel DOM
Analizamos las acciones más usadas 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.
Depura los service workers desde el panel Recursos
Los service workers son fantásticos una vez que los configuras, pero puede ser complicado entenderlos desde el principio. Esto empeoró debido al hecho de que para depurarlos, era necesario salir de Herramientas para desarrolladores y abrir chrome://serviceworker-internals/ en una ventana nueva 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: matices de Material Design en el selector
Hace unas semanas, agregamos la paleta de Material Design al selector de color para ofrecerte 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 incluimos.
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? Ahora, la opción Inspeccionar dispositivos también se encuentra 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é opinas a través de Twitter o los comentarios a continuación, y envía los errores a crbug.com/new.
¡Hasta el próximo mes!
Paul Bakaus y el equipo de Herramientas para desarrolladores