如何从浏览器开发者控制台识别页面创建的客户端全局变量？

要筛选出页面创建的window属性，排除浏览器自带内容，可采用以下几种实用方案：

1. 空白页属性对比法 #

这是最准确的基础方法，通过对比空白页与目标页面的window自有属性来区分：

• 步骤：
  1. 打开空白标签页（如about:blank），待页面加载完成后，执行代码记录所有window自有属性：

     const baseWindowProps = new Set(Object.getOwnPropertyNames(window));
     

  2. 切换到目标页面，执行对比代码，筛选出空白页没有的属性：

     const pageAddedProps = Object.getOwnPropertyNames(window).filter(prop => !baseWindowProps.has(prop));
     console.log('页面新增的Window属性:', pageAddedProps);
     

• 注意事项：
  • 空白页需完全加载，避免遗漏延迟初始化的浏览器自带属性
  • Object.getOwnPropertyNames会获取所有自有属性（包括不可枚举的），比for...in遍历更全面

2. 枚举与自有属性筛选法 #

利用浏览器核心属性的特性，快速筛选页面新增属性：

• 大部分浏览器自带核心属性要么是不可枚举的，要么是已知的固定项，可通过以下代码筛选：

  // 先定义已知需排除的浏览器核心自有属性
  const excludeProps = new Set(['document', 'screen', 'navigator', 'location', 'history', 'alert', 'onblur']);
  const pageCreatedProps = Object.keys(window).filter(prop => {
    return window.hasOwnProperty(prop) && !excludeProps.has(prop);
  });
  console.log('页面创建的属性:', pageCreatedProps);
  

• 局限性：
  • 若页面刻意添加不可枚举属性，该方法会遗漏
  • 部分浏览器可能有特殊的可枚举自有属性，需要补充到排除列表中

3. 实时监听属性添加 #

通过代理window对象，实时捕获页面新增的属性：

• 需在页面脚本执行前注入以下代码，才能完整捕获初始化阶段添加的属性：

  const addedPageProps = [];
  // 代理window对象，拦截属性设置操作
  new Proxy(window, {
    set(target, prop, value) {
      // 仅记录原本不存在的自有属性
      if (!target.hasOwnProperty(prop)) {
        addedPageProps.push(prop);
      }
      target[prop] = value;
      return true;
    }
  });
  // 后续可通过addedPageProps查看页面新增的属性
  

• 注意：部分浏览器对window的代理有安全限制，需在合适的上下文执行

4. 页面脚本溯源法 #

直接从页面脚本中查找全局变量定义：

• 利用浏览器开发者工具的Sources面板，搜索window.或全局变量赋值语句（如var nacho =、$ =）
• 查看页面的内联<script>标签和外部加载的脚本，定位所有对window的赋值操作

内容的提问来源于stack exchange，提问作者IMTheNachoMan