Skip to content

How To Blog

  • What is SeaPort.exe and How to Remove It Computer Tips
  • How to Enter BIOS in Windows 10 and Older Versions Windows 10
  • The Best Chrome Extensions for Productivity Google Software/Tips
  • Best mildot master calculator 2020

    Best mildot master calculator 2020

  • BSD vs Linux: The Basic Differences Linux Tips
  • What Is Google Exposure Notifications for COVID Protection? Google Software/Tips
  • How to Setup Picasa with Google+ Photos Google Software/Tips
  • dungeons and dragons online gameplay Gaming

Inspect Element on Chrome: 10 Tips To Use It Like Pro

Posted on September 8, 2021 By blog_786 No Comments on Inspect Element on Chrome: 10 Tips To Use It Like Pro

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.

Inspect Element on Chrome: 10 Tips To Use It Like Pro

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.

Inspect Element on Chrome: 10 Tips To Use It Like Pro

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.

Inspect Element on Chrome: 10 Tips To Use It Like Pro

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.

Inspect Element on Chrome: 10 Tips To Use It Like Pro

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.

Inspect Element on Chrome: 10 Tips To Use It Like Pro

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.

Inspect Element on Chrome: 10 Tips To Use It Like Pro

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.

Inspect Element on Chrome: 10 Tips To Use It Like Pro

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

Inspect Element on Chrome: 10 Tips To Use It Like Pro

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.

Inspect Element on Chrome: 10 Tips To Use It Like Pro

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.

Inspect Element on Chrome: 10 Tips To Use It Like Pro

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.

Inspect Element on Chrome: 10 Tips To Use It Like Pro

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.

Inspect Element on Chrome: 10 Tips To Use It Like Pro

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.

, How-To Tags:Change website to mobile layout, Change your GPS browser location, Chrome, Chrome developer tools tips, Edit a web page, Inspect Element on Chrome: 10 Tips To Use It Like Pro, like, Look for anything, Remove pop ups, Reveal the saved password Take a screenshot of the web page, Tips, Use a ruler Determine download speed on Chrome, Use the Color Picker

Post navigation

Previous Post: How to Watch American TV Abroad Online in 4 Simple Step
Next Post: How to Change Browser Location Country

Related Posts

  • 3 Ways to Track Which Programs are Using the Most Bandwidth in Windows How-To
  • How to Enable Right-Click Dictionary Systemwide on PC How-To
  • How To Add Google Forms On Facebook Page (Video) How-To
  • How to Clear Space on Google Drive How-To
  • How to Adjust the Backlight on 2019 NVIDIA Shield TV Remote? How-To
  • How To Move Your Thunderbird Profile & Email To a New Windows Computer How-To

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Archives

  • June 2023
  • May 2023
  • April 2023
  • November 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • March 2021
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • December 2019
  • July 2019
  • May 2019
  • April 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018

Categories

  • Amazon Web Services
  • Apple Watch
  • Computer Tips
  • Cool Websites
  • Featured Posts
  • Free Software Downloads
  • Gadgets
  • Gaming
  • General Software
  • Google Software/Tips
  • Hardware
  • Help Desk
  • How-To
  • iOS
  • iPad
  • iPhone
  • Linux
  • Linux Tips
  • macOS
  • MS Office Tips
  • Networking
  • Office Tips
  • OS X
  • Product Reviews
  • Reviews
  • Safari
  • Smart Home
  • Smartphones
  • Software Reviews
  • technology
  • text
  • Tools Review
  • Troubleshooting
  • Tutorials
  • Uncategorized
  • Urdu Books PDF
  • Web Site Tips
  • Windows
  • Windows 10
  • Windows 7
  • Windows XP Tips
  • Wordpress

Recent Posts

  • 10 best clock widgets not to be lost on your iPhone home screen
  • Can I change the file type in Windows 10?
  • How to create line graphs in Google Sheets
  • Best Ways to Create Your Own 3d Printed Lithophanes?
  • Top 5 3D Modeling Apps for iPad Pro

Recent Comments

  1. Can I change the file type in Windows 10? - How To Blog on The 7 Best PDF Readers for Windows In 2020
  2. How to create line graphs in Google Sheets - How To Blog on How To Format Spreadsheet Cells To Automatically Calculate Amounts
  3. Best Ways to Create Your Own 3d Printed Lithophanes? - How To Blog on 10 Best 3D Printers for Beginners Under $500
  4. Top 5 3D Modeling Apps for iPad Pro - How To Blog on How To Use Apple Sidecar
  5. The 5 Best Original Netflix Animations You Can Stream Now - How To Blog on check netflix video quality internet explorer
  • Top 10 Trello Tips to Power Up Your Productivity Software Reviews
  • HDG Explains: What is the BIOS? Featured Posts
  • How to Use the New Editor of WordPress Gutenberg Wordpress
  • How to Copy/Transfer Files to iPad Gadgets
  • WWDC 2020 – How To Add & Customize Widgets on iOS 14 How-To
  • How To Change Font Style And Icon Size in Android 10 How-To
  • How to Use VLC With Chromecast How-To
  • Troubleshoot Adobe Flash Player Has Stopped Working Computer Tips

Copyright © 2023 How To Blog.

Powered by PressBook News WordPress theme

Go to mobile version