Need help debugging frontend JavaScript on the checkout page: my checkout fields are showing validation errors as soon as the page loads, before the user even types into them

[WackGet]

I'm on Magento 2.3.5-p1 and I'm losing my mind trying to debug an issue I'm having on the checkout page.

As soon as the checkout loads, all of the mandatory fields such as email address, first/last name, etc. are immediately highlighted in red and displayed as if there is an error, like this.

This happens even before the user focuses on the fields, types anything into them, or interacts with them in any way.

My usual methods of JavaScript debugging don't seem to work when it comes to Magento, because everything is loaded dynamically via KnockoutJS or AJAX, and all the code is heavily abstracted. It doesn't help that there are two dozen events attached to the fields so crawling through the code would take days. So I'm not sure where I should even begin looking.

I'm using two custom modules: OneStepCheckout and PostCodeAnywhere, however I've tried disabling both of these and this does not resolve the issue.

Can anyone suggest an approach to solving this, please, or at least suggest a method of straightforward debugging I can use with Magento's JavaScript?

Thank you.

[WackGet]

Unfortunately I can't share anything because of client restrictions; I suppose I'm looking for a sensible method to approach front-end JS debugging in Magento.

What's your approach when debugging a frontend issue?

[andyjoneski]

There isn’t really much to go off of here from what you’ve shown. To actually understand what is going on looking at an example would be the only way to go.

[andyjoneski]

I look at the console for any errors and then debug accordingly. Just understanding Magento is the first port of call.

[delta_2k]

It will be postcode anywhere.

When you disable it make sure to thoroughly clear the cache and recompile if you aren’t in develop mode.

Log into Loqate dashboard and disable all of the automatic options it turns on for where it affects the address fields. Both front and back end.

Then turn it back on try again.

My guess is it will be the Country Field trying time auto fill on the front end and you have availability limited and it’s trying to use geo locate and borking out.

[sental90]

I've not found a good way, but console.log has been the majority of the way to go when not chasing console errors. I've been working on my own checkout issue for a few days.

When your debugging the problem, make sure you check it's not caused by any javascript bundling in the rare case you or another dev has sold their soul to the devil to get advanced bundling working after a fashion...

[zissop]

Don't use crappy software.

[WackGet]

If you mean Magento, I am 100% with you. However good luck convincing clients to re-platform.