Rethinking Chrome workspaces

In my previous guide I walked through getting started with CSS source maps and in-browser editing. The biggest hurdle, and the most complex part of the guide, was configuring Chrome Canary’s workspace feature and mapping the remote source to a local file. What if we could simplify the process by removing the concept of workspaces altogether?

Getting started

Let’s assume you’ve configured your build tools to output source maps. If you open your site in Chrome, and inspect an element, you would now see the original source file referenced in the web inspector:

If you click the link to the original file and line, in this case styles.scss:109, …

Nothing.

Chrome tried to load the original source file via HTTP but received a 404 as it’s not a publicly accessible file.

To solve this in Chrome Canary <= 30.0.1571 you need to add your site’s source folder to Chrome’s dev tools Workspace settings, and then open the Sources navigator and map the failing remote source file to a local source file. Not exactly simple or discoverable.

An alternative design

What if, instead of a blank page in the Sources panel, you were shown:

What’s changed?

Firstly, the Sources navigator is visible, docked, and shows the file Chrome tried to open. Secondly, the blank file is replaced by a friendly error page showing a description of the problem, the URL which failed to load, and a A Map to File… button.

The URL on the error page and the navigator tree provide context as to where Chrome is trying to load the source file from, and the button provides a hint to what action might solve it.

Map to File… would also be in the right-click menu for sources in the navigator. Clicking either the button, or the menu item, would prompt you to choose a file from the local file system.

And after choosing the file and Open…

The file would be added to the Sources navigator, opened in the editor, and the cursor on the line you were originally trying to inspect.

Editing entire folders

If you’ve used Chrome’s existing Workspace feature you’ll know you can also edit entire folders of files. How would you add your site’s entire source directory to Chrome with this new design?

If you right-clicked in the navigator you’d see an Add Folder… option, which opens a file chooser dialog.

You could also just drag a folder into Sources panel to have it added and visible in the navigator.

Mappings could be managed in the same way: right-clicking on a remote source and choosing Map to File…, or right-clicking on a local file and choosing Map to Remote Source…

Workspace be gone!

The term “Workspace” is a foreign concept to web developers, and to introduce it just for the ability to open local source files in the Sources panel seems like overkill.

By utilising the Sources navigator for local file editing, providing helpful error pages for missing sources, and improving the default open/closed state of the dev tools panels, we could greatly simplify the process of getting started with in-browser source file editing, eliminating the need to introduce the concept of a “Workspace”.