Free Chrome extensions to inspect live web pages
If you are a web-designer working on web site or web apps, you will agree that getting pixel perfect page out takes lots of iteration and collaborative effort from the team.
Remember last “design QA” session?
Those endless discussions on why font-size in new menu items is large, why CTA is not coming prominent and list goes on…
As a last resort, designers have to inspect and debug design properties using native devtools available in modern browsers — Safari/Chrome/Firefox.
It works but only challenge is that you have to dig through lots of codes to get what are you looking for.
Is this the best way for a designers to inspect?
We believe, you deserve better.
Thanks to many Chrome extensions like Visual Inspector , now you can inspect design properties from live webpage without digging into codes.
Let’s have a look on popular Chrome extensions to inspect webpage:
Page Ruler
Draw a ruler to get pixel dimensions and positioning, and measure elements on any web page.
Download link — https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn
Dimensions
A tool for designers to measure screen dimensions
Download link — https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj
Perfect Pixel
This extension helps develop your websites with per pixel accuracy!
Download here — https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en
[NEW] Visual Inspector — Inspect
A delightful way to inspect design properties in live web page without losing comfort of design tools.
Download Here — https://chrome.google.com/webstore/detail/visual-inspector-by-canva/efaejpgmekdkcngpbghnpcmbpbngoclc?hl=en
Final words
Whereas, each of these extensions have their own pros and cons. You can choose the right one, based on your preference.
Having said that, Visual Inspector (totally unbiased) does more than just picking colors and also let you:
- Pick fonts from the web page
- Inspect design properties
- Make change to the live web page
- Add comment to the page to specify changes
- Lot more…
So try one of these extensions, and stop digging into codes to native dev-tools.
Are we missing your favorite extension to pick colors from website? Let us know in comments.
Did this article save your time? Clap on the article and share it with your friends.
