Hoy en día, no hay mucho que no puedas hacer con las tecnologías web. La plataforma web ha evolucionado tanto que cosas tan diversas como animar elementos, reproducir o grabar medios, acceder a archivos o almacenamiento, interceptar solicitudes de red y acceder al caché, hacer diseños CSS complejos o escribir código nativo son posibles hoy en día.
Con tanto que aprender y usar, los desarrolladores web necesitan un conjunto completo de herramientas en las que puedan confiar.
Afortunadamente, Microsoft Edge viene con herramientas de desarrollo que hacen posible que los desarrolladores web sean productivo con las funciones web y las API. No importa lo que esté haciendo, lo más probable es que haya una herramienta dedicada que pueda ayudarlo.
La otra cara de la moneda, sin embargo, es que las DevTools tienden a ser bastante complicadas. Contienen más de 30 herramientas diferentes y la interfaz de usuario ha crecido con el tiempo para adaptarse a ellas. Además, constantemente se agregan nuevas funciones en respuesta a los comentarios que recibimos de los usuarios.
En esta publicación, le presentaremos nuevas funciones en Microsoft Edge DevTools que ayudan a que las herramientas más accesible y personalizable, para que pueda comenzar a enfrentar el desafío de tener tantas herramientas diferentes a su disposición. También puede obtener más información sobre estas funciones en el siguiente video.
DevTools está evolucionando rápidamente en todos los navegadores: para manténgase actualizado con lo último en otros navegadores, consulte mi artículo en Smashing Magazine cubriendo las nuevas funciones de DevTools en Microsoft Edge, Google Chrome, Mozilla Firefox y Safari.
Abrir, cerrar y mover herramientas
Si bien DevTools tiene alrededor de 30 herramientas separadas, es poco probable que necesitará acceder a más de un puñado de ellos al mismo tiempo, y mucho menos a 30. Por lo tanto, es muy importante tener una forma de abrir herramientas fácilmente cuando las necesite y cerrarlas cuando no.
Al mismo tiempo, puede haber herramientas que nunca haya usado antes que podrían ser muy útiles. Si están cerrados de forma predeterminada, es posible que nunca los descubras.
Agregamos tres características pequeñas, pero muy potentes, de DevTools para abordar esto.
Herramientas de cierre
Las pestañas en Microsoft Edge DevTools ahora tienen un botón de cierre que se puede usar para ocultar los que ya no necesita. Por lo tanto, puede mantener una interfaz de usuario limpia y simple, y solo tener disponibles las herramientas que necesita en este momento.
Tenga en cuenta que algunas herramientas no tienen un botón de cierre: Elementos, Consola y Fuentes. Esas herramientas se utilizan mucho más que todas las demás. Los desarrolladores web las necesitan en todo momento, y cerrarlas no tiene mucho sentido.
Abrir herramientas
Ahora hay un botón + (más) al final de la barra de pestañas para abrir cualquier herramienta que aún no esté abierta.
Anteriormente, para descubrir todas las herramientas disponibles, había que ir al menú principal (…), y luego seleccionar Más herramientas, o saber cómo usar las menú de comandos para acceder a las herramientas rápidamente. El botón + hace que descubrir y acceder a otras herramientas sea mucho más fácil.
Puede haber dos barras de pestañas en DevTools: una en la parte superior, que siempre está visible y es donde suelen estar los paneles Elementos y Fuentes, y otra en la parte inferior, el Cajón, que se puede alternar presionando Esc en su teclado. La consola suele vivir en el cajón. Ambas barras de pestañas tienen el botón +, por lo que puede abrir nuevas herramientas en cualquiera de estas 2 ubicaciones.
Mover herramientas
Tener el cajón abierto puede ser muy útil al depurar algo que requiere más de una herramienta al mismo tiempo.
Por ejemplo, es posible que desee tener los paneles Orígenes y Red abiertos al mismo tiempo para asegurarse de que se envíen las solicitudes HTTP correctas al depurar algún código JavaScript. O es posible que desee tener los paneles Elementos y Vista 3D abiertos uno al lado del otro para depurar un problema de índice z con un elemento.
Con Microsoft Edge DevTools, ahora puede mover herramientas entre el área principal y el cajón abriendo el menú contextual (haciendo clic con el botón derecho) en el pestaña que desea mover y seleccione Mover al final o Mover al principio.
Tenga en cuenta que si selecciona el botón + en el cajón y elige una herramienta de la lista que ya está abierta en el área principal, entonces esta herramienta se moverá al cajón. Esta es otra buena manera de mover las herramientas.
Aprender sobre las herramientas, desde dentro de las herramientas
El botón + es genial para descubrir fácilmente nuevas herramientas que quizás no hayas usado antes. Pero a veces, la interfaz de usuario de una herramienta puede resultar abrumadora a primera vista. Es útil tener alguna documentación disponible. La documentación de Microsoft Edge DevTools puede ayudarlo, pero a menudo no está al alcance de su mano cuando está a la mitad de una tarea.
Recientemente, agregamos una función para hacer que el aprendizaje contextual sobre una nueva herramienta sea aún más fácil: DevTools Tooltips. La información sobre herramientas de DevTools es una superposición que cubre las herramientas y proporciona documentación contextual sobre ellas, con enlaces para obtener más información.
Puede habilitar DevTools Tooltips de 3 maneras diferentes:
Vaya al botón Personalizar y controlar DevTools (…) > Ayuda > Alternar la información sobre herramientas de DevTools. También puede usar el atajo de teclado Ctrl+Shift+H (Cmd+Shift+H en Mac). O utilice el menú de comandos y escriba”información sobre herramientas”
Una vez habilitada, simplemente mueva el mouse sobre las áreas resaltadas para mostrar una información sobre herramientas sobre esta área específica de las herramientas (también puede usar la tecla Tab para navegar a través de la información sobre herramientas). el sitio web de documentación para obtener más información.
Tenga en cuenta que también puede ir a otros paneles mientras la información sobre herramientas de DevTools está activa. De esta manera, puede navegar por DevTools y seguir aprendiendo cosas nuevas sin tener que activar característica de vez en cuando.
Cambiar el idioma
Sabemos que los desarrolladores pueden ser más productivos cuando sus herramientas coinciden con su idioma preferencia de uso. Además, otros productos para desarrolladores de Microsoft, incluido VS Code, se pueden usar en otros idiomas. Es por eso que hicimos que DevTools esté disponible en 11 idiomas diferentes.
De forma predeterminada, DevTools coincide con el idioma que elija para la interfaz de usuario del navegador, pero puede configurarlo independientemente en cualquiera de estos otros idiomas.
Para cambiar el idioma, vaya a la Configuración de DevTools (usando el atajo F1 o haciendo clic en el ícono de ajustes en la barra de herramientas) y elija entre Idioma lista desplegable. Después de recargar DevTools, su interfaz de usuario aparecerá en el idioma de su elección, haciéndolo más fácil de usar las herramientas. Así es como se ve en francés: Esto también funciona muy bien con la función DevTools Tooltips, ya que la documentación contextual también está traducida, como se muestra en ruso a continuación. Desde anunciamos el lanzamiento experimental de la función DevTools localizada en 2020, seguimos colaborando con los equipos de Lighthouse y Chrome en Google a través del proyecto Chromium, y la función ahora no solo está disponible para todos los usuarios de Microsoft Edge, b ut también para cualquiera que use DevTools en un navegador basado en Chromium. Si usa Visual Studio Code (u otros editores de texto e IDE para el caso), usted probablemente haya personalizado su tema de color a algo visualmente agradable y cómodo para trabajar durante largos períodos de tiempo. Hasta ahora, el tema de color de DevTools podía solo se puede personalizar eligiendo entre sus temas oscuros o claros. Sin embargo, ahora hay 9 nuevos temas de color para elegir. Estos son los mismos que los preinstalados de Visual Studio Code y, por lo tanto, deberían resultarle familiares. Esta es la lista completa de temas en Microsoft Edge DevTools ahora: Temas existentes: Light+ Dark+ Chromium Light Chromium Dark Nuevos temas: Quiet Light Solarized Light Solarized Dark Abyss Kimbie Dark Monokai Monokai Dimmed Red Tomorrow Night Blue Para elegir un nuevo tema, puede ir a Configuración (el icono de engranaje en la barra de herramientas ) y utilice el menú desplegable Tema. También puede usar el menú de comandos y escribir”tema”para ver la lista completa de temas de color disponibles. Tenga en cuenta que si usa Microsoft Edge Tools para VS Code, es posible que haya visto que DevTools no siempre se muestra con el mismo tema de color que la propia interfaz de usuario de VS Code. Ahora, gracias a la nueva temas de color en DevTools, esto ya no sucederá. A partir de Microsoft Edge 95, la interfaz de usuario de DevTools, integrada en VS Code, coincidirá con el tema de color seleccionado. Si no conoce esta extensión, Obtenga más información aquí. Los comentarios de los usuarios son la forma en que impulsamos las prioridades para el trabajo que está ocurriendo en Microsoft Edge DevTools. Si tiene alguna pregunta o comentario sobre estas características u otras, envíenos algunas palabras y capturas de pantalla usando la el botón de comentarios en DevTools. Siéntete libre de hacer preguntas a nuestro equipo en Twitter mencionando el @EdgeDevTools cuenta. – Patrick Brosset, administrador sénior de programas, Microsoft Edge 
Personalizar su tema de color
Comentarios
