I have a page where some JavaScript modifies a radio button to be not checked and another to be checked -- the HTML source contains the right checked attributes but when inspecting, the wrong one is checked. Also, when loading with JS off, the right one is checked. So I put a Chrome breakpoint on both for attribute modification and the breakpoints do not fire when reloading. I tried to set a breakpoint on a common parent div and it still doesn't fire.
Asked
Active
Viewed 1,337 times
2
-
Can you provide some code? – Adam Wolf Sep 21 '15 at 00:36
-
Code...? There's a ton of JS on this page, I didn't write it, not sure what are you asking for. I added a screenshot of the Chrome Inspector. – chx Sep 21 '15 at 00:37
-
1Once the page is rendered, `checked` is a *property* that may be changed via JS. You won't necessarily see that change reflected in the element's attributes – Phil Sep 21 '15 at 00:44
-
Then what should I break on? (I naively thought "checked" is an HTML attribute.) – chx Sep 21 '15 at 00:47
-
You could try the suggestions here ~ http://stackoverflow.com/a/11658693/283366 – Phil Sep 21 '15 at 00:47
1 Answers
2
Phil's comment is helpful but it needs just a little love. First, check the Async checkbox
in the Sources tab just next to the Call Stack. Otherwise you won't get a useful call stack. Then add this snippet:
<script>
var debugel = document.getElementById("edit-field-slideshow-media-type-und-images");
Object.observe(debugel, function(changes) {
console.log(changes);
debugger;
});
</script>
Between the console and the debugger you have a reasonable chance to figure out what happens.

chx
- 11,270
- 7
- 55
- 129
-
1Object.observe doesnt seem to exist anymore, console says it is not a function – robertjuh Apr 11 '19 at 09:58
-
Although not necessarily the easiest/quickest, when all else fails this works: https://github.com/paulirish/break-on-access. I used it to find when an `input` textbox value was getting changed. More info: https://stackoverflow.com/a/38646109. – Martin_W Mar 20 '20 at 19:06