如何调试弹出窗口？

Question

在这个fiddle http://jsfiddle.net/mjmitche/qVdEy/6/ 上，您可以看到弹出框内文本的对齐是完美的，但是，当我将完全相同的CSS/JS/HTML放在我的网站上时，文本比容器更大！

我正在尝试使用Firebug来弄清楚发生了什么，但是我必须将光标移开弹出窗口才能使用Firebug，然后Firebug就会消失。我无法确定我的代码中哪些设置改变了演示文稿。这些弹出窗口是使用Twitter Bootstrap.js创建的（您可以在fiddle中查看资源）。

- Leahcim

---

毫无疑问，您混合了自己的 CSS 与 Bootstrap。然后，您自己的 CSS 破坏了 Bootstrap，就是这么简单。 - Tom van der Woerdt

OP中的图片是从我的本地主机上获取的。在fiddle上的代码没有任何问题。 - Leahcim

唯一的合理解决方案是@TomvanderWoerdt所建议的。 - Gautam

我知道我的实现显然是造成问题的原因 - 这很简单 - 但我的问题是“如何调试弹出框”，因为每次我尝试使用Firebug读取CSS时，弹出框都会消失。我无法找出问题的根源。 - Leahcim

@JamWaffles 谢谢，我还在试图弄清楚你的代码。感谢你的解释。真不错。 - Leahcim

Answer 1

没有人真正回答了“如何调试一个弹出框”的问题 ::: 只需要在加载时设置弹出框打开 >> $('#element').popover('show')

- John Montgomery

---

如果问题是关于如何调试的话，这应该是被接受的答案。 - Tariqulazam

正是我正在寻找的，你还可以将该命令添加到“监视”面板中。 - guilleva

此外，在 Firefox DevTools 中，您可以在检查器中选择触发元素，右键单击“在控制台中使用”，然后执行类似于 $(temp0).popover('show') 的操作。 - retrovertigo

Answer 2

我的工作有些奇怪，似乎只能在 Chrome 中运行，而不是 Firebug。步骤如下：

1. 打开 Chrome 检查器并在新窗口中。
2. 确保检查器的一部分覆盖在你要激活的按钮上（该按钮位于背景窗口中）。
3. 激活浏览器窗口，将鼠标悬停在按钮上（这会激活弹出窗口），现在按下 alt+tab（OSX 上是 cmd+`）切换到检查器窗口。
4. 这将不会触发 mouseOut 事件并使你的弹出框附加到 DOM body 节点！由于你已经在检查器中，你可以导航到它并查看 css 问题。

- Ryan953

---

这对我有点用，但是在第三步之后只要我移动鼠标，不知何故就会触发鼠标离开事件，即使它不再是活动窗口:(但在此之前它确实出现在控制台中，但我无法看到该元素，因为我无法滚动以在Chrome检查器中查看它，然后它就消失了。 - FireDragon

Answer 3

看了一下弹出框的CSS，似乎没有明确定义字体大小：http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css（在CSS中查找“popover”并浏览）

也许可以尝试添加以下CSS并进行微调：

.popover, .popover h3.title, .popover .content { font-size: 14px; }

希望这能有所帮助 :)

- Andrew Odri

---

这回答了根本问题。顺便提一下，关于最初的问题的答案，请参见下面John的回答。 - retrovertigo

Answer 4

这就是我为之创建新的HTML框可视化工具的原因。快来看看吧！

HTML Box Visualizer - GitHub

- Gabriel McAdams

Answer 5

打开浏览器的开发者工具，然后设置一个鼠标点击断点。只需点击弹出面板的目标，您就会看到弹出面板的打开。像其他普通的DOM块一样调试它即可。

- cici

---

通常提供示例可以帮助用户理解如何实现您的建议。尤其是如果他们提供了一个fiddle（代码片段编辑器），重点关注用户如何修改fiddle以获得您建议的结果，比简单地陈述一种方法更有帮助。 - Ja Superior