How to validate the resulting HTML of an SPA?

For technical support and bug reports for all editions of CSS HTML Validator, including htmlval for Linux and Mac.
TomHTML
Rank III - Intermediate
Posts: 75
Joined: Sun Feb 04, 2018 10:19 am

How to validate the resulting HTML of an SPA?

Post by TomHTML »

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
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

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

Post by Albert Wiersch »

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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

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

Post by Albert Wiersch »

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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
TomHTML
Rank III - Intermediate
Posts: 75
Joined: Sun Feb 04, 2018 10:19 am

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

Post by TomHTML »

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
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

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

Post by Albert Wiersch »

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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

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

Post by Albert Wiersch »

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
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

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

Post by Albert Wiersch »

I know this is an older topic, but in the latest release of CSS HTML Validator (2022/v22), you can now check the resulting HTML from a live DOM using the integrated web browser. This is because 2022/v22 now uses the new Chromium-based Edge browsing engine instead of the old/obsolete Internet Explorer engine.

Please see the Validate Using the Integrated Web Browser help topic for more information about validating the HTML from the live DOM.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
TomHTML
Rank III - Intermediate
Posts: 75
Joined: Sun Feb 04, 2018 10:19 am

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

Post by TomHTML »

Thanks for that! It works like a charm...it's very helpful!