Chrome (Canary) workspaces

I've been playing with Chrome workspaces recently and thought I should share how easy they are to set up. They make it much easier to tweak css and other files directly in your browser and then persist those changes to disk by allowing you to map files served over the web to local resources from a disk.

You will need Chrome Canary as Workspaces hasn't quite made it to the regular build of Chrome yet. You'll also need to enable developer tool experiments by navigating to the "about:flags" in the navigation bar. For those of you who haven't been to about:flags before it gives you access to all sorts of feature flags in chrome so you can toggle things on or off.

You want to look for the "Enable Developer Tools experiments" and then make sure it's enabled

Now when you open dev tools in canary you'll have a new option when you click the settings cog in the bottom right of the tools window.

Click on the workspace option and you can then add a local folder to your workspaces. You want this to be the folder containing the content files (css, js, html etc) for your website.

Now that you've added your workspace simply navigate to the url of your site. One thing to note is that this doesn't have to be a local website*. Then simply go to the Sources tab within dev tools and right click on the file that you wish to map to your workspace and then select "Map to file system resource".

Chrome will then suggest any files that match from existing workspaces. Simply select the file that you want to map and hit enter. Chrome will suggest that you want to restart the inspector and after it's restarted everything should be linked.

Now when you open the sources tab you'll notice that that file (and usefully any files that also map to that location) will be pulled from the local source rather than the remote site. When you make changes to the file in the editor panel you'll notice that a star appears to indicate that you have changed the file. Simple ctrl+s (or cmd+s) to save the file to disk.

Any changes you make in the elements panel (the one on the right) are automatically updated in your css files.

Just be aware of the following

  • DOM changes in the Elements panel are not persisted. Only style changes on the Elements panel are persisted.
  • Only styles defined in an external CSS file can be changed. Changes to element.style or to inline styles are not persisted back to disk. If you have inline styles, they can be changed on the Sources panel.
  • Style changes on the Elements panel are persisted immediately; you don’t need to press ctrl+s (or cmd+s).

One final thing. If you want to edit any other files in your workspace, say for example your markdown files, you can. Simply hit ctrl+o and the same file dialog will pop open giving you access to all the files in your workspaces.

I've found it to be really handy and it's already made a massive change to my normal workflow. Happy coding!

* If you are using a remote server when you refresh the page the resources will be pulled from the remote server again. Your changes won't be lost and will be re-applied if you make any further changes but it's just something to be aware of.