Chrome workspace allows to use the devtool as an IDE. The changes can be saved to disk without having to leave Chrome DevTools.
By default, a refresh of the browser will remove the changes unless you've manually copied and pasted them to an external editor.
The Chrome workspace features permit mapping files served from a local webserver to files on a disk and view changes made to those files as if they were being served.
- Start the python server
python -m SimpleHTTPServer
python -m http.server 8000
- Go to localhost:8000
- Control+Shift+J (Windows, Linux, Chrome OS) to open the Console panel of DevTools.
- Add The app folder to the workspace. The green dot next to index.html, script.js, and styles.css mean that DevTools has established a mapping between the file in the browser and the files on the app file (on the file system)
- The changes made in the style windows of the element will saved in the mapped css file
In the source tab, you can change an HTML file.
- Click the Sources tab.
- Click the Page tab.
- Click the HTML page to open it
- Edit the page
- Save Command+S (Mac) or Control+S (Windows, Linux, Chrome OS)
- Reload the page.
- Open the command context (Ctrl+Shift+P)
- Select Quick Source
- Go away from the Source tab and you will see the source files open in the Source tab in the Quick Source tab
- Press Command+S (Mac) or Control+S (Windows, Linux, Chrome OS) to save the change.
- Reload (f5)