Google chrome is one of the fastest browser around and using chrome devTools for development is simply awesome. I use two chrome browers, one is normal chrome and other is chrome canary.
The difference is that canary is from future, that is new features will be available in canary before ported to actual chrome. Sometimes you may find break down, but that doesn't stop you from using it. For now canary is available for Mac
and Windows
. Enough with the explanation, let's get started.
DevTools
In this post, all the tips and tricks mostly apply to chrome canary
, if you don't find a menu or option in actual chrome
. Download canary and try.
To access devTools in both chrome and canary, press ctrl + shift + i
and in mac replace ctrl
it with command
.
Inspect Element
Right click in the chrome to find Inspect element
at the end of the menu.
Using it you can see default styles of a web page. We can even modify default styles and see the live changes (without refresh, else modified styles will be removed). Autocomplete styles are present by default. So changing the style is easier. See the below image.

Pro Tips:
Open the devTools
- Change the css color property or background property in
styles tab
by pressingshift + click
to change anyrgba
,rgb
,hex
,hsl
torgba
,rgb
,hex
,hsl
. - Just type in 'styles tab' to show autocomplete property name and its possible values
- To add an attribute to an HTML element, right click in 'element panel' and select
add attribute
and for editing the HTML element, use double click or right click and selectedit as HTML
. - To see the styles applied to an element in the box model. (ie) content, padding, border, margin go to the bottom of
styles tab
. - To copy an HTML code, right click on
element tab
and selectcopy as HTML
or simply drag and drop in any editor. See an example below.

Console
The console tab is used to debug javascript. That's not all, you can write javascript to the console just like you do in the javascript file and execute it. Let us see an example

In the above screen shot, I have executed a simple function which will alert hi. Other than writing javascript function, we can see XMLHttp Requests
, timestamps
of a log, preserving the log
(ie) even on refresh log won't be cleared. Go to setting and select general menu and go to bottom to set any of the above menus.
Pro Tips:
DOM inspection is also possible in the console tab.
- Using
$('elementName')
will return the list of matching element from DOM which is same asdocument.querySelector
. On the result, right to find menuReveal in Elements Panel
to see the HTML element in elements panel. - Using
$('#somename')
will return id matching element from DOM which is same asdocument.getElementById
.
Example:

Go here to see all command line api for chrome console.
Must have chrome extensions for developers:
- Postman is a tool to make REST-API calls.
- Dimension a tool to test responsive websites and offline webpages.
- Requirify is used to download libraries such as
jQuery
,Lo-Dash
etc.. to the console. - WhatFont to see the fonts used by the websites on mouse hover.
- Eye Dropper allow you to pick colors from web pages. (inbuilt in canary)
- Page Ruler lets to draw a ruler on any sites to show height, width and other properties.
I hope this post will be helpful to learn few basics about chrome devTools. Soon I will come back with an advanced tutorial for chrome devTools like finding memory leak, profiling etc. So stay tuned.
If you like my post share it or leave a comment.