Есть ли способ проверить HTML страницы после того, как на ней выполнены операции AJAX?

Question

Я пишу веб-приложение, которое вставляет и изменяет элементы HTML через AJAX, используя JQuery. Это работает очень хорошо, но я хочу убедиться, что под капотом все в порядке. Когда я проверяю источник страницы в IE или Chrome, он показывает мне исходную разметку документа, а не то, что изменилось со времени моих вызовов AJAX.

Мне нравится использовать валидатор WC3 для проверки моей разметки, поскольку иногда мне напоминает, что я забыл закрыть тег и т. Д. Как я могу использовать это для проверки разметки моей страницы после того, как исходный источник, полученный с сервера, получил был изменен с помощью Javascript?

Спасибо.

Answer 1

Оба предыдущих ответа подтверждают тот факт, что браузер «исправит» часть HTML-кода, вставленного вами в DOM.

Возвращаясь к вашему вопросу, вы можете добавить следующее в закладки в вашем браузере. Он запишет содержимое DOM в новое окно, скопирует и вставит его в валидатор.

javascript:window.open("").document.open("text/plain", "").write(document.documentElement.outerHTML);

Answer 2

Используйте инструмент разработчика в Chrome для изучения DOM: он покажет вам весь HTML, который вы добавили в javascript.

Теперь вы можете скопировать его и вставить в любой нужный вам валидатор.

Или, вместо того, чтобы вставлять код в JQuery, передать его на консоль, браузер не сможет закрывать для вас теги.

console.log(myHTML)

Answer 3

Если вы просто обеспокоены правильной формой (отсутствующие закрывающие теги и т. Д.), Вы, вероятно, просто хотите проверить структуру блоков, которые вставляет AJAX. (Как только он станет частью DOM, он будет хорошо сформирован ... просто не обязательно той структуры, которую вы намеревались.) Самый простой способ сделать это, вероятно, состоит в том, чтобы попытаться проанализировать его с помощью библиотеки XML. (один с режимом HTML, который можно сделать строгим, если вы не используете XHTML)

Фактическая проверка (тестирование правил «Вы не можете поместить тег X внутри тега Y», о которых браузеры обычно не заботятся), намного сложнее и зависит от того, сколько усилий вы готовы приложить. это, может быть, не стоит проблем. (Потому что, если вы проверите их изолированно, вы получите много ложных срабатываний «Это просто фрагмент»)

Независимо от того, что вы решите использовать, вам нужно получить ответы AJAX до того, как браузер проанализирует их, если вы хотите получить надежный результат теста. (Хотя они по-прежнему просто строка текста, а не дерево DOM)