google-chrome - 有没有办法在 Chrome DevTools 中搜索控制台记录的对象以获取特定值？

Question

我想 console.log() 一个对象并在该对象中搜索特定值。这可能吗？

注意：我要搜索的对象是庞大且多维的，因此扩展每个字段并执行简单的 Ctrl+F 查找并不理想。

Answer 1

下面的代码将您正在寻找的内容添加到控制台对象中

console.logSearchingForValue

广度优先搜索、匹配等效的“JSON”值、正确处理 NaN、返回多个位置以及使数字索引表达式不被引用作为练习留给读者。:)

交换不同的平等定义已经很容易了。

var searchHaystack = function(haystack, needle, path, equalityFn, visited) {

  if(typeof haystack != "object") {
    console.warn("non-object haystack at " + path.join("."));
  }

  if(visited.has(haystack))
    return [false, null];

  for(var key in haystack) {
    if(!haystack.hasOwnProperty(key))
      continue;

    if(equalityFn(needle, haystack[key])) {
      path.push(key);
      return [true, path];
    }

    visited.add(haystack);
    if(typeof haystack[key] == "object") {
      var pCopy = path.slice();
      pCopy.push(key);
      var deeper = searchHaystack(haystack[key], needle, pCopy, equalityFn, visited);
      if(deeper[0]) {
        return deeper;
      }
    }
  }
  return [false, null];
}

var pathToIndexExpression = function(path) {
   var prefix = path[0];
   path = path.slice(1);
   for(var i = 0; i < path.length; i++) {
      if(typeof path[i] == "string")
         path[i] = "\"" + path[i] + "\"";
   }
   return prefix + "[" + path.join("][") + "]"
}

console.logSearchingForValue = function(haystack, needle) {
   this.log("Searching");
   this.log(haystack);
   this.log("for");
   this.log(needle);
   var visited = new Set();
   var strictEquals = function(a,b) { return a === b; };
   var result = searchHaystack(haystack, needle, ["<haystack>"], strictEquals, visited);
   if(result[0]) {
      this.log("Found it!");
      this.log(pathToIndexExpression(result[1]));
   }
   else {
      this.log("didn't find it");
   }
}

Answer 2

1. 运行（直接在控制台中）：

JSON.stringify(myObject)

这会将对象输出为字符串表示形式。

2. 然后通过键入以下内容在控制台中搜索：

Ctrl+f