Google Chrome's Best Feature You Aren't Using - Try it Now

Google Chrome is Associate in Nursing awing application however there’s a good additional awing feature designed right within Chrome that almost all folks seldom use – it’s referred to as Chrome Developer Tools. Let the word “Developer” not intimidate you as a result of North American nation regular Chrome users, or non-developers, can even have the benefit of having some basic data of Chrome Dev Tools.

Did you recognize that you just will use Chrome as a application editor for internet pages? Or that Chrome will work as a Maths calculator? Or that you just will perform date calculations within Chrome? This video tutorial can walk you thru a handful of examples wherever you'll be able to use Developers Tools.

Chrome Developer Tools for Non-Developers

Open this demo page within Google Chrome on desktop then press Ctrl + Shift + I on the keyboard (or Cmd + Shift + I on the Mac) to open Chrome Dev Tools. currently click the hand glass icon within the lower left corner of Chrome, hover your mouse over the page headline and double-click the chosen HTML code within the Dev Tools to edit that headline.

1. set up the text and pictures on a page

With Chrome Dev Tools, you'll simply modification of the order of parts as they seem on a page by merely dragging them along with your mouse. Click the hand glass icon, hover over any part of the page – be it text paragraphs, images, or list things – then drag that choice to position it at a special location.

2. Experiment with totally different colours

Web pages typically use the positional notation format for writing colours however if the #AABBCC format makes no sense to you, simply write the colour names in plain English like Gold, turquoise and a lot of. simply sort the primary character and Chrome Dev Tools can show all the out there colours that begin therewith letter.

3. Reveal the Hidden Passwords
Bogas Point Should be Deleted :)

4. Edit your sites inline

Web pages ar non-editable within the browser however there’s a trifle trick which will allow you to edit sites inline as you are doing in an exceedingly applications programme. Open Chrome Dev Tools, switch to the Console tab and sort document.body.contenteditable=true at the electronic communication. Voila! The page becomes editable.

5. Chrome as a Calculator

                                             















While the Console tab is active, you'll write arithmetic expressions and additionally perform date calculations like what number days between 2 dates or write a date as a human-readable string. a trifle recognize of the Date object in JavaScript can come back handy. Chrome stores the worth of the previous calculation in an exceedingly special $_ variable which will be utilized in protracted calculations.


6. Extract data from an online Page
You can run multi-line commands within the console window to dissect and extract information from sites. for example, $(‘a’) selector can hold all the hyperlinks that ar embedded in an exceedingly page. you'll then use an easy for loop to export these hyperlinks as plain text.

urls = $('a'); for (url in urls) console.log ( urls[url].href );
export-url-list

ref video by labnol

I hope you found this post helpful and as you know, I love comments, so make sure you leave a comment on this post before you leave.