Setting Up Workspaces In Chrome Developer Tools

Written by

Walter G.

Published on

September 23 2015

Modified on

October 19 2017

Filed under

General

How many times do you load up Google Dev Tools in order to make styling changes on the fly? If you're like me, then that's the first place you run to when something goes wrong. It's the fastest way to test changes and it's the most convenient way to debug your style and script issues. Google Chrome has enough dev tools at its disposal that you could write entire books on it, and because of that it takes me a while to test and use many of the different ones. Lately though, I've found my productivity shoot up by setting up Workspaces.

What are workspaces

So Workspaces allow you to view and edit your websites style and script files immediately and to store those changes so that you don't have to go through the tedious task of copying over your updates line by line onto your actual website. Google Chrome gives you a few options on how to do this. You can either map a particular file to its actual live file equivalent, or you can just create a copy and set that as your workspace, which I would recommend.

Features

• Don't manually copy changes to local files. Use workspaces to persist changes made in DevTools to your local resources.
• Stage your local files to your browser. Map files to URLs.
• Once persistent workspaces are set-up, style changes made in the Elements panel are persisted automatically; DOM changes aren't. Persist element changes in the Sources panel instead.

Add A Folder To The Workspace

I'm going to be adding my "Styles" directory to the workspace, so that I can work directly with the design. To add a workspace open up the Sources tab in the Chrome developer tools and right click on any directory that you would like to add. You'll see the contextual menu to add a folder to workspace.

You'll be asked to select a directory to set as your workspace. I personally created a new directory for all of my workspaces and gave each of my sites their own directory within.

Once you close and re-open the inspector, you will see that the sources tab will be pulling content from your local workspace.

Making changes

At this point you are free to edit the local files any way that you see it, and the cool part is that changes occur in real time. There's no need to continue refreshing the page and clearing your cache, just to see that one font change. You just keep typing, and when you're happy with the results, you save your work. You can also add and remove files to your workspace right from the sources pane.

Worth Noting

It's worth noting that only styles in external files will persist their changes. Inline styles will of course be reverted when the page is reloaded as they are generated on the server and not locally. Also, if you do choose to map changes directly to your remote server, then Chrome will load those remote pages after it applies the update.

This is definitely one of the reasons that I continue to use Chrome as my main browser. It's the perfect work environment for any web developer.

Comments

No messages posted yet

Add comment