Profile Picture

I write code.

I am frontend engineer living in Zürich, backed in Barcelona. I work at Unic. I'm father of a cute baby and a lifetime learner from everything frontend related.

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.

  1. Open chrome://flags in a new tab in Chrome
  2. Activate “Enable Developer Tools experiments”
  3. Open the dev tools
  4. Go to the dev tools settings (press “?” in keyboard)
  5. Go to tab “Experiments”
  6. Enable option “File system folders in Sources Panel”
  7. Enable option “CSS Regions Support”
  8. Enable option “Support for Sass” (if you use sass command directly, not for MM)
  9. Restart dev tools (or even Chrome sometimes)
  10. Go again to the dev tools settings (press “?” in keyboard)
  11. You’ll have a new tab called “Workspace”
  12. Add a file system (path to your static page folder)
  13. Accept the message (yellow bar) giving Chrome access to the Filesystem
  14. Restart dev tools (or even Chrome sometimes)
  15. In “sources tab” the page is now represented by a folder icon, not by a greyed-world icon.
  16. 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)
  17. CMD+s to save it to disc.

References * http://remysharp.com/2013/07/18/my-workflow-v3-full-coding-stack/