Twitter Typeahead - отлаживаемый HTML-код?

У меня проблемы с отладкой Twitter Typeahead script. По какой-то причине следующий заголовок отображает штраф...

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

Но когда я заменяю H3 для divs следующим образом...

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

Я получаю пустое пространство. Я знаю, что что-то делает рендеринг, но текст теперь появляется. У меня такое чувство, что это проблема с CSS, но я не могу просмотреть отображаемый HTML из раскрывающегося списка инструментов разработчика. Падение автоматически закрывается, прежде чем у меня появится возможность перейти к нему в источнике.

Кто-нибудь знает, как предотвратить его закрытие после открытия? Я использую инструменты разработчика Chrome.

ОТВЕТЫ

Ответ 1

Я раньше не использовал Typeahead, но я проверил их документы и их демонстрационную страницу. И это, конечно, было довольно сложно.

Как бы то ни было, попробовал работать с этим простым script, который вы можете вставить в консоль вашего браузера, что заставляет открывать поисковый ящик Typeahead и оставаться открытым, пока вы обманываете инспектор элементов:

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

По крайней мере, в хроме, поле предложений даже остается открытым при щелчке правой кнопкой мыши > проверять элемент.

Обновление; ОП запросил более подробное объяснение:

Приведенный выше код jQuery и принимает селектор - элемент, который содержит Typeahead. Снимок экрана:

enter image description here

Селектор в этом примере специфичен для демонстрационных страниц для библиотеки Typeahead. Вам может потребоваться настроить его в зависимости от того, как вы инициализируете свой собственный Typeahead.

Ответ 2

Если вы используете инструменты для разработчиков Chrome, вы можете просто щелкнуть правой кнопкой мыши по элементу class="tt-dataset-0" на вкладке "Элементы" и выбрать разбить.../модификацию поддерева. Если вы начнете вводить вводное поле typeahead, отладчик сломается. Теперь вы можете щелкнуть правой кнопкой мыши элемент, который вы хотите проверить.