Chrome DevTools Workspaces will make you more efficient by cutting down the number of steps required to make file edits.

chrome-flat-icon Not many people know about Chrome Workspaces, but it can be a real time saver in your WordPress development workflow.  Chrome DevTools Workspaces allows you to edit and save any type of file directly from the Sources panel.

Many WordPress developers have a development workflow involving several windows that they switch between to make changes or edits to their project. For instance, to modify a CSS class a developer might first make edits in DevTools, then copy the edits to their clipboard, then switch to a code editor, scroll to the appropriate line number, paste the edits, and finally return to the browser to refresh and confirm the edit has been made.

That’s a lot of steps.

You may already know or have heard that you can auto-save CSS and JavaScript changes directly from Chrome Developer Tools. Did you know that you can also edit your PHP files, or any file including LESS and SASS, as well? Well, you can… and it’s a real time saver.

Introducing Chrome Workspaces

chrome-devtools-workspaces

Chrome DevTools Workspaces is a new addition to Developer Tools as of the Canary build (28). What it allows you to do is basically auto-save files directly in DevTools to your ‘workspace’ or project source directory.  You can edit any file in the Sources panel and have those changes reflected directly in the files like you were working in any code editor.

The setup is relatively quick and painless and it’s definitely worth a closer look.

With Workspaces you can:

  • Auto-save PHP files
  • Auto-save LESS / SASS
  • Auto-save JS / CSS
  • Full undo/redo
  • Auto-trigger browser refresh
  • Code entirely in DevTools

These features are live in Chrome 28.

Just find an error, fix it and save to the file from just one place.

– Google Chrome Developers

Setting up Chrome Workspaces for WordPress Development

Before you can begin using Workspaces there are a few relatively painless steps to perform to get up and running.

Watch the Screencast: Setting Up Chrome DevTool Workspaces for WordPress Development

Additional Links

Still want more? If the screencast above wasn’t enough the following articles will provide you with additional information on getting started with Chrome DevTools Workspaces:

Final Thought

A workflow where you never leave the browser will undoubtedly be faster than switching between multiple windows for every edit. I often find myself losing my thought process when I switch windows often. Soon I find myself scrolling through my news feed or latest tweets. You may be more disciplined than me in that regard, but I guarantee that if you cut the number of application hops you will be get done faster.  Less clicks equals greater efficiency.

This workflow may seem like a drastic change to what you’re used to but I encourage you give it a shot.

You don’t have to dump your editor 

You love your code editor, I get it. So do I, and I still use mine everyday. A workflow where you never leave DevTools is possible, but it may not be ideal for you. Coding in the browser doesn’t give you all the added benefits of a code editor like smart code completion, reformatting and rebust debugging. I found that I use Workspaces mostly to update JS and CSS/LESS and quick PHP updates or testing. It works for me and I know it’s save me a lot of time.

Let me know your thoughts on Chrome DevTools Workspaces in the comments below.

 

Devin Walker is a San Diego-based WordPress Developer and enthusiast. He is the author of several popular and highly-rated WordPress themes and plugins. In his free time he enjoys playing Golf and traveling.

Follow Devin:

There are 2 comments

Join the Discussion

Your email address will not be published. Required fields are marked *