如何调试弹出框？

Posted 2023-05-08

【中文标题】如何调试弹出框？

【英文标题】：How to debug a popover?

【发布时间】：2012-01-28 06:20:46

【问题描述】：

在这个小提琴http://jsfiddle.net/mjmitche/qVdEy/6/ 上，您可以看到弹出框内的文本对齐是完美的，但是，当我在我的网站上放置完全相同的 css/js/html 时，文本比容器大！

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

【问题讨论】：

毫无疑问，您将自己的 CSS 与 Bootstrap 混合在一起。然后你自己的 CSS 会破坏 bootstrap，就这么简单。

你用的是什么版本的firefox，我在firefox或chrome上没有遇到同样的问题

我想你误解了这个问题。 jsfiddle 上的弹出窗口是完美的（在我的浏览器和你的浏览器中），但在我的本地站点（只有我能看到）上它已经坏了，不管浏览器是什么。你在我的本地网站上看不到代码。

唯一合乎逻辑的解决方案是@TomvanderWoerdt 建议的

我知道我的实现显然是在制造问题——这很简单——但我的问题是“如何调试弹出框”，因为每次我尝试使用 firebug 读取 css 时，弹出框都会消失。我无法弄清楚问题的根源

【参考方案1】：

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

【讨论】：

如果问题是关于如何调试，这应该是公认的答案。

正是我想要的，您也可以在“watch”面板中添加该命令。

此外，在 Firefox DevTools 中，您可以在 Inspector 中选择触发元素，右键单击“在控制台中使用”并执行类似 $(temp0).popover('show')

的操作

【参考方案2】：

我所做的有点奇怪，而且似乎只适用于 Chrome，而不适用于 Firebug。 步骤是：

在新窗口中打开 Chrome 检查器 确保检查器的一部分位于您所在按钮的上方 试图激活（在后台窗口中 激活浏览器窗口并将鼠标悬停在按钮上（这会激活弹出窗口），现在点击 alt+tab（在 OSX 上为 cmd+`）切换到检查器窗口。 这不会触发 mouseOut 事件并离开您的弹出窗口 附加到 DOM 主体节点！由于您已经在检查员中 您可以导航到它并查看 css 问题。

【讨论】：

这对我来说有点用，但是一旦我在第 3 步之后移动鼠标，鼠标移出事件实际上会被触发，即使它不再是活动窗口:( 但它确实出现在在此之前的控制台，但我看不到该元素，因为在它消失之前我无法在 Chrome Inspector 中滚动查看它

【参考方案3】：

在查看 popover CSS 之后，似乎没有明确定义的字体大小：http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css（只需在“popover”上查找并查看 CSS）

也许尝试添加以下 CSS 并从那里进行调整：

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

希望有帮助:)

【讨论】：

这回答了基本问题。仅供参考，有关初始问题的答案，请参见下面约翰的回答。

【参考方案4】：

这就是我创建新的 HTML 框可视化工具的目的。看看吧！

HTML Box Visualizer - GitHub