The hidden tool of every browser is very important to know. We surf web everyday without knowing the tricks and hacks of web browser. Browser is one of the complex software build by humans. It hides tones of secrets. By leveraging its hidden tools we can make our day to day life easier.
What is the Inspect Element?
First, we try to understand what a is browser. It is a software that allows us to browse webpages on the internet in a very interactive way. We can share information using HTTPS/HTTP protocol in the browser. This protocol is mainly used to share web pages over the internet. There are various types of browsers available in the market most popular are Chrome, Mozilla Firefox, Brave, Microsoft Edge, Safari, etc.
Their underlying engine is different. Most of the browser uses V8, Gecko, and Webkit. Now, let’s see what is inspect element.
A webpage consists of various files such as HTML, CSS, and JavaScript along with media files. A browser does a lot of work in the background to request these pages to the server. The server then sends all these files and the browser engine renders it in the browser.
Now, as a web developer, we need to understand what bugs exist in web pages. To do that, there is a separate section which is by default invisible in the browser. Here is the process to open Inspect Element aka developer tools in the browser.
- Open any webpage in the browser
- Right-click on a webpage
- Click on the Inspect option
In the menu, if you click on the Inspect option it will open a window that looks like the below image. It has a lot of tools. We will see what each option means and how to use them.
How to use Inspect Element?
There are a lot of options that exist there, once you open the developer tool window. On the top side, there is a list of tabs and every tab has some key role to play.
1.Elements
Here in this tab, you will see the HTML and CSS code of the webpage. It shows the design and structure of a webpage. It is used to tweak HTML and CSS. By clicking on the element it highlights the part of the webpage in real-time. It also shows all the javascript events attached to it.
At the bottom of the right window, a box model is present which shows the margin, padding, and border of a selected element.
2.Console
The console tab is like a command line tool for javascript. We can run and debug JavaScript code here. It shows the errors, warnings, and logs created by JavaScript while execution. You can run custom JavaScript code to tweak the webpage behavior and use it accordingly.
In the above image, we can see the errors generated for XMLHttpRequest. In the last line, javascript code can be injected to debug web pages.
3.Sources
It is a file explorer of webpages.
4.Network
The network tab shows all the https call happening in the browser. There is an option to filter request based on the filetype. Once click on request it shows the detailed headers and response of the request.
5.Performance
It shows the web vitals of the webpage. The time required to load page is very important.
Features of Inspect Element
Developer tool is full of features. One can use it to debug, test and optimize webpages. If used correctly reduces the debugging time rapidly.
It provides various features like real-time debugging. Using console and element tools, it is easy to debug HTML, CSS and javascript and to fix potential issues exist in webpage.
Using network tool, we can easily find out the issues with request. Sometimes webpage won’t load data, that can be easily fixed by inspecting network requests.
Performance tab is very essential to increase the SEO ranking of webpage. Core web vitals are important to rank website of search engines, which can be easily done by insepct elements.
Tricks of Inspect Element
- Download any video/photos by right clicking on image in webpage and extracting the URL
- Customize webpage according to your need
- Inject code to debug webpages in realtime
- Get the sessions keys or cookies to identity the user logged in the browser
- Reveals the elements of webpage which are hidden by javascript
Also Read, How To Learn Docker In Best Possible Way
