este popular artículo se actualizó en 2020. Para obtener más información sobre cómo mejorar su flujo de trabajo de desarrollo con herramientas, lea Developer Essentials: Tools en SitePoint Premium.
el día típico de un Desarrollador Web implica crear páginas web HTML con CSS y JavaScript asociados en su editor favorito. El flujo de trabajo:
- abra la página alojada localmente en un navegador.
- Juro.
- abra DevTools para investigar los problemas de diseño y funcionalidad.,
- modifica los elementos HTML, las propiedades CSS y el código JavaScript para solucionar los problemas.
- Copie esos cambios de nuevo en el editor y vuelva al paso # 1.
aunque herramientas como live reloading han facilitado este Proceso, muchos desarrolladores continúan modificando el código tanto en DevTools como en su editor.
sin embargo, es posible abrir y editar archivos fuente directamente en Chrome. Cualquier cambio que realice se guarda en el sistema de archivos y se actualiza dentro del editor (suponiendo que se actualiza cuando se producen cambios en los archivos).,
Paso 1: Inicie Developer Tools
abra Chrome, cargue una página desde su sistema de archivos/servidor local y abra Developer Tools desde el menú Más herramientas o presione F12 o Ctrl / Cmd + Shift + I dependiendo de su sistema. Vaya a la pestaña Fuentes para examinar el Explorador de archivos:
puede abrir y editar archivos CSS y JavaScript en esta vista, pero cualquier cambio se perderá tan pronto como actualice la página.
Paso 2: asocie una carpeta con el espacio de trabajo
Haga clic en la pestaña Sistema de archivos y, a continuación, haga clic en + Añadir carpeta al espacio de trabajo., Se te pedirá que localices tu carpeta de trabajo y Chrome te pedirá que confirmes que permites el acceso. El explorador muestra los archivos en su sistema que se puede abrir con un solo clic:
Paso 3: Editar y Guardar Su Código
ahora puede saltar y editar el código. Las ediciones no guardadas se marcan con un asterisco en la pestaña Archivo.
los cambios de CSS se actualizan instantáneamente, pero, en el caso de HTML y JavaScript, normalmente necesitará presionar Ctrl / Cmd + S para guardar el archivo en el sistema de archivos y luego actualizar el navegador.,
tenga en cuenta que también puede hacer clic con el botón derecho en la pestaña archivo y seleccionar Guardar como Save para guardar una copia del archivo en otro lugar.
Paso 4: revisar y Deshacer cambios
para revisar los cambios, haga clic con el botón derecho en una pestaña de archivo y elija modificaciones locales from en el menú contextual:
se muestra una vista similar a una diferencia. El icono de flecha en la parte inferior izquierda del panel deshará todos los cambios y revertirá el archivo a su estado original.,
Las herramientas para desarrolladores de Chrome nunca serán un reemplazo completo para su editor favorito, pero pueden ser útiles cuando realice cambios rápidos o trabaje desde otro PC donde su editor no esté instalado.