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

The Most Awesome Online Teachers for Learning Web Development

For the past few months, I have been on a learning spree looking to enhance my existing coding skills and also learn new programming languages and frameworks. In this process, I have watched a countless number of video tutorials and online courses that pertain to programming and, specifically, web development. In my quest to become a better developer, I’ve come across several awesome “teachers” who aren’t just excellent programmers but awesome educators and have the art of explaining complex and difficult concepts. Learn Modern Web Programming with the Best Online Teachers This is an attempt to highlight the best instructors on the Internet for JavaScript, React, Redux, Node.js, Firebase (database and storage), Docker, Google Golang, Typescript, Flutter (for mobile app development), Dart, Git, Webpack and Parcel bundler. I’ve taken courses by every single instructor mentioned here ( PDF ) and recommend them highly. Language / Platform Teacher / Course React.js Andrew...
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

Play any YouTube Playlist with VLC Media Player

Do you know that  VLC Media Player , the world’s favorite video player that supports nearly every video format, can also play YouTube videos on your desktop without requiring the web browser or the Adobe Flash player. To get started, open the VLC player, press Ctrl+N to open the Network URL dialog and paste any YouTube video URL in the input box. The Benefits of Watching YouTube Videos with VLC The streaming videos will play inside VLC Media Player just like any other local video file while offering some additional benefits not available inside the standard YouTube player. For instance: You can choose Video -> Always on Top inside VLC and the YouTube video window will stick to the foreground while you work on other tasks. Press the Loop button in the player controls and the YouTube video will play non-stop in a loop (also possible with  Chrome add-ons ). You can change the Playback speed of the YouTube video and make it run slower or faster than the normal speed. Use the To...
Post a Comment
Read more