Chrome开发工具中的上下文菜单入口是否对应UI视图，如果是，如何在页面上显示？

Question

在 Chrome 浏览器的 'console' 选项卡中，有一个上下文菜单下拉菜单。请参考下文。

当我检查页面上的元素时，上下文菜单下拉菜单将显示该元素所在的 'context'。我的问题是：此上下文是否对应于 'view' 中的子 'view'网页？如果是这样，我如何显示与上下文相关的视图？

例如整个网络视图总是对应于 'top'。如果我 select 在 'top' 下的上下文，我怎么能知道对应什么sub view/area吗？

Answer 1

没有这样的功能，所以您可以在 https://crbug.com 上请求它。

同时这里有一个解决方法：

切换到 Elements 面板
Select 控制台工具栏上下文下拉列表中的上下文

打开 devtools-on-devtools 和运行这个控制台命令 window:

(async () => {
  const dom = UI.panels.console._view._consoleContextSelector._dropDown._selectedItem
                .target().model(SDK.DOMModel);
  if (!dom._document) await dom.requestDocument();
  UI.panels.elements.revealAndSelectNode(dom._document);
})();

将此命令保存在 devtools snippets 中以便稍后快速重新运行。

如何打开 devtools-on-devtools：

首先打开 devtools 并将其 Dock side 在菜单中切换为分离（浮动）window
在现在分离的 devtools 中按 CtrlShifti 或者⌘⌥i 在 MacOS 上，
这将在新的 window

devtools-on-devtools

Chrome开发工具中的上下文菜单入口是否对应UI视图，如果是，如何在页面上显示？

Is entry of context menu in Chrome dev tool correspond to UI view, and if so, how to show it on the page?

google-chrome

google-chrome-devtools

如何打开 devtools-on-devtools：