Chrome开发工具中的上下文菜单条目是否对应于UI视图,如果是,如何在页面上显示它?

问题描述 投票:0回答:1

在Chrome浏览器的“控制台”标签中,有一个上下文菜单下拉菜单。请参阅下面的内容。

enter image description here

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

例如整个网络视图始终与“顶部”相对应。如果我在“顶部”下选择上下文,我该如何知道对应的子视图/区域吗?

google-chrome google-chrome-devtools
1个回答
0
投票

没有此功能,因此您可以在https://crbug.com上请求它。

同时这是一种解决方法:

  1. 切换到Elements面板
  2. 在控制台工具栏的上下文下拉菜单中选择上下文
  3. 打开devtools-on-devtools并运行此控制台命令:

    UI.panels.elements.revealAndSelectNode(UI.panels.console._view._consoleContextSelector._dropDown._selectedItem.target()。model(SDK.DOMModel)._ frameOwnerNode._contentDocument)

注意:

  • 将此命令保存在devtools snippets中,以便稍后快速重新运行。
  • 删除以上命令中的._contentDocument以聚焦帧节点本身。

如何打开devtools-on-devtools:

  1. 首先打开devtools并将其在菜单中的Dock side切换到一个分离的(浮动的)窗口

    enter image description here

  2. 在现在分离的devtools中,在MacOS上按Ctrl Shift i i,这将在新窗口中打开devtools-on-devtools


推荐问答