Chrome DevTools; Inspect Element Tricks!

You might have heard about the Chrome DevTools, which is a powerful feature with many hidden functionalities. It is actually a very important tool for a web developer, who uses this built-in feature for web authoring and debugging. Chrome Developer tools provide developers access to the internal architecture of the web browser and web apps.

However, there are certain situations in which even a regular internet user can benefit from the Chrome inspect element feature. Here, you will find some cool and useful Inspect elements tricks and tips, which can make your browsing session much more productive.

How To Use Inspect Element In Chrome?

There are many ways to open the Chrome inspect element. You can open the Inspect element in Chrome by clicking on the three vertical dots (⋮) > More Tools > Developer Tools. Here, you will also find the keyboard shortcut for the same, which is Ctrl + Shift + I.

You can also right-click on any element in a page you want to edit and choose Inspect.

The quickest way to open the Inspect element in Chrome is using the F12 key.

By default, the dock opens pinned to the right-hand side of the window. However, you can change the position by clicking on the three vertical dots button on the top right of the developer tools console.

Chrome Inspect Elements Tricks And Tips

Chrome developer tools can be very useful for a lot of things during your browsing session. You can also use it to have fun on the internet, changing some websites temporarily and downloading specific content as well. Here are some of the cool Inspect element tricks that you can use daily for a variety of purposes.

Edit A Webpage Temporarily

Let’s start by taking a look at one of the coolest Chrome inspect elements tricks. Temporarily, you can edit any webpage that is open on your window, right from your browser. While developers, to test different elements on their websites usually use this feature, you can use this for testing how changing different elements can change the way a website looks.

You can edit texts, images, fonts and other content temporarily on any website available on the internet, even if you do not have the ownership of the domain.

To edit texts on any website (e.g. Wikipedia), follow these steps:

1. Open the webpage of your liking that you want to edit.
2. Right-click on any part of the website and select Inspect element. Alternatively, you can also use F12 to bring up the DevTools.
3. Go to the Console tab. This is usually the second tab at the top.
4. Type or paste the following line command and press Enter:
   body.contentEditable = true

This instantly makes the webpage editable like an MS Word document. You can make any change to the website, simply click on any content and start editing the site.

To edit images on any website, follow these steps:

1. On the webpage that you wish to edit, open Inspect Elements.
2. Under the Elements tab, scrub through the HTML code to locate the image source. It is usually under the <div class> element under the body tag.
   Tip: Use the Select Element button and simply click on the image to highlight the code for the same.
3. Under the Styles tab, drag and select the URL of the image.
4. Replace this URL with the link to the image that you want to replace it with on the page.
5. If you want, you can fine-tune the image placement by editing the CSS elements like size and padding next to the URL.

This will replace the image on the website with the one that you wish to see on the page. This can be a really fun way to test out new stuff on web pages.

To change the font style for any webpage, you will find the text-align, background color, color and border-color options under the Styles tab.

Change Layout To Emulate Other Devices

If you wish to see how some websites would look on other devices, you don’t have to actually have the device in your hand. The same feature can be done using the emulation feature in Google Chrome Developer Tools. You can change the layout of the webpage to what it would have looked like, in the device of your choosing.

1. Visit the page that you wish to change the layout.
2. Open the Chrome inspect elements tab by using the keyboard short Ctrl + Shift + I.
3. Click on the Toggle device toolbar button. This should be the second button at the top.
4. Change your device from the drop-down menu.
5. You can also change the screen size according to your choice using the bar just below the size toolbar.

This can be very useful for sites that have extra features on mobile websites, like messaging on Instagram etc.

Download Targeted Content From Websites

Ever happened to you that you liked an image or video on a site? You can download the image or video that you want from any website, by following these steps:

1. Visit the site that you wish to download content from on your browser.
2. Open the Inspect Element bar, by using the keyboard shortcut Ctrl + Shift + I, or from the right-click context menu.
3. Go to the Network tab.
4. Under the bar, click on Media.
5. Here, you will find the list of all the media items on your device. If you did not find your media item, simply refresh the page, and all the media items will be reloaded.
6. Right-click on the file link and select Open in new tab from the context menu.

This will open the media in a new tab, from where you can download the file that you wish to obtain.

 

Search The Page For Specific Content

One of the most useful features of the Developer tools is the search feature. The Search tab allows you to search for specific content or an HTML element that you want to find the source for on a website.

To use the Search feature, follow these steps:

1. Visit the webpage that you want to extract resources from on your browser.
2. Press Ctrl + Shift + I to reveal the Chrome inspect element.
3. Click on the three vertical dots to reveal the context menu.
4. Click on Search. Here you will also find the keyboard shortcut for the same (Ctrl + Shift + F).

In the search bar, you can search for anything specific from within the website. For example, you can extract every text that is within the same font by searching for font-family. You can also find the video or audio file that plays in the background of a website, by searching for video or audio.

Remove Popups

When you want to read some text online, the ad pop-ups can become very annoying by the constant distraction they produce. Or, the websites that do not net users read content without signing up on their website (e.g. Quora) can also become irritating, as signing up for a one-time service is not that useful.

You can use the inspect element in Chrome to remove these pop-ups as well. To do so, simply right click on the content and select Inspect element. Then, under the elements tab, locate the code of the pop up by hovering over the website. Then, simply delete that line of the code from the developer tools.

Sometimes, you may see another transparent layer on the website after deleting the pop-ups that make the links unresponsive. Delete the line of code for this part as well.

Change GPS Location Of The Browser

There are two ways in which a website can track your location, one is the IP address and the second is your browser location. Your browser location is the one that is asked for in the ‘the site wants to know your location prompt’.

While your IP address can be changed using an appropriate VPN (check out our list of best free VPN apps), your browser location cannot be hidden once you have clicked ‘Allow’ on that prompt. With Chrome inspect element, you can change the Geolocation of the browser.

1. Open the website on which you wish to see the content.
2. Next, use the keyboard shortcut or the right-click context menu to bring up the Chrome inspect element.
3. Click the three-dot button in the top right of the developer tools to reveal the context menu.
4. Click on More > Sensors.
5. A new Sensors window will open in the lower half of the developer tools panel.
6. Under Geolocation, change the location of your desire based on latitude and longitude.

7. Reload the page and allow location data in the pop-up window.

This removes the location blocks imposed by many websites, allowing you to stream content from other countries.

Reveal Saved Passwords

The autosave feature has removed the necessity to memorize passwords. However, when you need to log into another device, you may forget the password because it is “saved” on your browser. What’s worse, is when you try to access the password on the browser, for security reasons some websites do not have the ‘reveal password’ button.

Instead of going through the long and painful process of password reset, use the Inspect element on Chrome to reveal password hidden in asterisks on your browser.

1. On your browser, right-click the password field.
2. Select the Inspect element from the context menu. The highlighted code should correspond to the password field.
3. Inspect the line of code, and replace the type=”password” with type=”text”

This should reveal the password hidden in asterisks on the website.

Pick Colors

The internet is filled with beautiful images, each with a unique set of colors. Sometimes, you may come across a particular shade of some color, which you want to use in your next project. If you wish to know the hex code of that particular shade, you can do so from within the Chrome inspect element.

1. Open the Chrome developer tools by using the keyboard shortcut or right-click context menu.
2. In the left tab, click on the Style tab.
3. Click on the small color box next to the color CSS element. This will bring up the Color picker tool.
4. Click on anywhere on the webpage. The color picker will give you the hex code of the same.

You can next use this color in various places like Adobe Photoshop for your creative adventures.

Limit Download Speeds

If you are on limited network speeds, you may have the need to limit the download speeds of your browser. This can be done not just for downloading apps and packages, but for streaming content as well.

To set a custom speed for the tab, follow these steps:

1. Open the developer options for that tab by pressing F12.
2. Press F1 to open the Developer Settings.
3. Under the Throttling tab, click on the Add custom profile… button.
4. Set a name for the profile to your liking, and set the upload and download speeds.
5. Click on Add once you are done.

6. To activate this profile, go to the Network tab inside the developer tools.
7. Click on the drop-down menu next to Offline.
8. Select the custom profile from the drop-down menu.

Note: This profile would only work on the currently open tab and you would have to keep the developer options window active otherwise the throttling will not work.

Using this tool, you can check the performance of your website on multiple network speeds. You can test your website across speeds from GPRS to Wi-Fi, and several 2G, 3G, and 4G connection speeds. This is an excellent way to test the speed of your website through different carrier networks and gain information on what you can optimize for better performance.

Take A Screenshot

You can also take a screenshot of the website that you are viewing without the help of any third-party application. This is very useful, especially when the snipping tool is being discontinued, and the Snip & Sketch is not very well received.

To take a screenshot of the website, go to the Console tab, and press Ctrl + Shift + M to bring up the device selector. Click on the three vertical dots menu on the top right of the webpage and select Capture screenshot or Capture full-size screenshot.

Your downloads will be saved in the Downloads folder.

Wrapping Up

While the Chrome inspect element is a very useful tool for web developers and website owners, even the casual internet users can take benefit from the above mentioned Inspect element tricks. Did you find this useful? Comment below your favorite Developer Options tool and mention which features you would like to try from the list above.