When in the Chrome Debugger, is there anyway to reference data or functions inside an anonymous function block?

Walt Howard 0
Viewed 22

I'm trying to debug something live on a customer website and my code is all inside an anonymous function block. I don't know if there's anyway to reach that code to execute functions or look at variables in there. I can't put a breakpoint either because this code is dynamically generated each time the page is refreshed and the breakpoint doesn't stick.

(function() {
   var Date = "14 September 2022 14:44:55"; // different every refresh for example
   var Holder = {
       var Items = {
          item1: "Value1",
          item2: "Value2"
       };

       function getItem(name) {
          return Items[name];
       };

       function setItem(name, value) {
          Items[name] = value;
       };

   setTimeout(DoSomething(), 2000);

   })();

That's not the actual code, just a bare minimum example to illustrate the problem.

Is there anyway to get reach getItem() or Items?

Without a breakpoint that code probably runs to completion then POOF it's all gone anyway.

javascript-debugger google-chrome javascript
2 Answers

Redefine setTimeout

If it really is the case that the code inside the anonymous function calls other browser methods, you might be able to insert a detour at runtime that you can then put a breakpoint on.

For this to work, you will need to be able to inject new code into the page before the anonymous code, because there's no other way to invoke the IIFE.

Your example code uses setTimeout, so here's what I would try to insert:

let realSetTimeout = window.setTimeout
window.setTimeout = (...args) => {
  debugger
  return realSetTimeout(...args)
}

Lots of unrelated code might be calling setTimeout, in which case this could break the page or just make debugging really tedious. In that case, you might make it only debug if one of the setTimeout args has a value that's used in your example, e.g.:

// only break for our timeout
if(args[1] === 2000) debugger

Something like that might not trigger for only your code, but it would hugely reduce the number of other codepaths that get interrupted on their journey through the commonly-used browser capability.

Alternatively, use Charles Proxy to rewrite the body of the HTML page before it enters your browser. You could manually insert a debugger call directly into the anonymous function. Charles is not free, but I think they have a demo that might let you do this. If you do this professionally, it's probably a good purchase anyway. Your employer might even pay for the license.

If you can't use Charles (or a similar tool), you could instead set up a local proxy server using Node which does the rewrite for you. Something like that might only take an hour to throw together. But that is a bigger task, and deserves its own question if you need help with that.

user7Up30

No unfortunately.

The variables inside of the anonymous object are created in a scope which is inaccessible from the outside.

One of the main benefits of using a closure!

You’ll have to find a way to insert your own code inside of it by modifying the function that is generating those objects. If you can’t do that, then you’ll have to take the fork in the road and find another way.

Dan Mullin0
Related