Umar Hansa

Umar Hansa

Umar is a front-end web developer

The currently selected DOM node

Learn the quick console shortcut to get the currently selected DOM node.

Umar Hansa

Umar Hansa

The larger-than advanced Network Panel filter, and a few others

Did you know that the filter in the Network panel supports a few nifty custom search labels?

Umar Hansa

Umar Hansa

Simple keyboard tricks to use in the Styles Pane

Learn how to effectively navigate the Styles Pane with a few useful keyboard tricks.

Umar Hansa

Umar Hansa

Five tricks to use in the Console Panel

Five tricks to use in the Console Panel

Umar Hansa

Umar Hansa

Easily duplicate DOM nodes

You can easily change the DOM without having to edit the HTML as a giant string.

Umar Hansa

Umar Hansa

Edit HTML in the Console Panel

The DOM node context menu, which you may recognize from the elements panel, is also present in the console panel.

Umar Hansa

Umar Hansa

Live-edit CSS in sources

Did you know you can live edit CSS in Sources and have it update the page in real-time?

Umar Hansa

Umar Hansa

Add a new custom device as a preset

Do you frequently emulate devices of a certain dimension? In DevTools Device Mode, you can add new device presets.

Umar Hansa

Umar Hansa

Inspect and trigger CSS media queries

The Device Mode has a media query inspector built-in that allows for easier responsive design.

Umar Hansa

Umar Hansa

Shortcut to select the next occurrence

In the Sources Panel editor, you can select the next occurrence with Cmd + D.

Umar Hansa

Umar Hansa

Select and execute a block of code in the Sources Panel

Use the shortcut Ctrl + Shift + E to run a block of highlighted code in the Sources Panel.

Umar Hansa

Umar Hansa

Set a breakpoint based on a certain condition

When you set a breakpoint, you can make it conditional based on the result of an expression.

Umar Hansa

Umar Hansa

Quickly cycle through the DevTools panels

You can use Cmd+] (or Cmd+[) to cycle through the panels in the DevTools.

Umar Hansa

Umar Hansa

Print out a quick stack trace from the Console

You can use console.trace() to get a quick and easy stack trace to better understand code execution flow.

Umar Hansa

Umar Hansa

Who inspects the inspector?

Did you know you can inspect your DevTools with DevTools?

Umar Hansa

Umar Hansa

Trigger a pseudo class on an element

Ever tried to debug CSS hover effects but failed keeping the mouse on the element? Here's how to do it.

Umar Hansa

Umar Hansa

Project wide search with optional file scope

Learn the secret commands to search like a pro in DevTools.

Umar Hansa

Umar Hansa

Network color groups

Learn about which colors match to which resource type to easy identify resources.

Umar Hansa

Umar Hansa

Preview JavaScript values inline while debugging

Learn how to preview the values of JavaScript variables in DevTools while debugging.

Umar Hansa

Umar Hansa

Quickly edit/view resources from the Elements panel

Quickly edit/view resources from the Elements panel

Umar Hansa

Umar Hansa

Alt + Click to expand all child nodes

Alt + Click to expand all child nodes

Umar Hansa

Umar Hansa

Better incognito DevTools

Some appearance preferences are now persisted through to incognito windows.

Umar Hansa

Umar Hansa

Command click to add multiple cursors in the sources panel

Learn how to to multi-cursor editing in the DevTools sources panel.

Umar Hansa

Umar Hansa

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.