Как проверить HTML, который генерируется из JS, запущенного в браузере?

Question

На рассматриваемой странице есть очень скелетный html, отправленный по проводам, чтобы облегчить создание сложного пользовательского интерфейса в javascript.

Сейчас я сталкиваюсь со странной проблемой совместимости браузера, которая ощущается как очень похоже на проблему разметки где-то на странице.

Я проверил страницу по мере ее появления, используя инструмент W3C, и убедился, что в этом html нет проблем. Я также попытался проверить вывод работы на консоли браузера:

document.getElementsByTagName('html')[0].outerHTML

Я обнаружил, что вывод вышеизложенного вводит много новых проблем, таких как удаление завершающего символа '/' в самозакрывающихся тегах. Этот добавленный шум отвлекает, но также заставляет меня беспокоиться о проверке этого метода.

Как вы проверяете разметку, отображаемую на стороне клиента?

Answer 1

Когда элементы создаются на клиенте, они создаются браузером правильно - на самом деле проверять нечего.Единственный раз, когда вам нужно будет проверить любую разметку, это если вы действительно назначаете outerHTML/innerHTML = some markup from the server.Если это так, просто выйдите из результатов на вашем сервере и запустите их через стандартные средства проверки HTML.

Answer 2

Если вы хотите проверить страницу, почему бы не получить к ней доступ, просмотреть исходный код, скопировать его и использовать проверку с помощью прямого ввода? Требуется на 3 клика больше, чем обычная проверка, но ... Другой способ - разместить его где-нибудь и проверить оттуда.

Answer 3

HTML-документы анализируются браузером в DOM-представление - сам код разметки не сохраняется.Когда вы создаете / изменяете элементы с помощью Javascript, они также создаются с помощью DOM (или разбираются на объекты DOM, если используется присваивание innerHTML / outerHTML).Так что на самом деле проверять нечего, так как ваша сгенерированная Javascript страница не сохраняется как разметка для начала.

Извлечение HTML через innerHTML / outerHTML заставляет браузер преобразовывать его, и браузеры все еще обычноделайте это с помощью синтаксиса HTML, а не строго синтаксиса XHTML (например, в отношении самозакрывающихся тегов).

Что касается решения проблемы рендеринга (или, возможно, какого-нибудь грязного / упущенного CSS, например), вы можете рассмотреть возможность использованиячто-то вроде Firebug или Chrome Developer Tools (или Firebug Lite для браузеров, отличных от Firefox и Chrome) - он позволяет вам проверять структуру и элементы документа, выбирать элементы и видеть, какие правила CSS к ним применяются, а также визуально проверять блочную модель.Это может помочь вам определить, где ваша проблема.

И на всякий случай, у вас есть действительное объявление DOCTYPE?Причудливый режим может делать странные вещи.