从chrome扩展中调用DevTools的inspect（）函数

Question

我想创建一个可以编程方式检查元素的扩展，就像用户右键单击元素并单击“Inspect”一样。我希望这种情况最好发生在清单中通过devtools_page设置的devtools页面中。我想要确切的行为 - 元素面板打开，元素在左侧突出显示，其样式在右侧边栏上。

我怎么做到这一点？

我试过的

作为一个起点，我希望扩展程序附加一个调试器并在我点击顶部的扩展图标后检查文档正文。这是我的devtools_page：

chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.debugger.attach({tabId: tab.id}, "1.0", function () {
        chrome.debugger.sendCommand({tabId: tab.id}, 'Runtime.evaluate', {
            expression: 'console.log(document.body); inspect(document.body);'
        }, function () {
            console.log('Result:', arguments);
        }); 
    });
});

如果我现在查看我正在检查的页面的DevTools窗口，我可以正确地看到body的日志并单击它以打开检查器内的元素。但是，如果我前往扩展程序的devtools页面并检查它，我可以在那里看到“结果：”日志，它显示为：

Result:
Arguments(1)
  0:
    exceptionDetails: {columnNumber: 28, exception: {…}, exceptionId: 2, lineNumber: 0, scriptId: "88", …}
    result:
      className: "ReferenceError"
      description: "ReferenceError: inspect is not defined↵    at <anonymous>:1:29"
      objectId: "{"injectedScriptId":1,"id":1}"
      subtype: "error"
      type: "object"
      __proto__: Object
    __proto__: Object

因此，评估的代码无法访问inspect()函数，即使它可以访问我想要检查的元素。显然，它在页面的上下文中执行，而不是在其DevTools的上下文中执行。

如何以编程方式从我的扩展中设置DevTools中的被检查元素？

Answer 1

正如@Pa Wa指出的那样，chrome.devtools.inspectedWindow通过其eval()方法完成了这项工作：

chrome.devtools.inspectedWindow.eval('inspect(document.body)');

它甚至不需要附加调试器。