In today’s modern browsers such as Google Chrome, Firefox, Safari, and Microsoft Edge, there is a lesser-known trick that could 10 X increase your client-side debug skills for AKA javascript and CSS.

In browser, to toggle Inspecting Element for a web page, here is usually how it is done:

1. Locate page element for inspection on the page,
2. Right click the element,
3. Click “Inspect” in context menu,
4. Debug

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.

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:

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.