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 mand 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.)

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 mand 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.)

• javascript
• google-chrome-devtools

• Possible duplicate of View list of all JavaScript variables in Google Chrome Console – Martin Zeitler Commented Sep 1, 2016 at 22:12

2 Answers 2

Seems Chrome changed since 2016. Updated version with same api, but using Richard's idea from below:

function myids() {
  document.body.insertAdjacentHTML('afterend', '<iframe id="tmp" srcdoc="x"/>');
  const el = document.querySelector('#tmp');
  const sub = Object.keys(el.contentWindow);
  el.remove();
  return Object.keys(window).filter(x => !sub.includes(x));
}

function myvars() {
  function gather(a, i) { a[i] = window[i]; return a; }
  return myids().reduce(gather, {});
}

Original 2016 version:

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);
}

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

I created this function to get a unique list of window globals that are not in the default window. Variables appear from the current website and Chrome extensions.

// What unique global variables does my website have?
const getWindowDiff = () => {

  // Create an iframe to get the default window keys
  const myNewIframe = `<iframe style="display:none;" id="myIframe" srcdoc="x"></iframe>`;
  document.body.insertAdjacentHTML('afterend', myNewIframe);
  const iframeWindowKeys = Object.keys(document.querySelector('#myIframe').contentWindow)

  // Get the current pages window keys
  const mainWindowKeys = Object.keys(window);

  // Get the unique keys that are not unique to every website
  const difference = mainWindowKeys.filter(x => !iframeWindowKeys.includes(x));

  // Put the keys and the values in a nice new object
  const uniqueWindowKeys = {};
  difference.map(keyString => {
    uniqueWindowKeys[keyString] = window[keyString]
  });

  // Now you have everything you ever wanted in life. Look at you go!
  return { difference, uniqueWindowKeys }
}