javascript - 如何在Javascript控制台中获取对象的全名和 "path"？

Question

假设我有一个大型 SPA，我可以查看其来源。现在那里有一个对象，其中包含我想要查看和/或更改以进行调试目的的数据。

我可以在代码中放置一个 console.log(myObject) ，它会显示在控制台中，这很好......但是我如何输出完整的路径 或当前窗口中对象的全名，以便我可以打开 JS 控制台并输入例如:

window.myApp.something.anothersomthing[12].myObject

然后得到我的对象？我所能找到的只是如何打印该类型，但这没有帮助。有什么想法吗？

Answer 1

这是一个非常简单的实现，可以让您在对象图中搜索对象并打印出遇到该对象的路径。

有一些注意事项:

1. 正如您在代码片段中看到的，我传入 window.myApp 作为启动搜索的上下文。如果您传入 window，您将遇到许多错误。
   例如，在 Chrome 中，window.clientInformation.plugins[0] === window.clientInformation.plugins[0] 计算结果为 false，这使得跟踪已访问的对象变得不可能。

2. 有许多实现细节可能会导致下面的脚本行为异常( getter 、代理、生成器……)。

function search(object, context) {
  let found = [];
  let visited = [];

  let visit = (object, reference, path) => {
    if (object === reference) {
      found.push(path);
    }

    if (!visited.includes(reference)) {
      visited.push(reference);

      if (Array.isArray(reference)) {
        for (let i = 0; i < reference.length; i++) {
          visit(object, reference[i], path + '[' + i + ']');
        }
      } else if (reference === Object(reference)) { // test for object
        for (let key in reference) {
          visit(object, reference[key], path + '.' + key);
        }
      }
    }
  }

  visit(object, eval(context), context);

  return found;
}

// example
let myObject = {};
let myApp = {
  something: {
    anotherSomething: [null, null, null, null, null, null, null, null, null, null, null, null, {
      myObject: myObject
    }]
  }
};

window.myApp = myApp;

console.log(search(myObject, 'window.myApp'));