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.
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.
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.
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
Quickly edit/view resources from the Elements panel
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]).
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.
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.
Automatically pause on any exception
In the DevTools, you can automatically pause on any exception (especially useful for uncaught exceptions).
Autocomplete for bracket notation
Did you know you can autocomplete bracket notation in the Sources panel?
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.
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.
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.
Quick-edit element tags
You can double click on the opening tag name of a node in the Elements Panel to edit it.
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).
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.
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]).
Command click to add multiple cursors in the sources panel
Learn how to to multi-cursor editing in the DevTools sources panel.
Better incognito DevTools
Some appearance preferences are now persisted through to incognito windows.
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.
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).