Table of Contents
What is an Inspector Tool?
If you have ever developed a website of your own, you must have come across the developer tools that browsers offer. It is commonly known as Inspector or Dev Tools and is used to assess a website or web application for various parameters such as its code, content, styling, dynamicity, network traffic, and consumed bandwidth, etc.
To open the developer inspector tool, you can simply right-click on the screen and select Inspect from the menu that appeared on the screen. This is the place where you can see the coding, styling, colors, fonts, animations, traffic, responsiveness, and many other parameters for the page that you are on But there exist a few shortcuts to open the Instructor on Windows and Mac.
Inspect Element Shortcut for Mac
| Shortcut Keys | Action |
|---|---|
| Cmd + Opt + I | It will open the panel that you used last from the inspector. |
| Cmd + Opt + J | It will open the Console section from the inspector. |
| Cmd + Shift + C | It will open the Element section from the inspector. |
Inspect Element Shortcut for Windows
| Shortcut Keys | Action |
|---|---|
| Ctr + Shift + I | It will open the panel that you used last from the inspector. |
| Ctrl + Shift + J | It will open the Console section from the inspector. |
| Ctrl + Shift + C | It will open the Element section from the inspector. |
Demonstration
Open Google Chrome (or any browser) and Use the shortcut to enter the developer mode
- Ctrl + Shift + I (For Windows)
- Cmd+ Opt + I (For Mac)
- Ctrl + Shift + J (For Windows)
- Cmd + Opt + J (For Mac)
- Ctrl + Shift + C (For Windows)
- Cmd + Opt + C (For Mac)
