In browser, to toggle Inspecting Element for a web page, here is usually how it is done:
- Locate page element for inspection on the page,
- Right click the element,
- Click “Inspect” in context menu,
It doesn’t look that bad, does it? Well, it works great, except when web developers have to do this many times a day, fatigue starts to creep in.
There’s a better way. And it takes only a single step.
It is called Keyboard Shortcut, or Hotkey.
A hot key is a key or a combination of keys on a computer keyboard that, when pressed at one time, performs a task such as starting an application. In modern software, almost all of them have some hotkey support. For example, a well-known universal hotkey for finding text on a page is Cmd + F, or Ctrl + F; Undo is Cmd + Z, or Ctrl + Z etc.
OK, tell me already!
Here’s the hotkey to trigger the Inspect Element Mode command in the Chrome browser.
|Toggle Inspect Element Mode
Press the hotkey will toggle the Inspect Element window. Find and click on the element to inspect and start debugging.
When it comes to client-side debugging in browsers, many nifty hotkeys can be used to boost your workflow. For example, to toggle device mode here’s the keyboard shortcut:
|Toggle Device Mode
You don’t have to master all the hotkeys at once, but taking some time to get familiar with a handful of them can drastically improve your debugging experience.
Besides, you looked pretty cool for being a swift debugging ninja.