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 ... /子树修改.如果您开始输入typeahead输入字段,调试器将会中断.现在,您可以右键单击要检查的元素.

Answer 2

我之前从未使用过Typeahead,但我查看了他们的文档和他们的演示页面.这肯定有点棘手.

无论如何,让它可以使用这个简单的脚本,你可以粘贴在你的浏览器控制台中,这会强制你打开预先打开的搜索框,并在你在元素检查器中四处寻找时保持打开状态:

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

至少在chrome中,建议框甚至在右键单击> inspect元素时保持打开状态.

更新; OP要求更广泛的解释:

上面的代码是jQuery并采用一个选择器 - 包含Typeahead的元素.截图:

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