Hold on to your hats, this debugger trick is awesome. If you’ve ever wondered how to figure out what is changing some property on some object behind your back, this is the way to do it.
Let’s say that you have an object in one part of your code that you’re working with.
1 2 3 4 5 6
And some other remote part of your code, that you had no idea existed, is modifying your object behind your back.
1 2 3 4 5 6 7
It’s straightforward to setup a watch in the Chrome debugger, so you could easily see that something was being changed, but the hard part is figuring out what piece of code is doing the changing. If you happen to sometimes live in a world with dozens and dozens of script tags on any given page, you’re pretty much SOL when it comes to grepping for the culprit.
This is where one very handy feature of ES5 comes in. ES5 defines many APIs
JSON.parse, but it also has fancier
pieces that like
Object.defineProperty allows you to setup accessors
set for any property on an object in such a way that any code that uses
that property doesn’t have to know that a function is being run.
1 2 3 4 5 6 7 8 9 10 11 12 13
This code changes very little external behavior of the pagingData object. All it does
is run these particular functions whenever
pagingData.lastFetchedId is set to a new value
or the value is being read. The exciting part is that now, you can add a breakpoint in
your debugger inside of the
set function that will then break whenever something sets that property.
Once you have this breakpoint, you can look through the
and you’ll be pointed directly at
If you want an even easier way to get that breakpoint in there, you can just add a debugger statement directly into your new debugging code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
As always, make sure that you remove this kind of debugging code before you commit, and don’t let it into production. I hope you have questions. I’ll see you in the comments!