Did you know? You can now use the integrated web browser in CSS HTML Validator to check the DOM of a webpage. Visit the Validate Using the Integrated Web Browser help topic for more information.

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.

   

3. TEST IT: 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 scroll to the top (if needed).
6. Choose the line near the top with the html element and then press Ctrl+C. Chrome should then copy the HTML source generated from the DOM to the clipboard.
7. 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).
8. Remember that you can also right-click on the web page, choose View page source, and copy the page source to the clipboard (like with Ctrl+A then Ctrl+C), but this source will likely be different than the source from the Elements page/tab.

Visit the Editor Options > Clipboard help topic for more information about the Clipboard options page.

Important

• 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.

Tips

• 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.