Download Chrome Canary

Chrome Canary is the bleeding edge of Chrome. If you want the best and newest that DevTools has to offer, use this browser. It updates nightly, so be prepared for the occasional bug.

Working with SASS Source Maps

Start by installing the pre-release version of SASS.

gem install sass -v '>=3.3.0alpha' --pre

Then run SASS using the --source-maps flag.

sass --watch --sourcemap sass/screen.scss:css/screen.css

Then read the instructions for setting up source maps.

Setup Workspaces

Workspaces provides the ability for you to edit your Javascript, CSS, and SASS files right in your DevTools. It makes for quick editing of files while fixing bugs and making visual tweaks. It's powerful enough that you could leave your standard editor behind and develop this code right in the browser.

Read the instructions.

Map your Network Resources.

Install PageSpeed Insights

PageSpeed Insights is a great tool for testing the performance of your site. In addition, it has a few hidden tricks like providing minimized resources. This is a must-have DevTools extension.

Ready for More?

The steps above just get you ready to unlock the full potential of Chrome's DevTools as a development environment. I've got some more resources here to learn how to make use of all of its features.