This page describes an easy way to validate a live DOM using CSS HTML Validator and the Google Chrome web browser.
Using Google Developer Tools to Validate the DOM
- 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.
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.
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
- 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.
- 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.
- 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).
- CSE HTML Validator v16 may not detect the clipboard text as an HTML document because it may not contain a DOCTYPE. This problem is resolved in v17+ because it has improved HTML document detection and supports the new cseclip tag.
- The HTML source that is copied to the clipboard is created from the current state of the DOM and is not the original document source that you would see using the View page source option. Because of how this works, the copied source may not include a DOCTYPE.
- In the Clipboard options page in the Editor Options (Ctrl+F3), there is a Watch for these start tags option that lets you specify additional tags to help CSS HTML Validator detect when HTML source is copied to the clipboard. For example, if you want to concentrate your validations on ol or table elements then you can add these tags to that option and then, instead of selecting the html tag in Developer Tools to copy the entire DOM, you can select and copy only an ol or table element to copy only that section/element of the DOM to the clipboard, and CSS HTML Validator should recognize it.