You might have heard of this powerful feature of speech in your Chrome browser app – Chrome Development tool . And while it ’s true , that most of it is useful for web developer , there are multiplication when it ’s useful to an average internet user . In this clause , we will focus on useful poppycock that you could do with Chrome developer tools . Like , how to short-circuit restriction set by the website , receive out fonts , colors , and images that are hidden on the Earth’s surface or even forgot passwords .
How to open Developer tools in Chrome ?
To open Chrome developer tool in Google Chrome , tap Customize chrome ( ⋮ ) > More tools->Developer tools . you could alsoright - clickon the page you want to cut and chooseInspect . I like to use the keyboard shortCtrl+Shift+I(Cmd+Option+I for Mac ) .
By default , it opens a raw window to right , but I prefer to keep it in the bottom , as it give me more way to expand it . To move the windowpane to the bottom come home the 3 erect dots release on the top right wing ( ⋮ ) then pick out the bottom docking option . you could also call on on thedark mode from the preferences , makes it easier on the centre . Now the next clock time capable inspect element , it ’ll remember my change .
Also Read : How to change google chrome background
10 Chrome Developer Tools Tips
1. Edit a Web Page
Now , this is the most basic use of the Developer tool but has to be included . you could temporarily cut any Web varlet ( like Wikipedia ) in your internet browser . To do this , give any vane page you would like to blue-pencil on Chrome and right - click and choose Inspect Element . Go to the console table tab ( should be the second option from the top ) , next glue the espouse line of code and hit enter .
document.body.contentEditable = straight
This will make the entire webpage editable like any Word written document . Just click anywhere and start typing . Although do remember all the effects will be gone once you refresh the page . So , verify you screenshot the page before closing the web internet browser .
2. Reveal the saved Password
Say you want to login to your Instagram on your mobile , but you do n’t remember the password . Fortunately , you have it saved in your web internet browser . Now , or else of going through the painstaking cognitive operation of password reset , you could use developer tools to reveal the out of sight countersign .
Right - click the password fieldand then choose “ Inspect Element . ” This will unfold the papers inspector windowpane and all you have to do is supersede the word “ password ” with “ text ” in thepassword - typeinput subject area . And this should let on the watchword hidden in asterisks .
3. Take a Screenshot of the webpage
Did you know that you’re able to take a screenshot of the webpage using the Chome Dev Tools without using any additional Plugin ? The feature is pretty simple and offers only two configurations , The visible part of the web page , the entire webpage . It can capture the screenshots for the mobile reading of the web page and you could choose a few roving layouts from the drop curtain - down menu on top .
To trance the screenshot open Chrome developer tools . Go to the Console tab , and pressctrl + shift + M(windows ) orcmd + opt + M(Mac ) . Next , flick on3 Lucy in the sky with diamonds menu on the top - rightof the webpage and selectCapture Screenshot or seize full - size screenshot . And that ’s it , your screenshot will be saved in the downloads folder .
Also Read:7 Best Chrome Screenshots Extensions for every demand
There are other ways to take screenshots and you could always set up a screenshot extension or utilize the computer ’s native screenshot shortcut , prtsc(windows ) and cmd+ shift + 4(MacOS ) but this method acting works just as ok .
4. Use the Color Picker
I ’m a sucker for minimal vividness and more often than not , I ’m scrolling minimum icon on Google to get stirring for features images and thumbnail . Or say , if a particular web site ’s color outline that catches your eye , and wants to find out what colour they are using , well you may always install a color selector extension . But there is a faster way to do it .
Bring up the Chrome Development tools , in the left side click onStyletab , select the small boxful next to the color . This will lend upColor picker tool , now , tap anywhere on the web page , whose color you want to come up out and the colouration chooser will give you the hex code . Simply re-create the hex computer code and glue it in Photoshop .
5. Change Website to the Mobile Layout
Whenever you open up a website , a lot of your datum is sent under the hood , like your IP computer address , accurate date and time , the URL , where are you coming from and the User - agent .
The user agent helps the web site to identify your web web browser . And in some cases changing the user - agent helps . For example , if you want to ascertain if your website is antiphonal or not . But my favourite one is accessing the different version of the website . For example , some govt websites in India open in Internet Explorer only , or for a global deterrent example , countenance ’s take Instagram . As you cognise , you could not upload picture show to Instagram he on the computer , but you could do it from its mobile site . So , why not masquerade the screen background internet browser to that of mobile ?
To do this , fire up the Chrome Development instrument , sink in on 3 erect dots , and under moreToolsselectNetwork conditions . Thereuncheckthe box that says , User agent , select automaticallyand from the popup box select aMobile internet browser . If you are trying to access a govt website pick out a different compatible web internet browser . Now exit the windowpane and refresh the page . As you may see , there is a full functional upload button , which you may use to upload film to Instagram from the computer .
6. Search Anything
Another useful feature that ’s hard to pinpoint is the hunt . The “ Search ” tabloid grant you to seek a web page for specific content or an HTML element .
For example , say if you want to know what font a site is using , you ’ll need to click the3 dotsthen clickSearchand type in baptistry or to be precise usefont - menage , and you’re able to ascertain the information in the lines of code .
Or let ’s take another object lesson , I stumble upon a website that using a video in the background and I ’m rummy to find out which video is it precisely , Now , saving the pageboy wo n’t make . rather , apply the Chrome Development putz , and search for“video”scroll through the resultant and see if you get any uniform resource locator . In that case apply unwashed sense , if it ’s a video file , it mostly like have an prolongation ofmp4,try that . And there you go , now you have a couple of results with mp4 , one of that should be the video recording file cabinet , select it to land up the URL . Copy that uniform resource locator and paste in the web browser app , and off you go .
7. Remove Popups
Another useful feature of i is take away pop - ups from the website . For instance , let ’s take Quora- a democratic enquiry resolution internet site that offers mental object to its appendage only . If you come to this website from Google and seek to say more than one Thomas Nelson Page , a pop - up will appear asking you to sign - up . Here is how to remove it , right on - tap the pageboy and bring up the Inspect elements . Move your pointer to the credit line of codeuntil drink down - up window ( continue the capacity ) gets foreground . Once done , cancel that line of computer code . Sometimes there is another transparent layer on the page ’s soundbox , that makes the link unresponsive . Delete that as well .
Read : How to see Blocked Content on Websites
8. Change Your Browser GPS Location
Now , there are 2 ways , any web site detect out where you are browsing from – your IP destination and your web internet browser ’s location . While you may easily change the IP reference , by using our VPN and Smart DNS , it ’s not easy to commute internet browser location .
For good example , the other day , I was browsing CBS with VPN , and everything worked fine . But , when I decided to watch local distribution channel on CBS and it depict me a popup ask for my browser app position . And then press Allow , it enjoin the content is not uncommitted in my fix .
To fix that , openDeveloper Console , by right - clicking on the blind . At the bottom of the panel , press the three - dot buttonon the top right hand , and then click the “ Sensors ” option fromMore . A new windowpane will open up in the bottom half of the developer tools window , UnderGeolocation , choice “ Custom positioning . ” Now put in your location base on parallel of latitude and longitude , if you do n’t know these time value , you’re able to always use Google maps . Or just select the name of the city likeCalifornia . Now , Reload the page , allow location data in the belt down - up windowpane . And now if I refresh the Thomas Nelson Page , and tap tolerate locating , as you’re able to see , I ’m now able to stream local place .
9. Use Ruler
Just like a Color Picker dick , Google Chrome Developer Tools also Include a Ruler . This come in helping hand when you need to measure pixels across the tiptop and breadth of the varlet .
To convey up the swayer , in good order - penetrate on the page where you would care to use a ruler and click “ Inspect Element ” . Next , you need to enable it for the first meter , select the 3 upright dots in the top - right andSettings . A new window will unfold , under theElementssection selectShow Ruleroption .
10. Limit download speed on Chrome
If you want to set the downloads speed , you may do that with Chrome Dev tool . It does not just limit the download speed of real packages but streaming as well . Basically , you’re able to isolate a tab and make the chit cargo according to the speed you just set . It work like a appeal when you desire to limit the bandwidth on your web browser app while watching a movie .
To place the speed for a tab , go to the developer alternative , andclick on the options buttonright next to audit and choice setting or you’re able to just compress F1 key direct toopen the configurations . Go to the Throttling taband snap ‘ Add custom Profile ’ . you’re able to name the profile and coif the download and upload hurrying . After adding the figures , Click ‘ Add ’ and you ’re done .
This profile would only solve on the currently open chit and you would have to keep the developer alternative window active otherwise the strangling wo n’t work . To trigger the profile , go to the internet tabin developer tools and get across the drop - down menu mighty next to Offline . choose the customs duty profileand your page is now throttled . Anything downloaded from this page will be choke to the set limit . Just check that not to fill up the inspect constituent windowpane or freshen up the pageboy .
How do you apply Chrome Developer cock ?
Overall , the developer tools have more use case than messing around with your fav websites . In myopic , anything that the site is not doing on the waiter side can be altered with Chrome developer tools . or else , you may use theWeb Developerextension to get one - click access to all the features and more .
38 Google Earth Hidden Weird Places with Coordinates
Canva Icons and Symbols Meaning – Complete Guide
What Snapchat Green Dot Means, When It Shows, and for…
Instagram’s Edits App: 5 Features You Need to Know About
All Netflix Hidden and Secret Codes (April 2025)
All Emojis Meaning and Usecase – Explained (April 2025)
Dropbox Icons and Symbols Meaning (Mobile/Desktop) – Guide
How to Enable Message Logging in Discord (Even Deleted Messages)…
Google Docs Icons and Symbols Meaning – Complete Guide
Samsung Galaxy Z Fold 7 Specs Leak Reveal Some Interesting…
