Chrome DevTools Workspaces will make you more efficient by cutting down the number of steps required to make file edits.
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.
Introducing Chrome 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
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:
- Most recent guide to using Workspace from Google
- First Look: Workspaces – Simplifying Your Find & Fix Workflow With The Chrome DevTools
- Editing CSS-Preprocessor In Google Chrome
- Paul Irish Using Workspaces
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.