在特定状态下调试浏览器的建议和提示？(Suggestion & Tips to debug the browser on specific state?)

在特定状态下调试浏览器的建议和提示？(Suggestion & Tips to debug the browser on specific state?)

是否有解决方案在特定状态下调试浏览器？

介绍一个例子：

我想使用typeahead.js和twitter bootstrap 3，但是该插件没有可用的样式。 因此，我希望使用Google Chrome DevTool（F12）进行设计 。

当我开始输入时，会出现一个带有建议的浮动块，我想对其进行右键单击并检查其元素，但每当我进行右键单击时，该内容都会消失。

这就是问题 - 我可以冻结浏览器，这样就不会让js做它的工作，因此我可以检查那个浮动窗口吗？

Is there a solution to debug a browser on specific state ?

Introducing an example:

I want to use typeahead.js along with twitter bootstrap 3, but there are no styles available for that plugin. So I wish to style it by using a Google Chrome DevTool (F12).

When I start typing, there is a floating block which appears with suggestions, i want to do a Right-Click on it and inspect its elements, but whenever I do my Right-Click, that content dissappears.

And here comes the question - can I freeze a browser so it won't let the js to do it's job, therefore I could inspect that floating window ?

最满意答案

是的，您可以右键单击DOM树中的元素并强制元素状态。 请参阅：Chrome开发者工具中的悬停状态

你也可以设置一个dom断点： 如何在chrome中设置DOM断点

你还可以在代码中放置一个断点：在代码中设置一个javascript断点 - 在chrome中？

或者是一个js断点： http ： //www.laurencegellert.com/2012/05/the-three-ways-of-setting-breakpoints-in-javascript/

yes you can right click on the element in the DOM tree and force the element state. See :hover state in Chrome Developer Tools

you could also set a dom breakpoint: how to set DOM Breakpoints in chrome

you could also place a breakpoint in the code: Set a javascript breakpoint in code - in chrome?

or a js breakpoint: http://www.laurencegellert.com/2012/05/the-three-ways-of-setting-breakpoints-in-javascript/