Firefox logo

This page describes an easy way to validate a live DOM using CSS HTML Validator and the Google Chrome web browser.

CSS HTML Validator is a desktop software application for Windows that provides one-click checking of HTML, CSS, SEO, spelling, accessibility, mobility (Android/iOS), JavaScript, and links.

Using Google Developer Tools to Validate the DOM

Have you ever wanted to validate the HTML generated from a DOM after JavaScript has altered the original HTML source? If so then follow these steps.

Steps

  1. First, download and install CSS HTML Validator for Windows (a trial version will work) and Google Chrome Browser for desktop (new window) if you haven't already. Many people already have Chrome installed so you may not need to install it.
  2. Run CSS HTML Validator and then go to the Editor Options (Ctrl+F3) and select the Clipboard options page. Enable the option to Watch the clipboard for HTML documents. You may also want to enable other options like the Auto validate documents from the clipboard option.

    Screenshot of the Clipboard options in the Editor Options dialog box

  3. TEST IT (v17+): If CSS HTML Validator is running and the option to watch the clipboard is checked, then CSS HTML Validator should automatically open a new document with the line "Success" when you copy the below line to the clipboard.

    <cseclip url="http://test.domain.com ">Success

  4. Run (open) Google Chrome and navigate to the web page with the DOM that you want to check then right-click somewhere on the page and choose Inspect.
  5. When the Developer Tools window opens, go to the Elements tab/page (if you're not there already) and choose the line with the html element and then press Ctrl+C. Chrome should then copy the HTML source generated from the DOM to the clipboard.
  6. CSS HTML Validator should automatically see the new HTML in the clipboard, open it (as a new document) and then validate it (if you've also enabled auto validate).

Important

Tips