Get and debug event listeners

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

Umar Hansa

Umar Hansa

Automatically pause on any exception

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

Umar Hansa

Umar Hansa

Quickly change CSS values

Quickly change CSS values with the keyboard or mousewheel

Umar Hansa

Umar Hansa

Autocomplete for bracket notation

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

Umar Hansa

Umar Hansa

Replay a network request in cURL

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

Umar Hansa

Umar Hansa

View and change your DOM breakpoints

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

Umar Hansa

Umar Hansa

Scroll elements into the viewport

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

Umar Hansa

Umar Hansa

Film strips in Network panel

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

Umar Hansa

Umar Hansa

Triggering of pseudo classes

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

Umar Hansa

Umar Hansa

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.

Umar Hansa

Umar Hansa

Port forwarding

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

Umar Hansa

Umar Hansa

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.

Umar Hansa

Umar Hansa

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.

Umar Hansa

Umar Hansa

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

Umar Hansa

Umar Hansa

Go to a line number at a specific column

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

Umar Hansa

Umar Hansa

Easily jump to event listeners

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

Umar Hansa

Umar Hansa

High performance video with hardware decoding

Hardware video support brings efficient decoding to plugins as well as HTML5 video. Flash users should switch from the old style Video to the StageVideo object.

Sam Dutton

Sam Dutton

Granular statement highlights

See the exact executed statement with granular highlighting.

Umar Hansa

Umar Hansa

Hard reload

With DevTools opened, click and hold the reload button to see more options.

Paul Bakaus

Paul Bakaus

Local Modifications

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

Umar Hansa

Umar Hansa

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)

Umar Hansa

Umar Hansa

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.

Umar Hansa

Umar Hansa

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.

Umar Hansa

Umar Hansa

Predefined snippets

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

Umar Hansa

Umar Hansa

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