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
The interesting thing about this article was that you can put in conditional breakpoints within the debugging tools and you can have logic that drives whether that breakpoint triggers or not. Below are a bunch of examples of useful ways to take advantage of that.
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 load
If we want to know all calls made to all instances of Dog, paste this into the command line:
var p = Dog.prototype;
Object.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).
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.
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)
To grab a copy of the DOM in its current state:
copy(document.documentElement.outerHTML);