Проверка работоспособности DOM с помощью Google Chrome и CSS HTML Validator

  1. меры

На этой странице описан простой способ проверки действующей DOM с помощью CSS HTML Validator и веб-браузера Google Chrome .

CSS HTML Validator - это настольное приложение для Windows, которое обеспечивает проверку HTML, CSS, SEO, правописания, доступности, мобильности (Android / iOS), JavaScript и ссылок одним щелчком мыши.

Вы когда-нибудь хотели проверить HTML, сгенерированный из DOM после того, как JavaScript изменил исходный HTML-источник? Если это так, выполните следующие действия.

меры

  1. Первый, скачать и установить CSS HTML Validator для Windows (пробная версия будет работать) и Браузер Google Chrome для рабочего стола (новое окно) если вы еще этого не сделали Многие уже установили Chrome, поэтому вам может не потребоваться его установка.
  2. Запустите CSS HTML Validator, затем перейдите в Параметры редактора (Ctrl + F3) и выберите страницу параметров Буфера обмена . Включите опцию Смотреть буфер обмена для документов HTML. Вы также можете включить другие параметры, такие как автоматическая проверка документов из буфера обмена.

  3. ТЕСТИРОВАНИЕ (v17 +): если CSS HTML Validator запущен и опция просмотра буфера обмена отмечена, то CSS HTML Validator должен автоматически открыть новый документ со строкой «Success», когда вы копируете приведенную ниже строку в буфер обмена.

    <cseclip url = "http://test.domain.com"> Успех

  4. Запустите (откройте) Google Chrome и перейдите на веб-страницу с DOM, который вы хотите проверить, затем щелкните правой кнопкой мыши где-нибудь на странице и выберите «Проверить».
  5. Когда откроется окно Инструменты разработчика , перейдите на вкладку / страницу Элементы (если вы еще не там) и выберите строку с элементом html, а затем нажмите Ctrl + C. Затем Chrome должен скопировать исходный код HTML, сгенерированный из DOM, в буфер обмена.
  6. CSS HTML Validator должен автоматически видеть новый HTML в буфере обмена, открывать его (как новый документ) и затем проверять его (если вы также включили автоматическую проверку).

Важный

  • CSE HTML Validator v16 может не обнаружить текст буфера обмена как документ HTML, поскольку он может не содержать DOCTYPE. Эта проблема решена в v17 +, потому что он улучшил обнаружение HTML-документов и поддерживает новый тег cseclip.
  • Источник HTML, который копируется в буфер обмена, создается из текущего состояния DOM и не является исходным источником документа, который вы увидите при использовании параметра «Просмотр источника страницы». Из-за того, как это работает, скопированный источник может не включать DOCTYPE.

подсказки

  • На странице параметров буфера обмена в разделе « Параметры редактора» (Ctrl + F3) есть опция «Наблюдать за этими начальными тегами», которая позволяет указывать дополнительные теги, чтобы помочь CSS HTML Validator определять, когда источник HTML копируется в буфер обмена. Например, если вы хотите сконцентрировать свои проверки на элементах ol или table, вы можете добавить эти теги к этому параметру, а затем, вместо выбора html-тега в инструментах разработчика для копирования всего DOM, вы можете выбрать и скопировать только ol или элемент таблицы, чтобы скопировать только этот раздел / элемент DOM в буфер обмена, и CSS HTML Validator должен его распознать.
Вы когда-нибудь хотели проверить HTML, сгенерированный из DOM после того, как JavaScript изменил исходный HTML-источник?