Como desarrolladores web, dedicamos mucho tiempo a crear nuestro código en un entorno de edición. Luego saltamos al navegador para usar las herramientas de desarrollador integradas para depurar y modificar la interfaz de usuario del producto. El problema con esto es que los resultados de los ajustes y la depuración no se reflejan en el código fuente. En Microsoft Edge, actualmente estamos trabajando en un par de soluciones que están abiertas a discusión y nos encantaría sus comentarios sobre ellos
Si prefiere ver un video en lugar de leer, aquí está una introducción de tres minutos:
El problema actual con ajustes y cambios en las herramientas para desarrolladores
Hoy en día, las DevTools del navegador brindan herramientas visuales altamente sofisticadas que le enseñan, por ejemplo, la sintaxis CSS mientras las usa. Estas herramientas cambian las cosas de una manera visual. Por ejemplo, puede hacer clic en el ícono”Flexbox”junto a cualquier propiedad de CSS flexbox y obtendrá una ventana emergente que le dará una vista previa del resultado de ese cambio de estilo.
Esta es una excelente experiencia de depuración y evita tener que buscar la sintaxis CSS todo el tiempo Sin embargo, hay una desconexión, ya que el código que se muestra en estos flujos de trabajo de depuración no es lo que escribió en su editor de código.
El editor de estilos funciona mostrando solo una vista parcial del código para el actual elemento seleccionado en el navegador. No sabe dónde ni cómo encaja ese código en el resto de su CSS en su página web. Aunque puede desplazarse para ver el resto del código, ¿no sería mejor ver también el original? archivo CSS?
Puede acceder a ese haciendo clic en los enlaces al archivo CSS en sí, lo que lo lleva a la Herramienta Fuentes y lo aleja del editor de Estilos.
Este es un editor incrustado en las herramientas de desarrollo del navegador que fue ingenioso cuando salió, pero no brilla en comparación con lo que esperamos de un editor en estos días. A menos que desacople las herramientas y las use en una ventana propia, tampoco tendrá suficiente estado de pantalla para una experiencia de edición conveniente.
Ya sea que use las herramientas visuales para modificar su CSS o el editor de fuentes, queda un problema: una vez que cambió mucho de cosas y llegó al resultado deseado, ¿cómo puede recuperar estos cambios en su código fuente?
¿Sabía que existe una herramienta de cambios?
Las herramientas de desarrollador del navegador tienen una característica que ayuda con esto llamada Cambios que no se usa mucho y es en gran parte desconocida. Puede acceder a él desde el menú de comandos o el menú contextual y le muestra una vista diferente de todos los archivos que cambió en esta sesión. Puede usar esta herramienta para copiar y pegar los cambios en sus archivos de origen.
Firefox utiliza un enfoque ligeramente diferente de una herramienta de cambios que actualiza en vivo con los cambios que realiza. También crea un archivo CSS para que lo copie y pegue que tiene comentarios que explican en qué archivos pegar estos cambios y qué se eliminó o agregó.
Si bien este es un buen paso en la dirección correcta, requiere un paso adicional para copiar y pegar el código. vuelva a su editor.
Un flujo de trabajo mejorado que incluye Visual Studio CodeLos espacios de trabajo en Chromium Developer Tools existen desde hace mucho tiempo, pero no se ven muy útiles. Es por eso que queríamos que sea más obvio que puede sincronizar en vivo los cambios entre DevTools del navegador y un editor de código. También nos dimos cuenta de que el editor de la herramienta Fuentes no es lo que la gente quiere usar.
¿Qué pasaría si pudiera tener la comodidad del editor que ya usa y los beneficios de los cambios en vivo en los archivos de Workspaces?
A partir de la versión 96 de Microsoft Edge, puede encontrar un nuevo experimento en DevTools llamado”Abrir archivos de código fuente en Visual Studio Code“.
Una vez que encendió este y reinició las herramientas de desarrollo, navegó a un archivo en su disco duro o a una dirección de servidor local como localhost o 127.0.0.1 le dará un aviso que le pedirá que identifique la carpeta raíz de este archivo. También puede optar por no participar en una sesión o nunca ver esta opción una vez. ganancia.
Una vez eliges una carpeta, el navegador te pide permiso para obtener acceso a esa carpeta, al igual que tenías que hacer cuando usabas Workspaces en la herramienta Fuentes.
Cuando realiza cualquier cambio en el panel Estilos, el archivo cambia en el disco. La diferencia es que cuando tiene Visual Studio Code como su editor en la computadora, al hacer clic en los enlaces a los archivos se abrirán en este editor en lugar de en la herramienta Fuentes. Permanece en el entorno al que está acostumbrado con todas las personalizaciones y extensiones que le agregó.
Esto es genial ya que sus cambios de CSS ahora son permanentes. Sin embargo, el problema es que pueden ser demasiado intrusivos. Cualquier cambio en la herramienta Estilos, como cambiar el tamaño en una unidad, hará que cambie el archivo en su disco duro. Si usa cualquier solución de servidor de recarga en vivo o incluso secuencias de comandos que controlan una carpeta y desencadenan un proceso de compilación, esto puede complicarse rápidamente.
Edición espejo de CSS
En la última versión de Extensión de Edge DevTools para Visual Studio Code, presentamos una forma diferente de cerrar el ciclo de creación/depuración llamada”Edición espejo de CSS”. Si quieres, puedes ver esta introducción en video de 40 segundos.
Si habilita esta característica, los cambios realizados en la herramienta Estilos también afectan el código fuente, pero el archivo permanece sin cambios hasta que lo guarda en Visual Studio Code. Obtiene el beneficio de no perder sus cambios y mantiene el control total sobre los archivos en el disco duro.
Si usa el control de versiones, puede ver todos los cambios que realizó como una vista diferente una vez que guardó el archivo. Esto le brinda toda la comodidad del flujo de trabajo de Workspaces con menos cambios en los archivos.
¿Qué debemos hacer para mejorar esta experiencia?
Parece que tenemos todos los componentes correctos en lugar para brindar a los desarrolladores y experiencia de creación y depuración de extremo a extremo. Nos encantaría saber qué piensa de estos enfoques y cuál prefiere.
Si tiene algún comentario, comuníquese con el equipo de Edge DevTools en Twitter en @EdgeDevTools, comente sobre este problema en GitHub sobre la edición de CSS Mirror o use la herramienta Comentarios integrada en DevTools en el navegador.
– Chris Heilmann, administrador principal de programas, Microsoft Edge
