Configure Chrome to work on browser
This is a step-by-step guide to configure Chrome to work on browser. This enables editing and saving local files and thanks to this, it is not needed to leave DevTools in your workflow.
- Open chrome://flags in a new tab in Chrome
- Activate “Enable Developer Tools experiments”
- Open the dev tools
- Go to the dev tools settings (press “?” in keyboard)
- Go to tab “Experiments”
- Enable option “File system folders in Sources Panel”
- Enable option “CSS Regions Support”
- Enable option “Support for Sass” (if you use sass command directly, not for MM)
- Restart dev tools (or even Chrome sometimes)
- Go again to the dev tools settings (press “?” in keyboard)
- You’ll have a new tab called “Workspace”
- Add a file system (path to your static page folder)
- Accept the message (yellow bar) giving Chrome access to the Filesystem
- Restart dev tools (or even Chrome sometimes)
- In “sources tab” the page is now represented by a folder icon, not by a greyed-world icon.
- Choose one of the resources in this folder to change it and see live the changes in the page. (You can try CMD+o to open a file in the sublime cmd+p way)
- CMD+s to save it to disc.
References * http://remysharp.com/2013/07/18/my-workflow-v3-full-coding-stack/