如何在JavaScript函数中让Chrome定位并检查指定元素？

问题背景 #

现有如下函数：

function showProps(el){
    inspect(el);
}

需求是调用该函数时，Chrome自动打开检查窗口并定位到传入的el元素。但实际测试发现：在Chrome控制台直接执行inspect(document.body)可以正常打开检查面板并选中body元素，但在自定义函数中调用inspect()时，会提示该方法未定义。

问题原因 #

inspect()是Chrome开发者控制台提供的专属API，它仅存在于控制台的专属全局上下文（而非页面脚本的全局window上下文）中。因此页面脚本里定义的普通函数无法直接访问这个方法。

解决方案 #

方案1：在控制台上下文定义函数

直接在Chrome控制台中定义showProps函数，这样函数会运行在控制台的上下文环境里，自然能访问到inspect()方法：

function showProps(el) {
  inspect(el);
}

之后在控制台调用showProps(document.body)即可正常触发元素检查。

方案2：绑定到window对象（控制台快速复用）

如果希望在页面脚本中定义函数，同时能在控制台正常调用，可以把函数挂载到window全局对象上：

window.showProps = function(el) {
  inspect(el);
};

此时在控制台直接调用showProps(el)就能正常工作，因为控制台上下文可以访问window上的属性。

方案3：利用Chrome调试协议（扩展场景）

如果需要在Chrome扩展或调试脚本中实现该功能，可以借助Chrome调试协议的API。这种方式需要在扩展中声明debugger权限，示例代码如下：

function showProps(el) {
  chrome.debugger.sendCommand(
    { tabId: chrome.devtools.inspectedWindow.tabId },
    "DOM.inspect",
    { objectId: el }
  );
}

注意：该方法仅适用于Chrome扩展开发场景，需要配合扩展的权限配置使用。

内容的提问来源于stack exchange，提问作者kp64