Source Editing with Google Chrome Workspace

It’s common to use the browser’s Developer Tool to debug and test codes during the process of building a website. However, since the changes we made in the Developer Tool does not affect the actual codes within the designated files, we have to switch back and forth between the code editor and the browser to update the file and view the result.

To simplify this traditional workflow, Google Chrome recently introduced a new feature called Workspace that allows the author to do debugging, editing, and saving project files right from the browser. In this post, we are going to walk you through Workspace.

Recommended Reading: Getting Started With Chrome Developer Tools

Enable Workspace

At the time of this writing, this feature is classified as experimental, and thus it is not enabled by default. To enable it, head over to chrome://flags/. Set the “Developer Tools experiment” to Enable, as shown below.

Restart Chrome.

Next, open the Chrome Developer Tool (DevTools). Go to the DevTools Settings, which appears as a gear icon at the bottom right of the Developer Tool. Then head over to the Experiments tab, and tick the File system folders in Source Panel, as shown below.

Restart the DevTools, and go to the Settings page as we did previously. This time, you will find a new tab called Workspace. Go to the Workspace tab, and click on Add File System to add a project folder, as follows.

Close the DevTools Setting window, and head over to the Source panel.

In the left sidebar of this tab, you will find the project folder you have just added including the CSS, HTML, and JavaScript. Now, view your project in Chrome, make some changes in the files, save the change, and you should see the changes also reflected in the actual files.

But, keep in mind the result will not be visible instantly as you are editing the files.

To view the result, refresh Chrome.

Read Also: How To Refresh Changes on Browser With Sublime Text

Final Thought

Even though this feature may not replace code editor entirely, it is a great addition that makes the code-debugging process more streamlined and simplified. As said, Chrome Workspac is an experimental feature, so some of the parts may change in the feature.

Have you tried working with Chrome Workspace? Share your thought in the comment box below.