Most desktop web browsers, if not all, provide Developer Tools to solve problems. It is not only for developers. Everyone without any coding experience can use it as well. With Developer Tools, I can do many things that I thought I needed an extension or program to get done.
In this post, I will show you 10 Chrome Developer Tools features that everyone should know.
How to Access Developer Tools
In Google Chrome, click the three-dot icon to open the Chrome Menu in the browser’s upper-right corner and select More Tools > Developer Tools. You can also press F12 on Windows or use the shortcut Option + ⌘ + J on macOS. It is pretty much the same to open Developer Tools in other web browsers like Firefox, Safari, or Edge.
You can also watch the video below to see how to use Developer Tools.
Take Full-Size Screenshots
Both Windows and macOS provide built-in features to take screenshots, but you cannot use them to take a screenshot of a full web page. Surely, you can install Chrome extensions or third-party apps to do the trick. Actually, that is not necessary because you can use Developer Tools to take full-page screenshots.
Step 1. Press F12 on Windows or Option + ⌘ + I on macOS.
Step 2. From the Developer Tools Menu, press Shift + Ctrl + P on Windows or Shift + Command + P to bring up the search panel.
Step 3. Type and search for “screenshot”. You will then have 4 screenshot-related results, area screenshot, full-sized screenshot, node screenshot, and screenshot. Just select a full size screenshot to capture the full page screenshot.
See Mobile and Tablet View
In DevTools, you can click on the mobile device icon at the top left to toggle between different mobile devices to see how a page is displayed on mobile devices. You can select iPhone X, Moto G4, Pixel 2 XL, Galaxy Fold, iPad Pro, etc. You can set a custom screen size.
Switch your User Agent
Mobile view is only changing the screen size. If you want to see how a page is truly loaded on other devices, you can switch the user-agent in Developer Tools. You can follow the steps below to change User Agents.
Step 1. Click on settings > More tools > Network conditions.
Step 2. Then uncheck select automatically and select the User agent you like.
Step 3. Reload the page.
Speed video
As you may know, most web pages are written in HTML 5 nowadays. In that case, you can use a little script to control the video playback speed. No need to install any extension or app.
Step 1. On the webpage where the video is playing, right click and select Inspect to open Developer Tools.
Step 2. From Developer Tools, click on the Console tab and then paste the code below::
var videos = document.querySelectorAll(“video”);
for (var video of videos) {
video.playbackRate = 1.5;
}
completion(videos.length);
Step 3. You should change the number 1.5 to any playback speed that you want and then press Enter.
It is the same for Firefox or Safari. If you use Chrome to play your local video, you still use this script to play your local videos at a faster or slower playback speed.
Download Media
There are many downloader tools and some of them are paid. Actually, the Developer Tools can help you download most of the video, audio, or photos online. Surely, you need to be able to watch the video before you can use the method below to download it.
Step 1. Play the video that you want to download on your web browser. Firefox is more recommended than Chrome in terms of downloading media.
Step 2. Open Developer Tools, click on the Network tab, and select Media. If you want to download photos, click IMG instead of Media.
Step 3. Reload this page and then you will see a few URLs listed, which are the download links for the media that you want to download.
Step 4. Open the URL in a new tab and right-click to select “Save video/audio as” to download it.
If you see nothing after you click Media, then you can click on the All tab and sort them by size. The File size for the video is usually larger than others, so you should find the video download URL in the top results. This is quick and helpful when you want to download private videos from Instagram or Facebook.
Edit Text
You can edit any text on a web page with Developer Tools. You just right click on the text that you want to edit and select Inspect. From there, you can double click on the text to edit. You can also right click to select Delete Element to remove any part of element from a web page.
Clear Site Data
Developer Tools, you can easily clear cache and other site data to leave no trace. To do so, go to Applications > Clear storage > Clear site data.
When I open Deezer website, it says Coming Soon because Deezer is not available in my county. Then I turn on VPN and reload the page, but the Coming Soon is still there. That is because the page has saved the cookies. To access Deezer, I just clear site data and reload and then I can access Deezer music and download music from Deezer.
Switch your Reported Location
Developer Tools also allows you to switch your reported location. For example, if you want to view Google search results from another city, you can select settings > more tools > sensors in the Developer Tools.
Then you can choose from the list of cities or add your custom location. You can easily find the geolocation parameters from Google Maps.
After that you can go to Google Search and perform a query. Scroll down and click on “Use Precise location”. If this failed to fetch your changed location, you can go to Chrome Settings and allow the website to access your location.
View Hidden Password
You can go to Chrome Settings to view your saved password, but you can also use Developer Tools to view hidden passwords from a web page. On the login page that you want to view the password, right click on the hidden password and select Inspect to bring up Developer Tools.
Find the “Type = “Password”” and change the “Password” to Text. After that, you can see the password.
Copy Text from Protected Web Page
You may have found that you cannot select or copy text on some websites. Most websites use JavaScript to disable text selection and right-clicking. Luckily, you can disable JavaScript and copy any text you want.
To disable JavaScript on Chrome:
Step 1. Open Developer Tools and press Control+Shift+P on macOS or Shift + Ctrl + P to bring up the search panel.
Step 2. Type “disable” and select Disable JavaScript.
Step 3. Reload the page and you can copy text from protected web pages.
You can also click the three-dot icon from Developer Tools and select More Tools > Network Request blocking and add the .js pattern to block all JavaScript.
There is another way to solve the problem when you cannot copy text from web pages. You just select the specific text you want to copy and then right-click to select Inspect Element to bring up Developer Tools, you can copy text from there.
Conclusion
I have no experience in coding. These are the 10 features I use regularly. With these features, I have removed a few Chrome extensions and apps. All in all, these have saved me a lot of time. I hope you find these Chrome Developer Tools features helpful as well.