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.
How to validate the resulting HTML of an SPA?
- Albert Wiersch
- Site Admin
- Posts: 3785
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: How to validate the resulting HTML of an SPA?
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.
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
- Albert Wiersch
- Site Admin
- Posts: 3785
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: How to validate the resulting HTML of an SPA?
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.
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
Re: How to validate the resulting HTML of an SPA?
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!
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!
- Albert Wiersch
- Site Admin
- Posts: 3785
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: How to validate the resulting HTML of an SPA?
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
- Albert Wiersch
- Site Admin
- Posts: 3785
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: How to validate the resulting HTML of an SPA?
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
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
- Albert Wiersch
- Site Admin
- Posts: 3785
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: How to validate the resulting HTML of an SPA?
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.
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
Re: How to validate the resulting HTML of an SPA?
Thanks for that! It works like a charm...it's very helpful!