javascriptgoogle-chrome-devtools

How do I list all global variables I have created in Chrome DevTools?


There are a crap ton of global variables in a typical browser environment to begin with, and usually even more of them in whatever web app you might load. When I get side tracked from a session in devtools, I want to list all my own variables, to quickly see what I had uncovered already to resume, without trying to piece it together from the window and command line history, ideally without noise from the page, or browser object model.

(If you want all global variables, not just those you created in devtools, there's a Q&A for that here.)


Solution

  • Provided the page doesn't dynamically leak new identifiers into the global scope, this hack lists all the identifiers that have been created after the window identifier, which seems a pretty good match for this purpose. myids() just lists their names, whereas myvars() collects them into an object you can inspect, to see them all in context together:

    function myids() {
      function notUs(i) { return i !== 'myids' && i !== 'myvars'; }
      var ids = Object.keys(window);
      return ids.slice(ids.indexOf('window') + 1).filter(notUs);
    }
    
    function myvars() {
      function gather(a, i) { a[i] = window[i]; return a; }
      return myids().reduce(gather, {});
    }
    

    It's not perfect, but better than nothing, and it should only have false positives, no false negatives.