javascript - Chrome Dev Tools - 通过页面重新加载记住选择的元素

Question

我正在构建我自己类型的 Chrome 开发工具(检查元素)，它也将采用使用 JavaScript 的 Chrome 扩展程序的形式。我希望它具有与 Chrome 开发工具类似的功能，其中之一我发现很难揭穿他们是如何做到的。

基本上，当您右键单击任何元素并单击“检查元素”时，它会打开开发工具(如果尚未打开)并将鼠标悬停在您右键单击所针对的 HTML 元素上。

我想复制的一点是，当您刷新页面时，您仍然在开发工具中选择了元素，它将重新加载所有 HTML 并直接转到您在重新加载之前在开发工具中选择的元素。

如果有点不清楚，我的意思是:

HTML:

<div class="1">
    <div class="2">
        <div class="3"></div>
    </div>
</div>

如果我将鼠标悬停在类为“3”的 div 上并刷新页面，Chrome 开发工具知道重新加载开发工具并突出显示该确切的 div。即使有多个具有该类或类似结构的 div，它也始终会悬停在正确的那个上。

谁知道这里最好的方法是否是有一个大的 if 语句来寻找元素的某些特征，例如理想情况下的 id，但如果元素没有 id，例如 surrounding，还有很多回退元素或与该元素关联的唯一类/属性？

我尝试搜索“Chrome 扩展节点选择器”或类似的变体，但未能找到任何信息。

Answer 1

您可以找到一个非常好的“检查元素”扩展 here .但是，它不支持保存检查的元素。但由于这是一个赏金问题，我可以给你一些提示，以改进它以成为一个可行的解决方案。

我在这里看到的主要问题是“序列化”元素。可以找到关于这个主题的一个很好的答案 here . (另见 fiddle)它基本上总结为“找到最近的具有 ID 的祖先并向下跟踪路径到被检查的元素”。在您的情况下，这可能是:

tracePath: function (element, result) {
  if (element.id !== '') {
    result.push({
      id: element.id
    });
    return;
  }
  if (element === document.body) {
    result.push({
      tag: element.tagName
    });
    return;
  }

  var siblings = element.parentNode.childNodes;
  for (var i = 0; i < siblings.length; ++i) {
    var sibling = siblings[i];
    if (sibling === element) {
      result.push({
        index: i,
        tag: element.tagName
      });
      return this.tracePath(element.parentNode, result);
    }
  }
},

上面只是存储了反序列化过程中要遵循的节点数组:

find: function (path) {
  var element;
  while (path.length) {
    var current = path.pop();

    if (!current) return element;
    if (current.id) element = document.getElementById(current.id);
    else if (element) {
      if (current.index < element.childNodes.length && current.tag === element.childNodes[current.index].tagName)
        element = element.childNodes[current.index];
      else
        return;
    } else {
      var matches = document.getElementsByTagName(current.tag);
      if (matches.length)
          element = matches[0];
    }
  }
  return element;
},

一旦我们这两个，我们只需要存储/加载选择的方法:

store: function (path) {
  var selection = Object.create({});
  selection[window.location.href] = path;
  chrome.storage.local.set(selection, function () {
    if (chrome.runtime.lastError) {
      console.error(chrome.runtime.lastError)
    }
  })
},

并加载:

load: function () {
  var self = this, key = window.location.href;
  chrome.storage.local.get(key, function (found) {
    if (chrome.runtime.lastError) {
      console.error(chrome.runtime.lastError)
    } else if (found && found[key]) {
      var path = found[key],
        element = Util.find(path);

      if (element) {
        // zoom into inspected element
        element.scrollIntoView();
        // add selection to Inspector instance
        self.$selection = element;
        // function similar to layout() - highlights inspected element
        self.select();
      }
    }
  })
}

然后您可以编写一个突出显示功能，比如 select 来突出显示被检查的元素，类似于现有的 layout 突出显示标尺。

单击元素时可以保存元素:

registerEvents: function() {
  ...
  document.addEventListener('click', function () {
      var path = [];
      Util.tracePath(this.$target, path);
      this.$selection = this.$target;
      this.select(true);
      this.storeSelection(path);
  }.bind(this));
  ...
},

---

有一个包含上述修改的分支，您可以找到 here .您可以通过 downloading 试用一下它并将 app 文件夹作为解压扩展加载到 chrome://extensions/ 下的新选项卡中。享受吧!

---

截图