Inspect Element on Chrome: 10 Tips To Use It Like Pro.
You may have heard about this powerful feature in your Chrome browser – Chrome Development Tools. And while it’s true that most of them are useful for web developers, there are times when it’s useful for the average Internet user. In this article, we’ll focus on the useful things you can do with the Chrome developer tools. For example, how to get around restrictions set by the site, find out fonts, colors and images that are hidden on the surface or even forgot passwords.
How do I open developer tools in Chrome?
To open Chrome developer tools in Google Chrome, click Customize Chrome (â‹®) More Tools – Developer Tools. You can also right-click the page you want to edit and select Check. I like to use the keyboard shortcut Ctrl + Shift + I (Cmd + Option + I for Mac).
By default, it opens a new window on the right, but I prefer to leave it at the bottom as it gives me more room to expand it. To move the window down, click the button with three vertical dots in the upper right corner (â‹®), then select the dock option at the bottom. You can also turn on dark mode in Settings, which makes it easier for your eyes. Now the next time we open the check item, it will remember my changes.
See also: H how to change the background of Google Chrome
10 Chrome developer tools tips
1. Edit a web page
This is now basic use of developer tools, but should be enabled. You can temporarily edit any web page (like Wikipedia) in your browser. To do this, open any web page you want to edit in Chrome, right-click and select Inspect Element. Go to the console tab (there should be a second option from the top), then paste the following line of code and press Enter.
document.body.contentEditable = true
This will make the entire web page editable, just like any Word document. Just click anywhere and start typing. Remember though that all effects will disappear after refreshing the page. So, make sure you take a screenshot of the page before closing your browser.
2. Reveal the saved password
Let’s say you want to log into your Instagram on your mobile, but don’t remember the password. Fortunately, it is saved in your browser. Now, instead of a painstaking password reset process, you can use developer tools to reveal hidden password.
Right-click the password field and select Verify Item. This will open the Document Inspector window and all you have to do is replace the word “password” with “text” in the password field. And that should show the password hidden by asterisks.
3. Take a screenshot of the web page
Did you know that you can take a screenshot of a webpage using Chome Dev Tools without using additional plugins? The function is quite simple and only offers two settings: the visible part of the webpage and the entire webpage. It can take screenshots for the mobile version of a webpage, and you can select multiple mobile layouts from the dropdown menu at the top.
To take a screenshot, open the Chrome developer tools. Go to the Console tab and press ctrl + shift + M (windows) or cmd + opt + M (Mac). Then click the three-dot menu in the upper-right corner of the web page and select “Take Screenshot” or “Take Full Size Snapshot”. And that’s it, your screenshot will be saved in your downloads folder.
Also Read: 7 Best Chrome Screenshot Extensions For Any Occasion
There are other ways to take screenshots and you can always install the screenshot extension or use your own computer screenshot shortcut prtsc (windows) and cmd + shift + 4 (MacOS), but this method works just as well.
4. Use the Color Picker
I’m a lover of minimal colors and most of the time I scroll through minimal images on Google to find inspiration for images and thumbnails. Or, say, if the color scheme of a particular website grabs your attention and you want to know what color they are using, you can always install a color picker extension. But there is a faster way to do it.
Open Chrome Development Tools, on the left, click the Style tab, click the small rectangle next to the color. This will bring up the color picker tool, now click anywhere on the webpage that you want to color and the color picker will give you a hex code. Just copy the hexadecimal code and paste it into Photoshop.
5. Change website to mobile layout
Every time you open a website, a lot of your data is sent under the hood, such as your IP address, exact date and time, the URL where you came from, and the User-agent.
The user agent helps the website identify your browser. And in some cases, changing the user-agent helps. For example, if you want to check if your site is responsive or not. But most of all I like access to a different version of the site. For example, some government websites in India only open in Internet Explorer, or take Instagram for a global example. As you know, you cannot upload photos to Instagram on his computer, but you can do it from his mobile site. So why not disguise your desktop browser as a mobile one?
To do this, launch the Chrome Development Tools, click the 3 vertical dots and in the More Tools section select Network Conditions. Uncheck the box that says “User agent, choose automatically” and select your mobile browser in the pop-up window. If you are trying to access a government website, please select another compatible browser. Now close the window and refresh the page. As you can see, there is a fully functional upload button with which you can upload photos to Instagram from your computer.
6. Look for anything
Another useful feature that is difficult to define is search. The Search tab allows you to search a web page for specific content or HTML element.
For example, if you want to know what font a website is using, you need to click 3 dots , then click Search and enter a font, or to be precise, use font-family and you can find information in lines of code.
Or, to take another example, I stumbled upon a website that uses video in the background and I’m curious to know which video exactly. Now, saving the page won’t work. Instead, use the Chrome dev tool and search for “videos” , scroll through the results and see if you have any URL. In this case, use common sense, if it’s a video file, mostly it has mp4 extension, try this. And so now you have some mp4 results, one of which should be a video file, click it to open the url. Copy that url and paste it into your browser, and go.
7. Remove pop-ups
Another useful i feature is removing pop-ups from website. For example, take Quora, a popular Q&A site that only offers content to its members. If you visit this site from Google and try to read more than one page, a pop-up window will appear asking you to register. Here’s how to remove it, right click on the page and open Inspect items. Move the cursor to the line of code until the popup (covering the content) is highlighted. After that, remove that line of code. Sometimes there is another transparent layer in the body of the page, due to which the links do not respond. Delete that too.
Read: How to See Blocked Content on Websites
8. Change your GPS browser location
Now any website has two ways to know where you are browsing from – your IP address and the location of your browser. While you can easily change your IP address using our VPN and Smart DNS, changing your browser location is not easy.
For example, I was browsing CBS over VPN the other day and everything worked fine. But when I decided to watch local channels on CBS, it seemed to me a popup asking for my location in the browser. And then click Allow, it says the content is not available in my location.
To fix this, open the Developer Console by right-clicking the screen. At the bottom of the panel, click the button with the three dots in the upper right corner, and then select the “Sensors” option from the “More” menu. A new window will open in the lower half of the developer tools window. In the Geolocation section, select Custom Location. Now enter your location based on latitude and longitude. If you don’t know these values, you can always use Google Maps. Or just choose the name of the city, for example California. Now reload the page, allow the location data in the popup. Now, if I refresh the page and click Allow Location, as you can see, I can broadcast the local stations.
9. Use a ruler
Like the color picker tool, the Google Chrome developer tools also include a ruler. This is useful when you want to measure pixels by the height and width of the page.
To bring up the ruler, right-click the page on which you want to use the ruler and click Inspect Element. Then you need to enable it the first time, click on the 3 vertical dots in the upper right corner and select Settings. A new window will open, under Elements, select Show Ruler.
10. Determine download speed on Chrome
If you want to limit your download speed, you can do so using the Chrome Dev tools. This not only limits the download speed of real packages, but also streaming. Basically, you can isolate the tab and force it to load according to the speed you just set. It works like a charm when you want to limit your browser bandwidth while watching a movie.
To set the speed for a tab, go to developer options and click the options button next to audit and select settings, or you can just press F1 to open the settings. Go to the “Regulation” tab and click “Add your own profile”. You can name the profile and set the download and upload speed. After adding the shapes, click Add and you’re done.
This profile will only work on the currently open tab, and you will need to leave the developer options window active, otherwise throttling will not work. To activate the profile, go to the network tab in the developer tools and click the drop-down menu next to Offline. Select a custom profile and your page is now adjustable. Anything downloaded from this page will be capped up to the set limit. Just be sure not to close the checkout window or refresh the page.
How do you use the Chrome developer tool?
Overall, developer tools have more use cases than messing around with your favorite websites. In short, anything a website doesn’t do on the server side can be changed using the Chrome developer tools. Alternatively, you can use the Web Developer extension to have one-click access to all features and more.