How to use inspect element in Chrome, Firefox and Safari ?

Inspect Elements, as the name suggests, is a part of identifying and observing the different elements of a web page. It is a Development tool, that helps us manipulate the Front-end base, but temporarily, to check which changes fit where, which image might look good, or debug the page, etc. In this article, we’ll be covering the steps to inspect an element in the web browser.

Google Chrome

There can be multiple ways to inspect elements on the browser window:

1. Right-click on the web page and select inspect elements from the dropdown list.

Inspect Elements Option

2. Click on the three dots at the topmost right side and click More Tools. Select the option of Dev Tools.

Developer Tools

3. Shortcut – Ctrl+Shift+I: The dev tools have features such as inspect elements, console window etc. They are of much use a they let us make changes in CSS, content and let us check the meta data of the file. It also helps in knowing the search engine optimization (SEO) of the page.

Inspect Elements & Console Window

Firefox

1. The method of inspecting elements is similar to that of Chrome. Right click and click on inspect element(Q) will show the browser console.

Inspect Element

2. Second method is to click on the three lines made at the topmost right side of the browser and click on Web Developer and then either of the two – Inspector or Web Console.

Web Developer -> Inspector

3. Shortcuts can also be used: Inspector – Ctrl + Shift + C

Console Window: Ctrl + Shift + K

Console Window

Safari

Safari is another web browser on which we can inspect elements. However, a major point that needs to be noted is that Safari can no more be used on Windows Applications, it can be used only on Mac OS. But before inspecting elements in safari browser, one needs to enable it. Go to the top let corner of the browser page and click on settings. Then click on Preferences and click advanced. The option of inspect elements is now enabled.

Go to preferences

Click on Advanced

Now follow the same steps as the other browsers:

Enable Inspect Elements

1. Right click and click on inspect elements.

2. More tools -> Developer tools

3. Shortcut: Cmd + Option + I

or simply press F2 to get the console window.

Benefits of using Inspect Elements

• Helps in Search Engine Optimization (SEO)
• Front End Manipulation
• Debugging software as errors are displayed in the console window
• Design and content can be changed according to user demands for temporary purposes
• Handling of meta data