Question

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

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

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

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

Answer 1

这是一个非常天真的实现，它允许您在对象图中搜索对象并打印出遇到此对象的路径。

有许多警告：

正如您在代码段中看到的那样，我传入window.myApp作为上下文来启动搜索。如果您传入window，则会遇到许多错误例如，在Chrome中，window.clientInformation.plugins[0] === window.clientInformation.plugins[0]的计算结果为false，这样就无法跟踪已访问过的对象。
有许多实施细节可能会导致下面的脚本行为异常（getter，proxies，generator，...）。

＆＃13;

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

＆＃13;

如何在Javascript控制台中获取对象的全名和“路径”？

1 个答案: