How can I beautify JavaScript and CSS in Firefox / Firebug?

There is now a plugin that intercepts JavaScript downloads and deminifies it at that point. Unfortunately, the way it hooks into Firefox means that it applies to all JavaScript downloads and just not specific ones and the JavaScript files have to be served with an appropriate MIME type. https://addons.mozilla.org/en-US/firefox/addon/247565/

Interacting with require.js modules from the Firebug/Chrome console?

Say we have module /app/scripts/methodsModule.js that returns a few methods: define({ someMethod: function() { // do stuff }, anotherMethod: function() { // do some more stuff } }); In our data-main file /app/scripts/main.js we have: require([‘methodsModule’], function(methods) { methods.someMethod() // call someMethod methods.anotherMethod() // call anotherMethod }) Once requireJS loads up our data-main, we can … Read more

console.log() doesn’t work anymore in Firebug since Firefox 51.0.1

As I mentioned in another answer, this happens because the Firefox internal APIs, which Firebug uses to output the data, have changed. When you open the Browser Console, you’ll see the following error: TypeError: ConsoleAPIListener is not a constructor console.js:149:38 Note that, as stated in a thread in the Firebug discussion group and on the … Read more

How to call a function inside $(document).ready

You are not calling a function like that, you just define the function. The correct approach is to define the function outside document.ready and call it inside: // We define the function function validate(){ console.log(‘validated!’); } $(document).ready(function(){ // we call the function validate(); }); Another option is to self invoke the function like that: $(document).ready(function(){ … Read more

Find attached / bound events of an element using Chrome Development Tools / Firebug / IE Developer Toolbar

To get the first attached handler on the first $(“#button1”) element $._data($(“#button1″).get(0),”events”).click[0].handler JSFiddle The long story that nobody wants to hear: I came here searching for a plugin. I was thrilled to see @schmidlop’s answer, but in jQuery that doesn’t actually give me the listener I’m looking for, it just shows the generic handler for … Read more

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