Page 1 of 1

How to validate the resulting HTML of an SPA?

Posted: Thu Apr 05, 2018 1:19 am
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.

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

Posted: Thu Apr 05, 2018 9:04 am
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.

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

Posted: Thu Apr 05, 2018 9:31 am
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.

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

Posted: Fri Apr 06, 2018 12:52 am
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!

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

Posted: Fri Apr 06, 2018 8:46 am
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.

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

Posted: Fri Apr 06, 2018 12:28 pm
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

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

Posted: Fri Apr 01, 2022 12:03 pm
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.

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

Posted: Wed Apr 06, 2022 12:31 am
by TomHTML
Thanks for that! It works like a charm...it's very helpful!