entityMap|blocks|key|82gvd|text|我认为你可以使用Chrome中的CSS编辑器来应用一个状态，例如，'hover‘状态。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|csf1q|在开发人员工具中，选择一个元素。右手边有一个方块，上面有一个箭头。单击该选项，您可以选择一个州。例如，选择hovered，你会看到你的窗口和你的CSS更新，就像元素正在被悬停一样。^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|F|9|@]|A|@]|B|$]]]]

I think you can use the CSS Editor in Chrome to apply a state, for instance, the state of 'hover'.

In the Developer Tools, you select an element. On the right hand you have a square with an arrow over it. Click that and you can choose a state. For instance, pick hovered and you'll see both your window and your CSS update as if the element is being hovered right now.

entityMap|blocks|key|2qfkc|text|在Mac上，你可以在打开下拉菜单后按cmd%2B\暂停脚本。然后可以使用shift%2Bcmd%2Bc检查元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

On Mac, you can press <kbd>cmd</kbd>+<kbd>\</kbd> to pause the script after having opened the dropdown. You can then use <kbd>shift</kbd>+<kbd>cmd</kbd>+<kbd>c</kbd> to inspect elements.

entityMap|blocks|key|f3r4q|text|您可以设置每秒写出JS控制台中给定元素内容的时间间隔。将其放入控制台并打开下拉列表。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|fpk2g|setInterval(()+=>+
++++console.log(document.querySelector('.Select-menu-outer').outerHTML),
1000)|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

You can set an interval that writes out the content of a given element in the JS console every second. Drop this in the console and open the dropdown.

<pre><code>setInterval(() =&gt; 
 console.log(document.querySelector('.Select-menu-outer').outerHTML),
1000)
</code></pre>

entityMap|0|type|IMAGE|mutability|IMMUTABLE|data|imageUrl|https://ask.qcloudimg.com/http-save/actteam/18c044d7c18bc6cabcc9092eda576c76.png|imageAlt|blocks|key|85fba|text|根据菜单元素的类型，我在下拉输入菜单中遇到了这个问题。当我检查它时，它消失的原因是因为一个blur当我在元素之外的任何地方单击时，都会在该元素上触发。|unstyled|depth|inlineStyleRanges|entityRanges|585oe|我能够检查元素的一种方法是通过删除blur事件侦听器来防止触发blur事件：|81poe|检查Chrome上的输入元素|6h0g1|转到Event+Listeners选项卡并删除blur事件|d59s8|6adnp|?|atomic|offset|length|1poce|20a9f|​|1ckfn|删除模糊事件后，您可以打开菜单并检查它，而不会消失^0|0|0|0|0|0|0|1|0|0|0|0^^$0|$1|$2|3|4|5|6|$7|8|9|-4]]]|A|@$B|C|D|E|2|F|G|10|H|@]|I|@]|6|$]]|$B|J|D|K|2|F|G|11|H|@]|I|@]|6|$]]|$B|L|D|M|2|F|G|12|H|@]|I|@]|6|$]]|$B|N|D|O|2|F|G|13|H|@]|I|@]|6|$]]|$B|P|D|-4|2|F|G|14|H|@]|I|@]|6|$]]|$B|Q|D|R|2|S|G|15|H|@]|I|@$T|16|U|17|B|18]]|6|$]]|$B|V|D|-4|2|F|G|19|H|@]|I|@]|6|$]]|$B|W|D|X|2|F|G|1A|H|@]|I|@]|6|$]]|$B|Y|D|Z|2|F|G|1B|H|@]|I|@]|6|$]]]]

Depending on the menu element type, I ran into this issue with drop-down input menus. The reason it's disappearing when I inspect it, is because a <code>blur</code> event is always triggered on the element when I click anywhere outside the element.
One way I was able to inspect the element is to prevent the blur event from being triggered is by removing the blur event listener:
<ul>
<li>Inspect the input element on Chrome</li>
<li>Go to the Event Listeners tab and remove the blur event
<a href="https://i.stack.imgur.com/u00pt.png" rel="noreferrer"><img src="https://i.stack.imgur.com/u00pt.png" alt="enter image description here" /></a></li>
</ul>
Once the blur event is removed, you can open the menu and inspect it without disappearing

entityMap|0|type|IMAGE|mutability|IMMUTABLE|data|imageUrl|https://ask.qcloudimg.com/http-save/actteam/badee0d31d32cc6a572bbd18943b9649.png|imageAlt|1|https://ask.qcloudimg.com/http-save/actteam/695a569acff4aedb352796fc4c431b5b.gif|blocks|key|c6sfg|text|现在，当我将鼠标悬停在菜单上，并右键单击以检查它时，该菜单将关闭，并且我无法检查它！|unstyled|depth|inlineStyleRanges|entityRanges|5ll7a|3p9gn|我遇到了同样的问题，我使用的是|3nmaq|递归扩展|17s4t|chrome开发工具上的选项：|amrdu|具体步骤如下：|af0kd|检查下拉字段|17co1|找到动态DOM+(紫色高亮显示)|8fsqv|在动态DOM上单击鼠标右键|a81qf|选择|27o6v|4rm29|：|kkid|cm20m|?|atomic|offset|length|d97n5|5i5eg|​|3eg08|我们可以看到所有的元素都在那里|b10uk|这是一个演示：|9pvi6|8v4gj|3l4qp|d3g2e|2hin9^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|1|0|0|0|0|0|0|0|0|0|1|1|0|0^^$0|$1|$2|3|4|5|6|$7|8|9|-4]]|A|$2|3|4|5|6|$7|B|9|-4]]]|C|@$D|E|F|G|2|H|I|1N|J|@]|K|@]|6|$]]|$D|L|F|-4|2|H|I|1O|J|@]|K|@]|6|$]]|$D|M|F|N|2|H|I|1P|J|@]|K|@]|6|$]]|$D|O|F|P|2|H|I|1Q|J|@]|K|@]|6|$]]|$D|Q|F|R|2|H|I|1R|J|@]|K|@]|6|$]]|$D|S|F|T|2|H|I|1S|J|@]|K|@]|6|$]]|$D|U|F|V|2|H|I|1T|J|@]|K|@]|6|$]]|$D|W|F|X|2|H|I|1U|J|@]|K|@]|6|$]]|$D|Y|F|Z|2|H|I|1V|J|@]|K|@]|6|$]]|$D|10|F|11|2|H|I|1W|J|@]|K|@]|6|$]]|$D|12|F|P|2|H|I|1X|J|@]|K|@]|6|$]]|$D|13|F|14|2|H|I|1Y|J|@]|K|@]|6|$]]|$D|15|F|-4|2|H|I|1Z|J|@]|K|@]|6|$]]|$D|16|F|17|2|18|I|20|J|@]|K|@$19|21|1A|22|D|23]]|6|$]]|$D|1B|F|-4|2|H|I|24|J|@]|K|@]|6|$]]|$D|1C|F|1D|2|H|I|25|J|@]|K|@]|6|$]]|$D|1E|F|1F|2|H|I|26|J|@]|K|@]|6|$]]|$D|1G|F|1H|2|H|I|27|J|@]|K|@]|6|$]]|$D|1I|F|1D|2|H|I|28|J|@]|K|@]|6|$]]|$D|1J|F|-4|2|H|I|29|J|@]|K|@]|6|$]]|$D|1K|F|17|2|18|I|2A|J|@]|K|@$19|2B|1A|2C|D|2D]]|6|$]]|$D|1L|F|-4|2|H|I|2E|J|@]|K|@]|6|$]]|$D|1M|F|1D|2|H|I|2F|J|@]|K|@]|6|$]]]]

<blockquote>
 Now, when I hover the menu, and right click to inspect it, the menu
 closes, and I cannot inspect it!
</blockquote>

I faced the same issue and what I used was Expand recursively option on chrome dev tools:

The steps are: 

<ol>
<li>Inspect the dropdown field</li>
<li>Find the dynamic DOM (the purple highlight)</li>
<li>Right-mouse click on that dynamic DOM</li>
<li>Choose Expand recursively: 
<a href="https://i.stack.imgur.com/kB8Ix.png" rel="noreferrer"><img src="https://i.stack.imgur.com/kB8Ix.png" alt="enter image description here"></a></li>
<li>We can see all elements are there</li>
</ol>

Here is a demo:

<a href="https://i.stack.imgur.com/rAkRx.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/rAkRx.gif" alt="enter image description here"></a>

entityMap|0|type|IMAGE|mutability|IMMUTABLE|data|imageUrl|https://ask.qcloudimg.com/http-save/actteam/545a3dc2dbcbe3ff29855629da9be31a.png|imageAlt|1|https://ask.qcloudimg.com/http-save/actteam/fba60d14936e5b5eb3e44d720a09e752.png|blocks|key|3mvd8|text|在Chrome中，按F12打开开发人员控制台，然后单击设置(齿轮图标)或按F1：|unstyled|depth|inlineStyleRanges|entityRanges|c5aa3|​|915hk|fk0os|?|atomic|offset|length|2fhro|3vkld|7e2te|然后找到并选中“模拟一个有焦点的页面”选项。|9idlt|b6fio|cj6j|8mhf9|931pr^0|0|0|0|0|1|0|0|0|0|0|0|0|0|1|1|0|0^^$0|$1|$2|3|4|5|6|$7|8|9|-4]]|A|$2|3|4|5|6|$7|B|9|-4]]]|C|@$D|E|F|G|2|H|I|12|J|@]|K|@]|6|$]]|$D|L|F|M|2|H|I|13|J|@]|K|@]|6|$]]|$D|N|F|-4|2|H|I|14|J|@]|K|@]|6|$]]|$D|O|F|P|2|Q|I|15|J|@]|K|@$R|16|S|17|D|18]]|6|$]]|$D|T|F|-4|2|H|I|19|J|@]|K|@]|6|$]]|$D|U|F|M|2|H|I|1A|J|@]|K|@]|6|$]]|$D|V|F|W|2|H|I|1B|J|@]|K|@]|6|$]]|$D|X|F|M|2|H|I|1C|J|@]|K|@]|6|$]]|$D|Y|F|-4|2|H|I|1D|J|@]|K|@]|6|$]]|$D|Z|F|P|2|Q|I|1E|J|@]|K|@$R|1F|S|1G|D|1H]]|6|$]]|$D|10|F|-4|2|H|I|1I|J|@]|K|@]|6|$]]|$D|11|F|M|2|H|I|1J|J|@]|K|@]|6|$]]]]

In Chrome, press F12 to open the developer console, then click on Settings (cogwheel icon) or press F1:
<img src="https://i.stack.imgur.com/dPReZ.png" alt="Dev tools Settings" />
then find &amp; check the &quot;Emulate a focused page&quot; option.
<img src="https://i.stack.imgur.com/12TxE.png" alt="Check Emulate a Focused Page Option" />

entityMap|blocks|key|6ntag|text|在Firefox中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9tppp|在Inspector中，右键单击包含下拉列表的节点，选择：|8vb3s|休息一下..。>修改子树|ek5em|这将在dropdown出现的时刻暂停执行...好吧..。掉下来了。^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|J|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|K|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|L|9|@]|A|@]|B|$]]]]

In Firefox

In Inspector, right click on a node that contains the dropdown, select:

Break on... > Subtree modification

This will pause execution the moment dropdown is... well... dropped down.

entityMap|0|type|IMAGE|mutability|IMMUTABLE|data|imageUrl|https://ask.qcloudimg.com/http-save/actteam/78808328f2912e589ba6556a6762c384.png|imageAlt|blocks|key|90j1e|text|上面提到的补救措施对我来说都不起作用。由于我们的下拉菜单(基于React)将在任何一次单击(向右或向左)时关闭，因此我们找到了以下解决方法：|unstyled|depth|inlineStyleRanges|entityRanges|325hi|在Chrome+Open+developer+tools中|5vja4|首先单击处于折叠状态的下拉列表&让它通过选项展开|jj5l|然后在element部分下，右键单击div节点(确保在右键单击之前不要左键单击)，其中包含下拉项的详细信息|9cms6|然后选择选项‘|a4p5r|递归扩展|11kba|‘|8s4qi|然后显示所需的详细信息|clevl|35v1t|?|atomic|offset|length|ah52q|diq3v|​^0|0|0|0|0|0|0|0|0|0|0|1|0|0|0^^$0|$1|$2|3|4|5|6|$7|8|9|-4]]]|A|@$B|C|D|E|2|F|G|16|H|@]|I|@]|6|$]]|$B|J|D|K|2|F|G|17|H|@]|I|@]|6|$]]|$B|L|D|M|2|F|G|18|H|@]|I|@]|6|$]]|$B|N|D|O|2|F|G|19|H|@]|I|@]|6|$]]|$B|P|D|Q|2|F|G|1A|H|@]|I|@]|6|$]]|$B|R|D|S|2|F|G|1B|H|@]|I|@]|6|$]]|$B|T|D|U|2|F|G|1C|H|@]|I|@]|6|$]]|$B|V|D|W|2|F|G|1D|H|@]|I|@]|6|$]]|$B|X|D|-4|2|F|G|1E|H|@]|I|@]|6|$]]|$B|Y|D|Z|2|10|G|1F|H|@]|I|@$11|1G|12|1H|B|1I]]|6|$]]|$B|13|D|-4|2|F|G|1J|H|@]|I|@]|6|$]]|$B|14|D|15|2|F|G|1K|H|@]|I|@]|6|$]]]]

None of the above referred remedies worked for me.
As our drop down (React based) will close on any single click (right or left)
So we found out the below workaround:
<ul>
<li>In Chrome Open developer tools</li>
<li>first click on the drop-down in collapsed state &amp; let it expand with options</li>
<li>then under the element section, right-click on the div node (make sure not to left click before right clicking), which contains details of the drop-down items</li>
<li>Then select option 'Expand Recursively'</li>
<li>Then required details were shown
<a href="https://i.stack.imgur.com/hPNtb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hPNtb.png" alt="enter image description here" /></a></li>
</ul>

entityMap|blocks|key|boddo|text|添加到“在Chrome中，按F12打开开发人员控制台，然后单击设置(齿轮图标)或按F1:”；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7u0fk|在Chrome+86和更高版本中，你可以在这里找到“模拟一个有焦点的页面”选项：|13h1h|DevTools+>>+Elements+>>“烤肉串”菜单(3个垂直点由设置齿轮)+>>更多工具>>渲染。|2ui5k|或者:在Devtools打开的情况下:按CTRL/CMD%2BSHIFT+P打开命令菜单HUD，输入"emulate+a+fo“缩小搜索结果范围，然后输入(或单击)切换设置。^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|J|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|K|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|L|9|@]|A|@]|B|$]]]]

Adding to &quot;In Chrome, press F12 to open the developer console, then click on Settings (cogwheel icon) or press F1:&quot; above;
In Chrome 86 and above you can find &quot;Emulate a focused page&quot; option here:
DevTools &gt;&gt; Elements &gt;&gt; &quot;Kebab&quot; menu (3 vertical dots by the settings cog) &gt;&gt; More tools &gt;&gt; Rendering.
Alternately: With Devtools open: Hit CTRL/CMD+SHIFT P to open the command menu HUD, enter &quot;emulate a fo&quot; to narrow the search results and enter (or click) to toggle the setting.

entityMap|blocks|key|1ph1b|text|对我来说唯一可行的方法就是setTimeout(()+=>+{+debugger+},+3000)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7mfjs|并在运行超时时打开下拉列表。|914vk|在开发工具UI中按暂停按钮或按F8键暂停脚本执行都会关闭菜单。^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|H|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|I|9|@]|A|@]|B|$]]]]

Only way that would work for me was doing <code>setTimeout(() =&gt; { debugger }, 3000)</code> in the console and opening the dropdown while timeout was running.
Pressing pause button in dev tools UI or F8 key to pause script execution would both close the menu.

I'm on Chrome Version 41.0.2272.101 m (newest), and this update is messed up. They put it, when you have inspector open, that any DOM change will flash with purple on the changed element (like in Firefox), but now I cannot inspect any hovered object (also like in FF, which is why I don't like to use it when doing front end developing).

I'm talking about js triggered events, like superfish for instance. Before, I could hover the menu, and cover the menu with the inspector, and the menu would stay opened, and I could go in the inspector see what pseudoelements are created, change the paddings and such directly, and see the change. Now, when I hover the menu, and right click to inspect it, the menu closes, and I cannot inspect it!

I tried dragging the inspector over, but nothing helped. This new 'feature' is annoying as hell. Is there a way to inspect js triggered events, without putting break points on elements (which works, but is kinda pain in the ass)?

Inspecting drop down menus in new Chrome

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

 我使用的是Chrome版本41.0.2272.101m(最新版本)，这个更新搞砸了。他们说，当你打开检查器时，任何DOM更改都会在更改的元素上闪烁紫色(就像在Firefox中一样)，但现在我不能检查任何悬停的对象(也像在FF中一样，这就是为什么我不喜欢在进行前端开发时使用它)。 我说的是js触发的事件，比如super...

问检查新Chrome中的下拉菜单
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问检查新Chrome中的下拉菜单EN