How do I find which JavaScript is changing an element’s style?

If you’re sure it’s being set on the inline style and not as a consequence of a stylesheet rule, you can detect changes using the non-standard Mozilla watch() method: document.body.style.watch(‘color’, function(name, v0, v1) { alert(name+’: ‘+v0+’->’+v1); }); document.body.style.color=”red”; You can put debugger; in the watcher function and look up the call stack in Firebug to … Read more

Suppress Firefox/Firebug SHA-1 warning

As stated in the Firebug discussion group, Firebug’s Console panel currently (Firebug 2.x) cannot filter single messages out. You can only filter by messages matching a specific text using the search field. There are enhancement requests like issue #4507 reported to add such a filter, though it is unlikely that this will get implemented in … Read more

Inspect an element to investigate jQuery event bindings

Using Firebug, FireQuery and this fiddle: Hitting Cmd+Shift+C (Inspect Element) and clicking on the button reveals this: Clicking on the events Object {click= } reveals this (after expanding some info) And clicking on the function() reveals this: Which should be the code you are looking for, right? As a note, Firebug can’t always find the … Read more

Does the “Set next statement” feature exist in Chrome’s Dev Tools or in Firebug?

While Chrome DevTools doesn’t have “Set Next Statement”, you can more explicitly define next statement by just editing the JavaScript while it’s paused at the breakpoint. I’ve made a short screencast for you to show Chrome DevTools Live Edit + Breakpoint Debugging. In essence: while at a breakpoint, live edit your script by clicking into … Read more