Chrome, JavaScript, webdev

Chrome DevTools Tips

DevToolsA (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

devtool - mobile overrides devtool - orientation

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.

devtool - gen


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.

devtool - profiler

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.

devtool - shortcuts all panels

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’.

devtool - shortcuts elements panel

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.
devtool - shortcuts source panel



One thought on “Chrome DevTools Tips

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s