在特定状态下调试浏览器的建议和技巧？

Question

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

举个例子：

我想将typeahead.js 与 twitter bootstrap 3 一起使用，但该插件没有可用的样式。所以我希望使用 Google Chrome DevTool (F12) 来设置样式。

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

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

Answer 1

是的，您可以右键单击 DOM 树中的元素并强制元素状态。 See :hover state in Chrome Developer Tools

你也可以设置一个 dom 断点： how to set DOM Breakpoints in chrome

您还可以在代码中放置断点： Set a javascript breakpoint in code - in chrome?

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