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

Question

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

引入一个例子:

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

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

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

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/