The Best Feature of Google Chrome You Aren’t Using

Did you know that you can use 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? 

CHROME DEVELOPER TOOLS FOR NON-DEVELOPERS

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. REARRANGE THE TEXT AND IMAGES ON A PAGE

With 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.

2. EXPERIMENT WITH 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.

3. REVEAL THE 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.

4. EDIT YOUR WEB PAGES 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.

5. CHROME AS A CALCULATOR

While the Console tab is active, you can write arithmetic expressions and also perform date calculations like how many days between two dates or write a date as a human-readable string. A little know of the Date object in JavaScript will come handy. Chrome stores the value of the previous calculation in a special $_ variable that can be used in lengthy calculations.

6. EXTRACT INFORMATION FROM A WEB PAGE

You can run multi-line commands in the console window to parse and extract data from web pages. For instance, $$(‘a’) selector will hold all the hyperlinks that are embedded in a page. You can then use a simple for loop to export these hyperlinks as plain text.

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

7. FAKE YOUR LOCATION

Some web may request your geo-location for personalization and with Chrome Dev Tools, you can easily fake the location. Click the Settings gear in Dev Tools and share a different set of latitude and longitude values with that site.