10 Useful Tips To Use Chrome Developer Tools Like Pro

There are many things you can do with Chrome Development tools which most people are unaware of. In this article we are going to reveal some useful things you can do with Chrome Development tools. For instance, how to bypass restrictions set by the website, colors, finding out fonts and images that are hidden on the surface or even forgotten passwords.

How to open Developer tools in Chrome?

• Click on Customize chrome ( ⋮ ) 
• Next, More tools 
• Followed by Developers 

You may also right-click on the page you are currently in and want to edit and choose inspect. You can also use the keyboard short cut Ctrl+Shift+I (Cmd+Option+I for Mac). By default, it usually opens a new window to right. To move the window to the button simply click the 3 vertical dots bottom at the top right ( ⋮ ) follow by selecting the bottom docking option. You may decide to turn on the dark mode form the settings, to ease your eyes from ray of light. Whenever you open the inspect element it will recall back the changes you made.

Read Also: How to Screenshot on Snapchat Without Your Friends (Senders) Noticing

10 Chrome Developer Tools Tips To Advance your usage

1. How to Edit a Web Page

This is one of the basic use of the Developer tools but it must not be neglected. With this feature you can temporarily edit any Web page in your browser.

To perform this operation, simply open any web page of your choice on Chrome and right-click and select Inspect Element. Next go to console tab, follow by pasting the below line of code and hit enter.

document.body.contentEditable = true 

After pasting the code, it will make the entire web page editable like any Word document. Simply click anywhere and start typing. Note that all the effects will disappear after refreshing the page, so to avoid that you may screenshot the edited page before refreshing or closing the browser.

2. How to Revel the save password

Peradventure you want to login to your Instagram on your mobile, let say you have forgotten your password. But in your previous login you saved it in your browser. Instead of going through the process of password reset, you can use the developer tools to reveal the hidden password.

Simply, right-click the password field and then choose “Inspect Element.”

Immediately the document inspector window will open and all you have to do is to just replace the word “password” with “text” in the password-type input field. This act should be able to reveal the password hidden in asterisks.

3. How to Use the Color Picker

To use the color picker simply open up the Chrome Development tools, click on Style tab in the left side, proceed by clicking on the small box next to the color. This will pop-up the 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. Proceed by copying the hex code and paste it in Photoshop.

4. How to Change Website to the Mobile Layout

Immediately you open up any website on your browser, there are so many things which is sent under the hood without your notice, such as your IP address, URL, Location, User-agent and the exact date and time.

The user agent helps the website to identify your browser. In some occasions changing the user-agent helps a lot. For Instance, if you want to check if your website is responsive or not. But it is good to access the different version of the website. For example, some website has the specific browser in which they perform well. Let take Instagram for instance, as you all know uploading pictures from your computer is not allowed accept it is done from a mobile device. So, you can view your desktop browser on mobile format and perform your upload to Instagram.



To carry this out, simply open up the Chrome Development tools, click on 3 vertical dots, and under more Tools select Network conditions. Next, uncheck the box User agent, select automatically and from the popup box select a Mobile Browser. Note every website has a browser that will be compatible to user view, so make sure you select a browser that will be compatible to every operation that you are carrying out. After selecting the mobile browser to upload picture to Instagram, close the window and refresh the page. From the image below, you can now see there is an upload button for you to be able to upload pictures to Instagram from your PC.

5. How to Search Anything

One useful feature that is difficult to figure out is the search. The “Search” tab prompt you the opportunity to search a web page for a particular content or an HTML tags.

For instance, if you actually want to find out the font a website is using, all you need to do, is to click the 3 dots follow by clicking Search and proceed by typing in the font or to be precise use font-family, and with that you will discover the information in the lines code.

Or let say I eventually landed into a website that is using a video in the background and am anxious to find out the exact video, in this instance saving the page is not an option. Rather use the Chrome Development tool, and search for “video” scroll through the results and see if you get any URL. I a common sense since it a video it might have an extension of mp4 try that on the search. You might have a couple of results with mp4, one of them might likely be the video file, click on it to bring up the URL. Copy that URL and paste in the browser, and off you go.

6. How to Remove Popups

Another feature that will definitely interest you, is removing pop-ups from the website you are accessing. Let take Quora one of the most popular question and answer website that usually offer content to its registered members only. If you stumble upon this great website from Google and try to access or read more than one page you will be prompt with a pop-up to sign-up. Follow this procedure to remove the pop-up. Simply right-click on the current page and open the inspect elements. Continue moving your cursor to the line of code until pop-up window is totally highlighted. Once done, simply delete that line of code. In some cases, there may be another transparent layer on the page’s body which makes the links unresponsive. Delete that also.

7.How to Change Your Browser GPS Location

For your notice there are 2 ways to detect on a website where you are browsing from, it can either be from your IP address and your browser location. You may easily change your IP address by using VPN and Smart DNS, but to change your browser location is a very difficult task.

For instance, there was a day, I was browsing CBS with VPN, and it worked excellently. But when I want to watch local channels on CBS, it prompts me with a pop-up asking for my browser location. And when I clicked on Allow, it says the content is not available in my location.

To avoid this, simply open Developer Console, simply by right-clicking on the screen. Proceed by clicking on the 3 dots button at the top-right and then follow by clicking the “Sensors” option from More. After this, a new window will pop-up in the bottom half of the developer tools window, Under Geolocation, Select “Custom location.” Proceed by putting location based on latitude and longitude, in case you don’t know the values, you can use google maps to find out the value that suite your location or simply select the name of the city like London. Now, just reload the page, allow location data in the pop-up window. After that if I refresh the page and click on allow location as you can see from the below image, I can be able to stream local stations.

8. How to Use Ruler

Just like the previous feature which is color Picker tool, Google Developer Tools also imbeds Ruler. This is usually come in place when you want to measure pixels across the height and width of the current page.

To make the Ruler visible, simply right-click on the page where you want to use the Ruler tool and click “Inspect Element”. 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 then select Show Ruler option.

9. How to Clear Cookie

Chrome gives you an option to delete cookies for the entire browser from the Setting page. Google Chrome grants you the opportunity to erase(delete) cookies for the entire browser from the setting page. But in case you may want to delete a particular cookie from the Google Chrome then Chrome Development tools is the best option.

Simply proceed 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.

10. How to Use Inspect Element on Android

Since there is no measure of getting a fully functional Chrome developer tool on Android device Inspect and Edit HTML Live is the next option to get similar kind of functionality on your Android Smartphones. Just install the app from Play Store to get started. Type in the website domain name in the address bar, follow by tapping on the small black finger icon next to URL bar. This is now your element selector, now wherever you tap, it’ll show you the source code, in which you can easily edit and see the live changes or output. Generally, there are two major features of the app which are See and Edit website source code, and also inject javascript into the specific webpage.

The app is free to use but contain ads for unpaid users, which can be removed by a one-time purchase of the pro version for $3.

Read Also:Latest Eight (8) Best Open Source Browser for Android (2018) for Quick Internet Access

To round it up, the developer tools has more usage than just viewing just the website the way it is, you can toy around with the Chrome developers’ tool to alter most thing that the website is not doing on the server side. Alternatively, you may want to try Web Developer extensions to get one-click access to all the features and lots more.

   

Get our updates delivered to your inbox