You no longer have to refresh a tab to see the changes

Aug 6, 2013 08:24 GMT  ·  By

Google is highlighting some of the most recent additions to the Chrome DevTools. The team has been focusing lately on a better workflow and better integration between Chrome and whatever tools you're using to develop.

Workspaces is probably the biggest addition, and it makes it possible to edit sources locally and see the changes instantly reflected in the browser. You can map local sources to network resources, so that the browser loads the local file rather than the remote one.

This way, any modification you make to the local file is pushed to the browser without you having to refresh the tab or move back and forth between Chrome and your editor.

Chrome can load any source files this way, not just native web ones, which is why the browser recently added support for syntax highlighting for PHP, Python, Java, C/C++, Coffeescript, and many more.

Another interesting addition is support for CSS preprocessors like Sass. Using the workspaces feature, you can modify a style in the browser and have those changes pushed back to the original .sass source file. A more detailed guide to setting up two-way sync between Sass files and Chrome can be found here.

This only works with Sass for now, but the team is working on adding support for other CSS preprocessors such as Less, Stylus, and Compass.

Also new is the ability to write larger snippets of code inside Chrome. You can now write some small JavaScript code and make it available to all of your projects in Chrome.

"Snippets is a new DevTools feature that makes it possible. It allows you to create, store and run JavaScript within the Sources tab. It gives you a multi-line console with syntax-highlight and persistence, making it convenient for prototyping code that is more than a one-liner," Google explained.

A collection of useful snippets is already available. All these features are only available in the most recent Chrome 30, which is still in the dev channel.