

Now, instead of going through the painstaking process of password reset, you can use developer tools to reveal the hidden password. Fortunately, you have it saved in your browser. Say you want to login to your Instagram on your mobile, but you don’t remember the password. So, make sure you screenshot the page before closing the browser. Although do remember all the effects will be gone once you refresh the page. This will make the entire webpage editable like any Word document. Go to the console tab (should be the second option from the top), next paste the following line of code and hit enter. To do this, open any web page you would like to edit on Chrome and right-click and choose Inspect Element. You can temporarily edit any Web page (like Wikipedia) in your browser. Now, this is the most basic use of the Developer tools but has to be included. Now the next time open inspect element, it’ll remember my changes.Īlso Read: H ow to change google chrome background 10 Chrome Developer Tools Tips 1. You can also turn on the dark mode from the Settings, makes it easier on the eyes. To move the window to the bottom click the 3 vertical dots button on the top right ( ⋮ ) then choose the bottom docking option. I like to use the keyboard short Ctrl+Shift+I (Cmd+Option+I for Mac).īy default, it opens a new window to right, but I prefer to keep it in the bottom, as it gives me more room to expand it. Right click on the part of the web page for which you want to see the source code, then click "Inspect".Īlternatively, to open the inspector without going to a particular part, press Ctrl + Shift + I.To open Chrome developer tools in Google Chrome, click on Customize chrome ( ⋮ ) > More tools -> Developer tools. You can also right-click on the page you want to edit and choose Inspect. You right click and choose the one that starts with "Inspect". How to open Inspect Element in Windows Browsers (Chrome, Firefox, IE): The process for all the browsers is the same in Windows. If you're only looking at the backend, or in the style.css file, you might miss an important piece of code that completely changes how the user will see that part of the page. The best part is it allows you to see what's going on in the final render of the web page. It's something I use probably more than any other tool. It allows you to quickly jump to the important part of the code to see what's going on there. One of the most useful tools for a web developer is the Inspect Element tool.
