Problem:
I made a TamperScript at work (in Chrome) that gathers a list of elements from a webpage. The script is used by many people without errors. But on one person’s workstation it fails with the error:
Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '(list of selectors)' is not a valid selector.
(list of selectors) above is a long list of selectors; but the same list works fine, not just on my machine, but on every one else’s (on the exact same webpage).
The offending workstation is remote and I don’t have access to it; how can I debug this? starting with reproducing the error?
… and where could the error come from? Is it possible that another extension causes it?
Edit: selector list:
h1, h2, h3, p-inputswitch, p-multiselect, p-multiselect-items-wrapper, input, button, a[routerlink], a.alert-item, a.btn-primary, th, label:has(+select), div.switch-list-header, .filters-tags
Solution:
It turns out that the user had a very old version of Chrome, that for some reason didn’t update normally. It was the only case out of 60+ so nobody thought about verifying this.
Also, we found that the error wasn’t generated by Chrome directly but by an Angular polyfill (which instantiated itself for only that user, because they were using that old Chrome version).
Edit, I did code this to help with troubleshooting, if it can help someone (as per @CBroe comment)
<html>
<head><title>selector tester</title></head>
<body>
<textarea id="sels" style="width:40em; height:10em;">h1, h2, h3, p-inputswitch, p-multiselect!=1</textarea>
<br/>
<button id="tester" style="margin-top: 0.8em;">testit</button>
<script>
const $ = document.querySelector.bind(document);
const selectors = $("#sels").innerHTML.split(",").map(s => s.trim());
$("#tester").addEventListener("click", e => {
selectors.forEach(sel => console.log(sel, $(sel)));
});
</script>
</body>
</html>
