如何列出我在 Chrome DevTools 中创建的所有全局变量？

Question

在典型的浏览器环境中首先存在大量的全局变量，并且在您可能加载的任何 Web 应用程序中通常甚至更多。当我在开发工具中的会话中被跟踪时，我想列出我自己的所有变量，以快速查看我已经发现的内容以恢复，而不是尝试从窗口和命令行历史记录中将其拼凑在一起，理想情况下没有来自页面，或浏览器对象模型。

（如果您想要所有全局变量，而不仅仅是您在开发工具中创建的变量，这里有一个问答。）

Answer 1

如果页面不会动态地将新标识符泄漏到全局范围内，则此 hack 会列出在

window

标识符之后创建的所有标识符，这似乎非常适合此目的。

myids()

仅列出它们的名称，而

myvars()

将它们收集到您可以检查的对象中，以便在上下文中一起查看它们：

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

它并不完美，但总比没有好，而且它应该只有误报，没有误报。

Answer 2

我创建此函数是为了获取不在默认窗口中的

window

全局变量的唯一列表。变量显示在当前网站和 Chrome 扩展程序中。

// 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 }
}