Articles by Umar Hansa

Umar is a front-end web developer

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?

Simple keyboard tricks to use in the Styles Pane

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

Easily duplicate DOM nodes

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

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.

Five tricks to use in the Console Panel

Improved DOM breadcrumbs

Did you know the Elements Panel has a Breadcrumb trail?

Live-edit CSS in Sources

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

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.

Inspect and trigger CSS media queries

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

Shortcut to select the next occurrence

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

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.

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.

Quickly cycle through the DevTools panels

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

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.

Who inspects the inspector?

Did you know you can inspect your DevTools with DevTools?

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.

Project wide search with optional file scope

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

Network color groups

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

Preview JavaScript values inline while debugging

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

Quickly edit/view resources from the Elements panel

Some UI and feature enhancements to the Color Picker tool

Alt + Click to expand all child nodes

Better Incognito DevTools

Some appearance preferences are now persisted through to incognito windows.

Command click to add multiple cursors in the Sources Panel

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

Copy image as data URI

Right click on an image preview within the Resources Panel to copy it as a Data URI (base 64 encoded).

Quick-edit element tags

You can double click on the opening tag name of a node in the Elements Panel to edit it.

Quickly monitor events from the Console Panel

You can log all the events dispatched to an object using the Command Line API method monitorEvents(object [, events]).

Reveal in Elements panel

Reveal DOM nodes in the Elements panel from the Console.

See matching selectors

When you are viewing a selector in the Styles Pane, comma separated selector portions are colored differently depending on whether or not they match the selected DOM node.

The currently selected DOM node

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

The easing editor

Select an easing CSS property to get a visual animated preview for how it behaves.

Toggle the DevTools dock state with a keyboard shortcut

Use Cmd + Shift + D to toggle the DevTools dock state between the last two recently used states.

Unfinished network requests

You can use the Is:running Advanced Network Filter to see unfinished network requests (e.g. running requests).

Use keyboard to navigate through callstack

How to set a breakpoint and navigate through the call stack with keyboard shortcuts.

Get and debug event listeners

Get and debug event listeners in DevTools with these console commands.

Automatically pause on any exception

In the DevTools, you can automatically pause on any exception (especially useful for uncaught exceptions).

Quickly change CSS values

Quickly change CSS values with the keyboard or mousewheel

Autocomplete for bracket notation

Did you know you can autocomplete bracket notation in the Sources panel?

Replay a network request in cURL

Learn how to debug a network request from the command line.

View and change your DOM breakpoints

How to view and change your DOM breakpoints with the Breakpoints pane in DevTools.

Scroll elements into the viewport

If an element you're inspecting is out of view, here's how to bring it into the viewport.

Film strips in Network panel

Visually navigate the network panel and view captured screenshots during page load

Triggering of pseudo classes

Learn how to trigger pseudo classes such as :active to properly debug your CSS.

Expand CSS shorthand properties

In the styles pane, you can expand CSS shorthand properties like flex or padding and see the full range of properties which are defined for you.

Port forwarding

DevTools port forwarding enables even localhost URLs to work on mobile.

Search DOM tree by CSS selector

When browsing the DOM with the Elements panel, try searching for nodes via CMD/Ctrl+F by their CSS selectors.

Get notified of JS errors while you type

If you get an error in the console panel, click it to reveal the line in the Sources Panel where an indication of the error pops up.

Easy timeline recording

Try undocking DevTools to a separate window so the record button is positioned closely to the portion of the page where you need to carry out an action

Go to a line number at a specific column

Learn how to jump to specific line numbers in the Sources panel.

Easily jump to event listeners

Learn how to show the function definition of a registered event listener on any node.

Granular statement highlights

See the exact executed statement with granular highlighting.

Local Modifications

Local modifications lets you see what changes have been made (via DevTools) to certain source files.

Cycle through editing locations

Your cursor position history is preserved in the Sources Panel, allowing you to cycle through previous editing locations with Alt+(backwards) or Alt+(forwards).

Copy the response of a network resource to your clipboard

In addition to copying the request/response headers of a network resource, you can also copy the response itself.

Perform a column selection by by dragging

You can make a column selection in the Sources Panel editor by holding Alt while dragging the mouse.

Predefined snippets

How to run predefined snippets of code on any web page.