在这个小提琴http://jsfiddle.net/mjmitche/qVdEy/6/上，你可以看到弹出窗口内的文本对齐是完美的，然而，当我把完全相同的css/js/html放在我的网站上时，文本比容器大！
我试图弄清楚使用firebug时发生了什么，但我必须将光标从弹出窗口移开才能使用firebug，然后firebug就消失了。我不知道代码中的哪些设置改变了演示。弹出窗口是使用Twitter Bootstrap.js创建的（你可以看到小提琴上的资源）
在这个小提琴http://jsfiddle.net/mjmitche/qVdEy/6/上，你可以看到弹出窗口内的文本对齐是完美的，然而，当我把完全相同的css/js/html放在我的网站上时，文本比容器大！
我试图弄清楚使用firebug时发生了什么，但我必须将光标从弹出窗口移开才能使用firebug，然后firebug就消失了。我不知道代码中的哪些设置改变了演示。弹出窗口是使用Twitter Bootstrap.js创建的（你可以看到小提琴上的资源）
5条答案
按热度按时间hmtdttj41#
没有人真正回答“如何调试弹出窗口”的问题：：：只需将弹出框设置为加载时打开〉〉
$('#element').popover('show')q43xntqr2#
我所做的有点奇怪，似乎只适用于Chrome，而不是Firebug。步骤是：
1.在新窗口中打开Chrome检查器
1.确保检查器的一部分位于您尝试激活的按钮（位于背景窗口中）的上方
1.激活浏览器窗口并将鼠标悬停在按钮上（这将激活弹出窗口），现在按alt+tab（在OSX上为cmd+'）切换到检查器窗口。
1.这将不会触发mouseOut事件，也不会让弹出窗口附加到DOM body节点！因为你已经在检查器中，所以你可以导航到它并看到css问题。
jaql4c8m3#
在查看弹出窗口CSS后，似乎没有明确定义字体大小：http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css（只需在“popover”上查找并浏览CSS）
也许可以尝试添加以下CSS并从那里调整它：
希望这对你有帮助：）
wxclj1h54#
这就是我创建新的HTML框可视化工具的目的。来看看吧！
HTML Box Visualizer - GitHub
qoefvg9y5#
打开浏览器的devtools，设置鼠标点击断点，点击弹出面板的目标，就可以看到打开的弹出窗口，调试就像其他普通的DOM块一样