Chrome Workspaces: Edit Source From The Chrome Dev Tools

The Workspace feature of Chrome’s Developer Tools allows you to live edit the source code to a web application and have your changes saved on your local file system. The Workspace feature is now available not yet available in the stable builds of Chrome, but sounds like it will be soon. 

Getting Workspaces Setup

The first step is to open the Settings panel by clicking the “gears” icon in the lower right of the tools window. Then select “Workspace”. Under “Folders” you can select one or more folder where your source lives, or even a parent folder like your parent folder for all git repositories. The Workspace features is fairly smart when it comes to finding source code files inside.

Theoretically you could select the root directory of a drive, but I’m not clear on the implications of granting access, and after selecting a folder you’ll have to say yes to a  popup warning about making sure you “do not expose sensitive information”. Until there is a definitive document (I couldn’t find one), I’d have to assume third party extensions would be able to poke around the file system looking for plaintext passwords inside of config files.

Once a file system location is mounted, you can start to edit files in the Sources tab of the developer tools. You can open and edit any text file from the file system tree in the Navigator window of the Sources panel, even non web files like build files or C# code.

Of course the files you will be most interested in editing are the JavaScript and CSS files that are loaded into the browser from a web application. You can “map” a file loaded into the browser to a file on the file system by right-clicking the file in the Navigator window and selecting the matching file on your hard drive.

Once that step is complete, you can now start editing the JavaScript and CSS of an application and have the changes saved (Ctrl+S) to your local file system.

Where Workspaces Is Great

For editing the CSS of an application, the Workspaces experience is unsurpassed by any other development environment. You get to see your live site running in the browser with live data. The changes you make in the CSS are instantly reflected in the browser, and when the UI looks good, pressing Ctrl+S will save your changes into your CSS file. You can edit the CSS file directly, but you can also edit CSS from the Elements pane for fine-tuning, and these changes are immediately persisted. It is the ultimate WYSIWYG designer.

Where Workspaces Is Good

You can edit other files, too, like JavaScript files, but these generally require a refresh of the browser to see the changes running. For example, you can open up a file of Jasmine tests and create a new test, but running the test requires a refresh. It would be nice to have an option of automatic re-execution in the spirit of today’s automated test runners.

Obviously  a change to compiled code, like a C# file, requires a re-build outside of the browser and dev tools. It would be nice to have some hooks to do this automatically like some text editors can do.

Where Workspaces Could Improve

As for the Chrome Dev Tools becoming an everyday all day editor + IDE, it still has a ways to go. The tools have always behaved like a gifted but insubordinate child. Hitting backspace or enter at the wrong time can wipe out a style definition (fortunately Ctrl+Z undo can bring the style back), and the UI often feels cramped, jumbled (even on a big screen), and quirky (as I’m typing, an unlabeled checkbox has appeared in the middle of nowhere). The tools also feel transient, since closing the wrong browser tab will close the associated workspace, and the editing ability is still missing some key features provided by other editors, like columnar selection, auto-completion for CSS properties, and commands or triggers to interact with external tools.

Despite these shortcomings, the Chrome dev tools are still head and shoulders above the tools in other browsers. Plus, they get better with every frequent release.