Google Chrome is a multipurpose and awesome web browser and also it has many unknown and marvelous features provided in Chrome that most of us never use or rarely use . These are called Chrome Developer Tools.
Did you know that you can use Google Chrome as a WYSIWYG editor for web pages? Or that Chrome can work as a Maths calculator? Or that you can perform date calculations inside Chrome?
Google Chrome Developer Tools
Open the demo page inside Google Chrome on desktop and then press Ctrl + Shift + I on the keyboard (or Cmd + Shift + I on the Mac) to open Chrome Dev Tools. Now click the Magnifying Glass icon in the lower left corner of Chrome, hover your mouse over the page headline and double-click the selected HTML code in the Dev Tools to edit that headline.
1. Change different colors
Web pages often use the hexadecimal format for writing colors but if the #AABBCC format makes no sense to you, just write the color names in plain English like Gold, Aqua and more. Just type the first character and Chrome Dev Tools will show all the available colors that begin with that letter.
2. Shuffle the text and images on a page
With Google Chrome Dev Tools, you can easily change of the order of elements as they appear on a page by simply dragging them with your mouse. Click the magnifying glass icon, hover over any element of the page – be it text paragraphs, images, or list items – and then drag that selection to place it at a different location.
3. Edit your Web Pages and make inline
Web pages are non-editable in the browser but there’s a little trick that will let you edit web pages inline as you do in a word processor. Open Chrome Dev Tools, switch to the Console tab and type document.body.contenteditable=true at the command prompt. Voila! The page becomes editable.
4. Google Chrome |Calculator
5. Extraction of Information from a Web Page
You can run multi-line commands in the console window to parse and extract data from web pages. For example , $$(‘a’) selector will hold all the hyperlinks that are provided or present in the page. You can then use a simple ”for” loop to export these hyperlinks as plain text.
6. Put a fake Location
Some web browsers may request your geographic location for their personalization and with Google Chrome Dev Tools, you can easily fake your location. Click the Settings gear in Dev Tools and edit a different set of latitude and longitude values with that site. It will be help you to hide your actual location.
7. Reveal Hidden Passwords
Chrome may auto-fill the password field on a login form of a web page but you can’t view that password as it’s hidden behind asterisk characters. You can however use Chrome Dev Tools to change the type of the password input field from “password” to “text” and reveal the hidden password.