DevTools Tips

Preview and edit cubic-bezier functions using DevTools.

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

Use Cmd + Z (Windows/Linux: Ctrl + Z) to undo your CSS changes.

Having a node selected in the Elements panel, use $0 to access it in the Console panel. You can also use $_ to access the value of the most recently evaluated expression.

Use Ctrl + M to jump between matching brackets.

When you are paused through the debugger, you can live-edit JavaScript and continue script execution with your new code.

Blackbox scripts: when you're stepping through lines, the debugger will automatically step through lines contained in black-boxed sources.

Use Command + D (or Control + D) to add the next occurrence of the current word to the selection.

Use Cmd + Alt + F to search in all sources. It's possible to use a regular expression too.

Filter CSS properties.

Search by selector inside elements panel.

Use Shift + Click to change color format.

View a diff of your local modifications after saving. It's possible to revert to a specific revision.

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

Quickly watch for events.

Command + Click on CSS to find it in the source.

Use multiple cursors & selections in the Sources panel (Cmd + click).