How to validate the resulting HTML of an SPA?

For technical support for all editions of CSS HTML Validator. Includes bug reports.
Post Reply
TomHTML
Rank II - Novice
Rank II - Novice
Posts: 24
Joined: Sun Feb 04, 2018 10:19 am

How to validate the resulting HTML of an SPA?

Post by TomHTML » Thu Apr 05, 2018 1:19 am

I have an SPA site whose JavaScript edits the HTML after it has been loaded into the browser. The browser display in the validator is accurate: it renders the page exactly as it would appear in Chrome, Firefox, etc. But the validator returns a report on the HTML as it would initially be received by the browser, not as it would be modified within milliseconds by the JavaScript.

Since the Validator already has the capacity to read and realize the JavaScript, the resulting modifications to the HTML/DOM are in the Validator, somewhere. Is there a control for having the editor to display the resulting DOM rather than the DOM as it was initially rendered from the received HTML?

Ideally, we'd need both: a retention of the current validation (of the received HTML), and a way to switch to validating the DOM as it has been altered by JavaScript after the window is loaded. Perhaps that is already possible in a control I haven't yet found, but if not, it would be very useful to have.

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3316
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: How to validate the resulting HTML of an SPA?

Post by Albert Wiersch » Thu Apr 05, 2018 9:04 am

Hello,

I used to recommend the Firefox Easy Copy Add-on for checking the current DOM but unfortunately it's not compatible with Firefox Quantum:
https://www.htmlvalidator.com/firefoxext.php

I'll see if I can take a look to see if there is a Firefox Quantum compatible extension that can do something similar. I'll post back if I find something.

UPDATE: I couldn't find anything for Firefox Quantum but see my next message about using Chrome.
Image
Albert Wiersch

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3316
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: How to validate the resulting HTML of an SPA?

Post by Albert Wiersch » Thu Apr 05, 2018 9:31 am

Please let me know how this works.

In CSS HTML Validator, go to Editor Options and the Clipboard page and enable the 'Watch the clipboard...' option. You might want to enable some of the other options as well, like the 'Auto validate...' option.



In Chrome, go to the page you want to check. Right-click somewhere on the page and choose 'Inspect'. When the Developer Tools window opens, go to the 'Elements' tab (if you're not there already) and choose the line with the html element and then press Ctrl+C. If it works right then the DOM should be copied to the clipboard and CSS HTML Validator should automatically see the HTML in the clipboard and open it and validate it (if you've also enabled auto validate).

I will make a note to look into getting the DOM from the integrated web browser used by CSS HTML Validator for a future update.
Image
Albert Wiersch

TomHTML
Rank II - Novice
Rank II - Novice
Posts: 24
Joined: Sun Feb 04, 2018 10:19 am

Re: How to validate the resulting HTML of an SPA?

Post by TomHTML » Fri Apr 06, 2018 12:52 am

Excellent! I followed your instructions, and I can copy the outer html of the main HTML element in the Chrome and Firefox developer's tools, and the Validator brings it in and validates it. Previously, I had been copying and pasting the code from the developer's tools; this eliminates the pasting & validation-button-push. Many thanks!

And yes, in a future version, if the Validator could grab the modified DOM from its own browser renderer, that would be ideal.

Thanks again!

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3316
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: How to validate the resulting HTML of an SPA?

Post by Albert Wiersch » Fri Apr 06, 2018 8:46 am

Great! I'm glad it is working well for you. I will work on getting this information/technique up on our website so more people can benefit from it.
Image
Albert Wiersch

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3316
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: How to validate the resulting HTML of an SPA?

Post by Albert Wiersch » Fri Apr 06, 2018 12:28 pm

UPDATE: I've added this new page to our website to provide information on checking a live DOM with the Google Chrome web browser. There's a tip at the bottom that may be helpful as well.

Please feel free to suggest any improvements! Thanks.

https://www.htmlvalidator.com/chrome.php
Image
Albert Wiersch

Post Reply