How to debug Greasemonkey script with the Firebug extension?

I didn't find a way to debug Greasemonkey scripts with the Firebug extension.

Does anyone know how to do this ?

Thanks.

Updatier: The Mene+Shuman fix now is busted with Firefox 30 and Firebug 2. Firefox 31 may provide workarounds (will investigate). In the meantime, use the "General workaround strategies" listed below.

---

Update: This answer is now obsolete.

If you open about:config and
set extensions.firebug.filterSystemURLs to false
then you can use Firebug to debug the Greasemonkey script just like any other.

This works irregardless of the @grant mode.

See Mene's answer -- with an assist from Shuman.

---

---

Old answer:

Because Greasemonkey operates in a sandbox, Firebug cannot see it. There is no easy way around this.

General workaround strategies:

1. Test all parts of a GM script that don't use GM_ functions, in Firebug's JavaScript console first. Minimize use of GM_ functions and don't use GM_log() at all.

2. All of Firebug's console functions work great from within a GM script.

Note: this answer refers to old versions of Firefox. Firebug is no longer available, but lives on in the Developer Edition of Firefox.

---

Current Firefox and Firebug can now debug current Greasemonkey scripts just like any other javascript. Just find your *.user.js script in the dropdown menu. The console also works.

This works at least on Firefox 28.0 and Firebug 1.12.7; I haven't tried earlier versions.

Note: In order to get it to work, you probably have to set extensions.firebug.filterSystemURLs to false. See "Profiling Greasemonkey scripts" in the Firebug, bug tracker. (Thanks to Shuman)

var e = document.createElement("script");

e.src = 'http://www.xxxxxxxx.com/yyyyyyyy.js';
e.type="text/javascript";
document.getElementsByTagName("head")[0].appendChild(e);

you can add this to your xxx.user.js, and install it in greasemonkey.

Then, you can debug your js as you wish.

None of the other solutions here worked for me, but Jan Odvarko's answer on how to debug Firefox extensions worked perfectly for GreaseMonkey scripts as well:

> On Firefox 19 or later, it's possible to use the built-in JS debugger > on the browser itself. Go to about:config and set the following two > prefs: > > devtools.chrome.enabled: true > devtools.debugger.remote-enabled: true > > After you restart the browser, you can access the Browser Debugger > through Tools > Web Developer > Browser Toolbox. > > (note that you must accept the incoming connection) > > See more at: > https://developer.mozilla.org/en-US/docs/Mozilla/Debugging/Debugging_JavaScript#JavaScript_Debugger

Then just search for the name of your userscript and start debugging.

It can be done using native Firefox debugger as it was mentioned before. Below is the instruction for modern versions of Firefox.

Set the following preferences in about:config:

devtools.chrome.enabled: true
devtools.debugger.remote-enabled: true
devtools.debugger.prompt-connection: false

Open the global script debugger window via Tools → Web Developer → Browser Toolbox → Debugger (or Ctrl+Shift+Alt+I) .

Search for the name of your userscript and start debugging.

Note: ChromeBug no longer exists. The Developer Edition of Firefox is an alternative.

---

Chromebug can see sandboxed scripts, http://getfirebug.com/wiki/index.php/Chromebug_User_Guide, but I've not tried it on Greasemonkey.

-- This answer is obsolete, please use @Brock Adams solution above --

Load your main script externally, instead of running it via GM. So you're just using GM to inject the script.

This is a bit of a hybrid between @bigml and @Yuval's solution and it uses jquery. It also works in frames.

// ==UserScript==
// @name          My GM script
// @include 	The website I want this to run on
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js 
// ==/UserScript==
$(document).ready(function() {
			// fetch jquery dependent scripts using $.getScript()
});

Note: this answer refers to old versions of Firefox. Firebug is no longer available, but lives on in the Developer Edition of Firefox.

---

I've tried ChromeBug, it doesn't seem to work.

With FireBug I have had the starting point of success by adding "debugger" to my GM code. This causes a breakpoint and I can inspect variables on the stack, but the right file is not shown so I can't step or anything.

I have had the best success with FirebugMonkey (https:// addons.mozilla.org/en-US/firefox/addon/13623/), which I just got working to do basic debugging of GreaseMonkey scripts thanks to some explanation in a recent comment on the extension page by f0rsvinn. Here are the instructions I just posted at http://groups.google.com/group/greasemonkey-users/browse_thread/thread/994cfa58c79d222:

It never occurred to me that the way it works is by creating its own sandbox around the script rather than using Greasemonkey's, you actually have to turn GM off. There are some GM aspect things that will not work though because the script really isn't in GreaseMonkey. As an example, GM_getValue returns undefined.

Still, it works for basic debugging - and is way better than nothing.

Usage steps are as follows:

1. Install FireBug 1.5.4 (later versions do not seem to work)
2. Install FireBugMonkey
3. Use the Script Manager in FireBugMonkey to select the files you want to debug
4. Disable GreaseMonkey (scripts will run inside FireBugMonkey, not
5. GreaseMonkey)
6. Enable FireBugMonkey
7. Enable scripts in FireBug

The scripts you added in the ScriptManager should be visible in the FireBug scripts list.

Similar to @bigml's suggestion, you can run it unprivileged if you setup a local webserver (apache) to serve the userscript file, then in your userscript add something along the lines:

if (typeof GM_addStyle == "undefined") {
    loadScript("http://localhost/path/to/script.user.js");
}
else {
    runScript();
}

function loadScript(url) {
	 var script = document.createElement('script');
	 script.type = 'text/javascript';
	 script.src = url;
	 document.getElementsByTagName('head')[0].appendChild(res);
}

function runScript() {
     // ... whatever your userscript does ...
}

Of course you wouldn't be running in a privileged context. But this way you can easily continuously debug the script as any other script.

As the others have said, you can setup a simple HTTP server and serve it to your page using Greasemonkey like so:

function loadScript(url) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
}

WEBrick and Python -m SimpleHTTPServer are good for this. We can also expose the GM_... functions to the script by adding a custom event handler to the document within GreaseMonkey:

function gMHandler(e){
	GM_log(e.detail.message);
    e.detail.response = "Hi!"
}

document.addEventListener("gM", gMHandler, false);

and then in the served script, raising this event on an arbitrary DOM element will run the handler and modify the element's response parameter:

$(document).ready(function() {
    var event = new CustomEvent(
	    "gM", 
        {
		    detail: { message: "Hello World!" }
		    bubbles: true,
		    cancelable: true,
	    }
    );

    document.getElementById("AnyElement").dispatchEvent(event);
    alert("Response was: " + event.detail.response);
});