Element Inspector Tricks: 8 Must-Know Hacks! 🛠️
The Element Inspector in your browser may seem like a developer-only tool, but you can actually do some pretty cool stuff with it even if you don't know anything about programming! 🚀
1 . Download Images
Maybe you need to download an image from a website. You try to right-click and hit “Save Image,” only to find that option is grayed out or the “Save Image” button doesn’t appear. Other times, you may only be able to download a thumbnail of the image, not the full file. 🤔 What’s up?
Developers often disable that “Save Image” button intentionally, or use a web framework that doesn’t allow downloading images that way. But there’s a handy workaround in the Elements inspector. You can grab any image asset from a website, in full size, in three simple steps. 📸
Step 1
Does right click on anywhere on the page and select “Inspect Element” or “Inspect.” You can also use the specific keyboard shortcut for the inspector within your browser. F12 works in most browsers and operating systems. I'm using Firefox for this demonstration, but the steps are identical. 🖱️
Step 2
Inside the Element Inspector window, click on the “Network” tab. The network tab should have “Images” as one of its submenus. Click on “Images.” 🖼️
Now reload the page, so that all image resources appear in the “Images” tab. Use the Refresh button next to the address bar from your browser or press Ctrl+R. 🔄
Step 3
And there you have it. The entire library of images should load in the list. The list is dynamically updated, so as more images are loaded on the website, they will appear here as well. 🖼️✨
You can hover over a file to see its preview and dimensions. Double-click to open the file in a new tab, where you can save it using the right-click menu. 💾
2 . Download Videos
Just like image assets, sometimes websites don't allow discharge videos directly. But you can download them by uploading them within the Elements inspector. Once they're uploaded to the inspector, simply double-click the file name to open it in a new tab. 🎥
Step 1
Open the Element Inspector window by pressing the F12 keyboard shortcut (it should work on most systems). Alternatively, you can right-click anywhere on the web page and select “Inspect.” The Element Inspector window should appear. 🖱️
Step 2
Click the “Network” tab and then “Media” to filter out everything except video files. Reload the page. Either by clicking the browser refresh button or by pressing Ctrl+R. 🔄
Step 3
The video files should load in a list. You can't preview them instantly, but you can double-click a file to open it in a new tab. There, you can right-click and download it. 🎬
3 . Capture Full Page Screenshots
If you want to save an entire web page, you can quickly download it as a PDF or HTML file. But what if you want to take a regular snapshot of the entire page? Here I'll explain how to do it. 📸
Firefox has a dedicated screenshot tool in the context menu, so I'm going to show you how to do it in Google Chrome and other browsers. 🌐
Open the inspector tool by right-clicking anywhere on the page or pressing F12.
Press Ctrl+Shift+P to open the Run window. Type Capture capture of full-size screen in this window. Click on it. 📄
A “Save As” window should appear instantly, allowing you to save the full page screenshot in JPG format. 💾
4 . Pretend You're on the Phone
Most websites load differently depending on the type of device and screen size. If you want to trick the site into thinking you're using a different device (for whatever reason), you can easily do so with the inspector tool. 📱
In Chrome, open the Element Inspector window from the right-click menu or with F12. Then click the little laptop and phone icon in the top left corner. Firefox has a similar button, called Responsive Design Mode (Ctrl+Shift+M). 🖥️
You will have a list of devices that you can emulate, and you can also manually adjust the size of the screen. Once you have chosen a mobile device, you will notice that your browser also simulates touch gestures. 📱✨
5 . Identify Sources
This tip is for creatives, but anyone who is curious about fonts on a website can use this trick. You can use the inspector tool to identify and sometimes even download fonts. 🖋️
First, open the Element Inspector tool. Then, click on the “Network” tab (it may be hidden in the overflow menu) and select “Source.”
Then press Ctrl+R. The rendered fonts will load into the list, probably in WOFF format. You can download them directly by double-clicking the font name. For example, How-To Geek uses Roboto as its default font. 🔤
If you need more detailed information about the font, go to the “Elements” tab and select “Styles.” Scroll down to the font family property and click on it. The corresponding text will light up on the web page. This way you can identify a font exactly. 🎨
6 . Edit Text on a Page (Temporarily)
Did you know that you can temporarily edit almost everything on a web page using the inspector? This tool allows you to edit the code that makes up the website, so if you know a little bit of code, you can make the page look however you want (only on your machine, until you reload the page). 🛠️
Even if you don't know any coding, you can edit basic text on any web page. It can be a fun little prank to play on your friends. 😉
Highlight the text on the page you want to edit and right-click on it. Then select “Inspect” or “Inspect Element.”
The relevant text snippet should appear in the Elements tab. Simply double-click and replace the text with anything you like. ✏️
Close the Element Inspector and you're done! Remember that if you reload the page, your changes will be undone. 🔄
7 . Delete Items
Just like editing text, you can also delete specific elements from a web page. Again, the changes will only last until you reload the page. ❌
Right-click on the item you want to delete, and then select “Inspect” or “Inspect Element.”
Hover over the labels “
”"until the entire element is highlighted. Then simply press the Delete key. 🔚
Just like that, it's gone! 🕵️♂️
8 . Identify Color Values
Another tip for creatives: you can get RGB and HEX values from any color on a web page with the eyedropper tool that you will find in the element inspector. 🎨
Right-click anywhere on the page and open the Inspector. By default, the Rules window opens within the Inspector tab. Scroll down to find any property labeled color.
The color property should have a colored circle or square next to it. Click on it to open the color picker and press the eyedropper icon next to it. 🖌️
You can hover this eyedropper anywhere on the page to find color values. Clicking on the eyedropper will automatically populate the property with the color value you just selected. You can easily copy it from here. 📋
These tips barely scratch the surface of what is actually possible using the Element Inspector. If you want to dive deeper into web development, here's a guide to get you started. 💻
