Chrome Developer Tools: 10 Useful Tips To Use It Like Pro

You might have heard of this powerful feature in your Chrome browser – Chrome Development tools. And while it’s true, that most of it is useful for web developers, there are times when it’s useful to an average internet user. In this article, we will focus on useful stuff that you can do with Chrome developer tools. Like, how to bypass restrictions set by the website, finding out fonts, colors, and images that are hidden on the surface or even forgot passwords.

How to open Developer tools in Chrome?

To open Chrome developer tools in Google Chrome, click on Customize chrome ( ⋮ ) > More tools -> Developer tools. You can also right-click on the page you want to edit and choose Inspect. I like to use the keyboard short Ctrl+Shift+I (Cmd+Option+I for Mac).

By default, it opens a new window to right, but I prefer to keep it in the bottom, as it gives me more room to expand it. To move the window to the bottom click the 3 vertical dots button on the top right ( ⋮ ) then choose the bottom docking option. You can also turn on the dark mode from the Settings, makes it easier on the eyes. Now the next time open inspect element, it’ll remember my changes. 

chrome developer tools

Also Read: How to change google chrome background

10 Chrome Developer Tools Tips

1. Edit a Web Page

Now, this is the most basic use of the Developer tools but has to be included. You can temporarily edit any Web page (like Wikipedia) in your browser. To do this, open any web page you would like to edit on Chrome and right-click and choose Inspect Element. Go to console tab (should be the second option from the top), next paste the following line of code and hit enter.

document.body.contentEditable = true

This will make the entire webpage editable like any Word document. Just click anywhere and start typing. Although do remember all the effects will be gone once you refresh the page. So, make sure you screenshot the page before closing the browser.

Edit a Web Page

2. Revel the save password

Say you want to login to your Instagram on your mobile, but you don’t remember the password. Fortunately, you have it saved in your browser. Now, instead of going through the painstaking process of password reset, you can use developer tools to reveal the hidden password.

Right-click the password field and then choose “Inspect Element.” This will open the document inspector window and all you have to do is replace the word “password” with “text” in the password-type input field. And this should reveal the password hidden in asterisks. 

Revel the save password3. Use the Color Picker

I’m a sucker for minimal colors and more often than not, I’m scrolling minimal images on Google to get inspiration for features images and thumbnails. Or say, if a particular website’s color scheme that catches your eye, and wants to find out what color they are using, well you can always install a color picker extension. But there is a faster way to do it.

Bring up the Chrome Development tools, in the left side click on Style tab, click on the small box next to the color. This will bring up Color picker tool, now, click on anywhere on the webpage, whose color you want to find out and the color picker will give you the hex code. Simply copy the hex code and paste it in Photoshop.

Use the Color Picker4. Change Website to the Mobile Layout

Whenever you open a website, a lot of your data is sent under the hood, like your IP address, exact date and time, the URL, where are you coming from and the User-agent.  

The user agent helps the website to identify your browser. And in some cases changing the user-agent helps. For example, if you want to check if your website is responsive or not. But my favorite one is accessing the different version of the website. For example, some govt websites in India open open in Internet Explorer only, or for a global example, let’s take Instagram. As you know, you can not upload pictures to Instagram he on the computer, but you can do it from its mobile website. So, why not masquerade the desktop browser to that of mobile?

To do this, fire up the Chrome Development tools, Click on 3 vertical dots, and under more Tools select Network conditions. There uncheck the box that says, User agent, select automatically and from the popup box select a Mobile Browser. If you are trying to access a govt website select a different compatible browser. Now close the window and refresh the page. As you can see, there is a fully function upload button, which you can use to upload pictures to Instagram from the computer.

Change Website to the Mobile Layout

5. Search Anything

Another useful feature that’s hard to pinpoint is the search. The “Search” tab allows you to search a web page for specific content or an HTML element.

For example, say if you want to know what font a website is using, you’ll need to click the 3 dots then click Search and type in font or to be precise use font-family, and you can find the information in the lines of code.

Or let’s take another example, I stumble upon a website that using a video in the background and I’m curious to find out which video is it exactly, Now, saving the page won’t work. Instead, use the Chrome Development tool, and search for “video” scroll through the results and see if you get any URL. In that case use common sense, if it’s a video file, it mostly like have an extension of mp4, try that. And there you go, now you have a couple of results with mp4, one of that should be the video file, click on it to bring up the URL. Copy that URL and paste in the browser, and off you go.

use search

6. Remove Popups

Another useful feature of i is removing pop-ups from the website. For instance, let’s take Quora- a popular question answer website that offers content to its members only. If you come to this site from Google and try to read more than one page, a pop-up will appear asking you to sign-up. Here is how to remove it, right-click on the page and bring up the Inspect elements. Move your cursor to the line of code until pop-up window (covering the content) gets highlighted. Once done, delete that line of code. Sometimes there is another transparent layer on the page’s body, that makes the links unresponsive. Delete that as well.

Read: How to see Blocked Content on Websites

Remove Popups

7. Change Your Browser GPS Location

Now, there are 2 ways, any website find out where you are browsing from – your IP address and your browser’s location. While you can easily change the IP address, by using our VPN and Smart DNS, it’s not easy to change browser location.

For example, the other day, I was browsing CBS with VPN, and everything worked find. But, when I decided to watch local channels on CBS and it showed me a popup asking for my browser location. And when click on Allow, it says the content is not available in my location.

To fix that, open Developer Console, by right-clicking on the screen. At the bottom of the panel, press the three-dot button on the top right, and then click the “Sensors” option from More. A new window will open in the bottom half of the developer tools window, Under Geolocation, select “Custom location.” Now put in your location based on latitude and longitude, if you don’t know these values, you can always use Google maps. Or just select the name of the city like California. Now, Reload the page, allow location data in the pop-up window.  And now if I refresh the page, and click on allow location, as you can see, I’m now able to stream local stations. 

Change Website GPS Location

8. Use Ruler

Just like a Color Picker tool, Google Chrome Developer Tools also Include a Ruler. This comes in hand when you want to measure pixels across the height and width of the page.

To bring up the Ruler, right-click on the page where you would like to use a ruler and click “Inspect Element”. Next, you need to enable it for the first time, click on the 3 vertical dots in the top-right and Settings. A new window will open, under the Elements section select Show Ruler option.

Use Ruler9. Clear Cookie 

Chrome gives you an option to delete cookies for the entire browser from the Setting page. However, if you want to delete specific cookies from Google Chrome then you can do it from the Chrome development tools.

Go to the website whos cookie you want to delete, open the Application tab, and choose Cookies from the list. double-click on it to expand and then you can right click on it and select Delete option.

Clear Cookie

10. Use Inspect Element on Android (Kind of)

While there is no way to get a fully functional Chrome developer tool on Android, you can use Inspect and Edit HTML Live to get something similar. To get started, install the app from the Play Store and launch it. Type in the website domain name in the address bar, next tap on the small black finger icon next to URL bar. This is your element selector, now wherever you tap, it’ll show you the source code, which you can edit and see the live changes. In general, there are 2 main features of the app – See/Edit website source code, and Inject javascript into the given webpage.

The app is free to use but shows small banner ads at the bottom of the page, which can be removed by a one-time purchase of pro version for $3.

inspect element in android

How do you use Chrome Developer tool?

Overall, the developer tools have more use cases than messing around with your fav websites. In short, anything that the website is not doing on the server side can be altered with Chrome developer tools. Alternatively, you can use Web Developer extension to get one-click access to all the features and more.  

 

About Mrinal Saha

Mrinal is a tech geek who spends half of his day reading and writing about tech. While the nights are spent on shooting or editing YouTube videos. Feel free to geek out with him on-