A (good) web developer use several tools in order to be productive and built amazing projects. I guess, you can find advocates for Vim or Emacs but after you pass the phase of writing the code, it’s time to check why it’s not doing what you wish to see. You can find on Opera Dragonfly and in FireFox land there is Firebug. But, as you might guess already, my favorite tool is Chrome DevTools on Canary.
What are DevTools?
The Chrome Developer Tools are a set web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application.
(!) If you are a front-end developer you should use Google Chrome Canary. It is easy to install it side by side your regular Chrome and it will give you the latest and greatest features with frequent improvements. This post is not a replacement to the one ‘source of true‘ but more of an update on the new features we have today (OCT 2013) in Canary. Checkout the pictures below with the green arrows that show you some of the interesting feature you can use.
Basic overrides when working on mobile web
General Settings
One of the most important ones is to disable the cache while you work with DevTools so you can be sure you are getting the latest version from your server. Another pro tip is to show the rulers when you are designing new layout. It can save you many hours.
Profiler
This part of Chrome Devtools is very powerful. You can gain deep insight on what is moving the needle and which part of your site/app you should improve in order to push your performances forward. You might want to watch the videos that I’ve added to the end of this post.
List of shortcuts
Like in any tool… Once you learn few handy shortcuts you are starting to work like a pro. Here are some good ones that will let you keep your hands on the keyboard. The option to move quickly between tabs and hit the cmd-F for quick search is one of the popular one.
On the Elements, I really like to use the arrows in order to move between them and open/close them. Another useful key is the ‘enter’ where when you click on it, you get an option to edit the attribute of the selected element on the fly. It’s cool to test new layouts etc’.
The source panel give us a good IDE. After you set a ‘workspace’ all the edits will be saved to their original file. You can have a full debug mode and set breakpoints to examine variables.
Misc
- You might want to watch this awesome talk that Ilya Grigorik gave in JQueryUK on June 2013
- A Google Developer Live show dedicated to developer tools.
- Good CheatSheet for DevTools
Ido Green 
Gr8 Article! Thanks Ido.