Skip to main content

Master Chrome Developer Tools - The Best Feature of Google Chrome You Aren't Using

Google Chrome is an awesome web browser but there’s an even more awesome feature built right inside Chrome that most of us rarely use - it’s called Chrome Developer Tools. Let the word “Developer” not intimidate you because us regular Chrome users, or non-developers, can also benefit from having some basic knowledge of Chrome Dev Tools.

Chrome Developer Tools for Non-Developers

Open this 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. 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.

order-list-items

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.

change-colors

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.

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

date-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 );

export-url-list

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.

Please watch the YouTube video for more tips. ↓

Best Resources for Learning Chrome Dev Tools

Here are some good online resources that will help you master Chrome Dev Tools.

  • codeschool.com - This online class by Paul Irish of Chrome team will help you try and explore all the features of Chrome Dev Tools.
  • developers.google.com - Official documentation with plenty of tips and tricks to help you master  Developer Tools.
  • vimeo.com - Patrick Dubroy of the Chrome team provides an in-depth demonstration of some of the lesser-known features of Chrome Dev Tools.
  • youtube.com - Ilya Grigorik, developer advocate at Google, discusses the advanced features of Dev Tools.
  • youtube.com - Paul Irish again discussing the new features of Chrome Dev Tools at that Google I/O event.
Labels:

Comments

Post a Comment

Popular posts from this blog

How to Get the Quiz Score in Google Forms with Apps Script

Teachers can easily create an online quiz using Google Forms and students can view their test scores immediately after form submission. Teachers can use Google Forms to create an online quiz and students can view their test scores immediately after  form submission . With Apps Script, you can set up automatic  email notifications  and send quiz scores to parents after a student has taken the quiz. Here’s a sample Google Script that will iterate through every answer in the most recent Google Form response and log the max score (points) of a gradable question and the score for the respondent’s submitted answer. function getGoogleFormQuizScore ( ) { // Returns the form to which the script is container-bound. var form = FormApp . getActiveForm ( ) ; // Get the most recently submitted form response var response = form . getResponses ( ) . reverse ( ) [ 0 ] ; // Gets an array of all items in the form. var items = form . getItems ( ) ; for ( var...
Post a Comment
Read more

Let People Quickly Save your Events on their Calendars

Create Add to Calendar links for emails and websites and let users quickly save your events on their own Google Calendar, Outlook or Yahoo Calendar. You are organizing an online event - maybe a meeting on Zoom or a training session hosted on Google Meet - and you would like the attendees to add the event to their own calendars. Once added to their calendar, the event will act as an automatic reminder and attendees will get a notification when the conference is about to start. There are two way to go about this: You can create a new meeting in your online calendar (Google, Outlook or any other calendar) and add the individual attendees as guests so the event automatically gets added to their calendar as well. You can include an “Add to Calendar” link or button in your email messages,  forms  and website pages. Anyone can click the link to quickly save your event on to their calendars - see  live demo . Create Add to Calendar Links for Emails and Websites The  Add to C...
Post a Comment
Read more

How to Test your Eyes using the Computer

They say that you should get your eyes checked every two years but if haven’t had the chance to see a doctor all this time, you can test your vision on your computer as well. Of course these self eye tests are no substitute for visiting your doctor but if you follow the steps well, you may get some idea about how good (or bad) your vision is.  Test your Eyes Online with the Snellen Eye Chart The Snellen Eye Chart Most of us are familiar with the Snellen Chart that has rows of alphabets of different sizes – you read these letters from a distance, usually twenty feet, and the smallest row that you can recognize accurately indicates whether you have normal vision or not. The various eye testing tools that are available online make use of the same Snellen chart. Test your Eyesight Online You should start with University at Buffalo’s  IVAC tool . Use a physical ruler to measure the length of the line on the screen (the length will vary depending on your screen resolution). Also mea...
Post a Comment
Read more