What is Inspect Elements?
Inspect Element is a Powerful browser development tool that lets you change the view you see by editing the HTML & CSS of web content. However, any edits you make will only appear on your personal screen and last until you exit out. It means changes are not permanent. To do these things you need not be a coder.
What can we do with Inspect Elements?
- View the password
- Edit a Website
- Download Image or Video on a webpage
- Color Picker
- Function like a mobile application
- Remove Pop-up
- Search a website from inside
- Find and replace
- Test website is responsive on any device
- Take a Screenshot of the webpage
- Develop a Website
How to open Inspect Elements tool?
Right-click on a webpage, click Inspect, and at the Right (default, but you change the view to bottom or left of the webpage of the browser that pops up. To Change the dock window position clicks the (⋮) icon on the top right and choose the bottom/left docking option as in the small icon.
or
To open with Keyboard Shortcuts, use the following,
Windows: F12 or also Ctrl + Shift + I
Mac: Cmd + Opt + I
And a few things we can do with Inspect Tool before seeing the list,
- We can change the color scheme of the Inspect Elements to light or dark background.
- The arrow helps to Highlight the code line in Inspect Element by choosing the content in the webpage. Press Ctrl+Shift+C on Windows or Cmd+Opt+C on Mac after opening Inspect tool to highlight the code by moving the cursor in a webpage.
1. View the Password in dots of any Website
We always forget the password and saves in the browser, and sometimes we want to view the password quickly and it will display the dots in the password fields and to view the password immediately Right-click in the password field of the webpage and select Inspect and then change the code line type=”text” from “password” that’s it.
Right-click > Inspect > Change the code line highlighting the password field (or press Ctrl+Shift+C on Windows or Cmd+Opt+C on Mac after opening Inspect tool to highlight the text by moving the cursor and replace password with text in type=”text” > that’s it, now you can view password in text.
2. Edit a Website
Yes, we can change the content of any webpage using the Inspect tool. Let’s see it how
Right Click > Inspect > Console Tab > Enter the below code > Enter > Boom! Now you can change the text anywhere on a webpage.
document.body.contentEditable = true Although, if you refresh the webpage it goes off. Things you can do like
- You can change the content seeing on a Wikipedia page
- Change the price of the product on a website like Amazon, eBay, etc
3. Download Image or Video on a website – Instagram
Some websites don’t allow us to download an image/video but with inspect Developer tool copying the source URL and pasting it in different tab we can download the Image/Video. For Suppose consider Instagram, it doesn’t allow us to download a video from it. Let’s see how to download a video/image.
Right click on a webpage > Inspect > Select the Video/Image(Use arrow symbol to point the video) > see the code of that video in the Inspect Elements by pressing Ctrl+Shift+C on Windows or Cmd+Opt+C on Mac after opening Inspect tool to highlight the code by moving the cursor on to Image/Video) > select the div tag line > Right Click > Edit in HTML > Copy the URL in Src=”url” > Paste in new tab > now you see option of download the video/image.
4. Pick a Color on a Website
I’m always irritated of pick a good color and sometimes I see some websites and taught of trying those colors on my website and it doesn’t match exactly and irritates me and I have come up with this trick to pick whatever the color I see on the websites with Hex code and solved my problem 🙂
Right click on a webpage > Inspect > select the Styles tab on the right side window being on Elements tab > Click the Small box next to Color and pick the color you see on a webpage > If it doesn’t show any click the pencil icon > Now you can copy the color code in the required format in Hex, RGB, HSV choosing from drop-down.
5. Brings the Mobile application functionality to Computer – Instagram
I found this feature helped in the Instagram, Instagram doesn’t allow us to upload the image through computer and using the Inspect tool user-agent change we can use as a mobile device functionality of the Instagram. This feature helps in other websites too when where we need to bring the different browser functionality like some websites accept only Internet Explorer browser so we can change the user agent to Internet Explorer in chrome and use it.
User Agent helps the website to identify the traffic coming from which browser. And by changing the user agent of the webpage in a browser we can bring the functionality of a Mobile application of Instagram.
Let see how to do this,
Right click on a webpage > Inspect > Click the 3 vertical dot on top right of the inspect (⋮) > More tools > Network Conditions > Pop-up showing the network conditions tab > scroll to user agent > Uncheck the box select automatically > choose Chrome iPhone from the drop-down selector > refresh the webpage > boom! Now you see the mobile functionality Instagram > upload the picture from the computer now.
6. Remove Pop-ups from a website – Ad-blocker
We might have experienced this though we are using the ad-blocker some websites are restricting us to exclude this website from Ads. Instead of excluding from ad-blocker just make some changes in Inspect Elements and see the magic, how it works. (This method is not possible in all the cases)
I was reading an article in MakeUseOf(dot)com website and it restricts me to exclude from the ad-blocker for this website and I don’t want to do this. So follow these steps,
Right click on webpage > Inspect > Highlight the pop-up box blocking the content or press Ctrl+Shift+C on Windows or Cmd+Opt+C on Mac after opening Inspect tool to highlight the text by moving the cursor > remove the code line in Inspect Elements by deleting > Set “Opacity:1” in style > Enter > Boom! Now you’ll see the content in the webpage.
7. Search a website from inside
If you would like to know what Image, video, font, color, etc.., in a webpage are using and we can find out with the help of a Search function. It helps in the various ways such as to identify the videos/Images a webpage and able to download it as mentioned above. We can check a particular webpage font-family, color using for it. Let see how to search,
Right Click on a webpage > Inspect > Click the 3 dots (⋮) on the top right of it > Search > type font-family to know what type of fonts are using in a website.
Some websites have the background images/videos in a page and we want to know what image/video is using in it. So just type jpg/png/jpeg for an image or mp4 for a video in the search and enter it should show some URL’s containing the image/video and paste it in a new tab and now you see it clearly, you can download it too as mentioned above.
Also Read:
20 Cool funny Websites Kills Your Boredom
18 Cool and Interesting Websites– Internet
Convert Youtube Video to Audio File Online free
8. Find and Replace
This is one of the great feature built-in browser Dev tools. Let see how to search the text on a website and replace it with some other words using Inspect.
Right Click on a webpage > Inspect > Open the second tab Console in the pop-up window > execute the below codes with changes or While you on a webpage press Ctrl+Shift+J on Windows or Cmd+Opt+J on Mac to open Console windows in Inspect. (Replace the code with ABC with a word to search and XYZ to replace a word)
document.body.innerHTML = document.body.innerHTML.replace(/ABC/g, "XYZ")
Use this code line to search for multiple words and replace:
document.body.innerHTML = document.body.innerHTML.replace(/(ABC|123|LMN)/g, "occurrence")
Use this code line only if you want to search Header of the page:
document.head.innerHTML = document.head.innerHTML.replace(/ABC/g, "XYZ")
9. Test website is Responsive on any device/How it looks
Every website has to be responsive today. It’s like the website that you see on the Computer don’t look the same in a mobile phone, tablet, etc. And to check how the website looks in mobile phone or tablet just you do it from the computer using Inspect development tool.
Right click on webpage > Inspect > click the second icon on the top left (beside Elements option, look like a device) Or Press Ctrl+shift+M on Windows or Ctrl+Opt+J on Max after opening Inspect > now on the top of website the options will be showing to view the website how it looks in different devices. We can see how it look when we rotate the device too.
10. Take a Screenshot of the Website
Yes, You can now take a screenshot of a webpage without using any extension/add-ons in a browser using Inspect Developer Tool. With this feature, you can capture in mobile/tablet layout too. Let see how
Right click on webpage > Inspect > click the second icon on the top left (beside Elements option, look like a device) or (Press Ctrl+shift+M on Windows or Ctrl+Opt+J on Max after opening Inspect) > now on the top right of webpage click the 3 dots (⋮) menu and it will be showing an option to Capture Screenshot or Capture a full-size screenshot. And after clicking the selection your screenshot will be download.
11. Modify and Develop a Web page (For a Web Developer)
Using the Inspect Elements we can change the HTML & CSS code of a webpage and check how it appears to the user and with these changes/modifications it helps to build a good webpage. Let see,
Right click on a webpage > Inspect > Change the Code in the Elements and see how it appears on the page > Make changes in style like color, font, etc..
Note: The above article is written using Chrome browser in Windows environment.
Leave a Reply