You might be aware of the well known Google Chrome feature called Chrome Developer Tools. While it's true that it is very useful for the web developers, but there are many useful hacks that are quite handy for average internet surfer. Here, in this article, I'm going to show you some of the useful features or tips for the average international users like me...
How to Open Developer Tools in Chrome?
To open Developer Tools in Google Chrome click on the three-dot (⋮) > More Tools > Developer Tools. You can also Right Click on any page that you want to edit and from the menu click on Inspect also you can use the keyboard shortcut (Ctrl + Shift + I) on Windows PC or (Command + Option + I) for Mac.
By default, it will open Developer Tools window on the right side of the browser but you can change its position. To move the Developer Tools window at the bottom or towards the left side just click on the three-dot (⋮) menu in Developer Tools window and select whatever position you like, you can also turn on the Dark mode as this make it easier for the eyes of the user.
1. Edit a Web Page
I know this is the most used Developer tools trick but this has to be added to this list as it allows you to edit any web page that you want. To do this just open any web page that you want to edit on Chrome and right- click and from the menu choose Inspect Element. Now go to the console tab and paste the following line of code and hit enter.
document.body.contentEditable = true
This will make the entire page editable like any word or text document. Now on the Page just click anywhere and start typing. Remember this effect will be gone once you refresh the page. So, make sure you get a screenshot of your edited page before closing refreshing it.
2. Edit an HTML Element
You can edit an HTML on the preview changes by selecting any element that you want to edit, choosing a DOM element within the panel, and double-clicking on the opening tag to edit it. The closing tags will be automatically updated for you. Any Changes will show up in your browser as if the change had actually been made to the source code.
3. Reveal the saved Passwords in Chrome Browser.
Say you want to login Instagram, Facebook, or Gmail on your mobile, but you don't remember the password but fortunately, you have it saved in your web browser. Now, instead of going through the exhausting process of password reset, you can simply use the developer tools to get that saved password.
All you have to do is Right-Click on the password field and then choose "Inspect Element". This will open the developer tools window all you have to do is replace the word "password" with "text" in the password-type input field. This will reveal the password.
4. Change Website to the Mobile Layout.
For example, if you want to check if your website is responsive or not. Or you want to upload pictures right from your pc as you have edited them on Photoshop but can't do this on the regular desktop version of Instagram. Fortunately, you can do this by using Developer tools.
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 full function upload button, which you can use to upload pictures to Instagram from the computer.
5. Change Your Browser GPS Location.
Any website that you are browsing finds out from where you are browsing also your IP address and your browser's location. Well, you can easily change your IP address by using VPN or smart DNS but it's not easy to change your browser 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.
6. Use the Native 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.
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.