Twitter的Typeahead - 调试渲染的HTML？

Question

我在调试Twitter的Typeahead脚本时遇到问题。出于某种原因，以下标题显示正常......

header: '<h3 class="tt-title">Ads</h3>',

但是当我将div换成div时，如下所示......

header: '<div class="tt-title">Ads</div>',

我得到空格。我知道有些东西在渲染，但文字现在出现了。我觉得这是一个CSS问题，但我无法查看开发人员工具中下拉列表的呈现HTML。在我有机会在源中导航到下拉之前，下拉菜单会自动关闭。

任何人都知道如何阻止它一旦打开就关闭？我使用的是Chrome的开发者工具。

Answer 1

如果您使用的是chrome开发人员工具，只需右键单击元素选项卡中的元素class="tt-dataset-0"，然后选择break on ... / subtree modification。如果您开始输入typeahead输入字段，调试器将会中断。现在，您可以右键单击要检查的元素。

Answer 2

我之前从未使用过Typeahead，但我检查了他们的文档及其demo-page。这肯定有点棘手。

无论如何，让它可以使用这个简单的脚本，您可以将其粘贴到浏览器控制台中，这会强制您打开预先打开的搜索框，并在元素检查器中查看时保持打开状态：

$('.typeahead').focus().typeahead('val', '').focus().typeahead('val', 'what ever value you want to test');

至少在Chrome中，建议框甚至在右键单击时保持打开状态＆gt;检查元素。

<强>更新; OP要求更广泛的解释：

上面的代码是jQuery并带有一个选择器 - 包含Typeahead的元素。截图：

此示例中的选择器特定于Typeahead库的演示页面。您可能需要根据初始化自己的Typeahead的方式进行调整。