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
Windows. Enough with the explanation, let’s get started.
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
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.
Open the devTools
- Change the css color property or background property in
styles tabby pressing
shift + clickto change any
- 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 attributeand for editing the HTML element, use double click or right click and select
edit as HTML.
- To see the styles applied to an element in the box model. (ie) content, padding, border, margin go to the bottom of
- To copy an HTML code, right click on
element taband select
copy as HTMLor simply drag and drop in any editor. See an example below.
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.
DOM inspection is also possible in the console tab.
$('elementName')will return the list of matching element from DOM which is same as
document.querySelector. On the result, right to find menu
Reveal in Elements Panelto see the HTML element in elements panel.
$('#somename')will return id matching element from DOM which is same as
Here is an 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
Lo-Dashetc.. 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.