DevTools Debugging Reference

# Sources panel
Click line number # set breakpoint
Right-click > Conditional # conditional breakpoint
debugger; # code breakpoint

# DOM breakpoints
Subtree modifications # child changes
Attribute modifications # attribute changes
Node removal # element deleted

console.trace() # stack trace
console.assert(condition, msg) # conditional log
console.count("label") # count calls
console.group("Group") # group logs
console.groupEnd() # end group
console.dir(object) # object properties

F8 / Ctrl+\ # resume execution
F10 # step over
F11 # step into
Shift+F11 # step out
Ctrl+Shift+E # run to line
# Watch expressions in right panel

Preserve log # keep logs across pages
Copy as cURL # export request
Block request URL # test without resource
Override content # local modifications
Response tab # view response data
Timing tab # request timeline

# Memory profiler
Heap snapshot # memory usage
Allocation timeline # track allocations

# Performance panel
Ctrl+Shift+P > FPS meter # show FPS
Paint flashing # see repaints
Layer borders # show layers