67 Weird Debugging Tricks Your Browser Doesn’t Want You to Know | Alan Norbauer

Metadata

• Author: alan.norbauer.com
• Full Title: 67 Weird Debugging Tricks Your Browser Doesn’t Want You to Know | Alan Norbauer
• URL: https://alan.norbauer.com/articles/browser-debugging-tricks

Highlights

Skip Page Load Don’t pause until 5 seconds after page load: performance.now() > 5000 Useful when you want to set a breakpoint but you’re only interested in pausing execution after initial page loadreview

If we want to know all calls made to all instances of Dog, paste this into the command line: 1var p = Dog.prototype; 2Object.getOwnPropertyNames(p).forEach((k) ⇒ monitor(p[k])); and you’ll get output in the console: > function bark called with arguments: 2 You can use debug instead of monitor if you want to pause execution on any method calls (instead of just logging to the console).review

From your console: > debugger; fn(1); And then “Step into next function call” to debug the implementation of fn. Useful when you don’t feel like finding the definition of fn and adding a breakpoint manually or if fn is dynamically bound to a function and you don’t know where the source is. In Chrome you can also optionally call debug(fn) on the command line and the debugger will pause execution inside fn every time it is called.review

You can copy interesting information out of the browser directly to your clipboard without any string truncation using the copy() console API. Some interesting things you might want to copy: Snapshot of the current DOM: copy(document.documentElement.outerHTML)review

To grab a copy of the DOM in its current state: 1copy(document.documentElement.outerHTML);review