Debugging bookmarklets in Firefox

Question

I would like to debug bookmarklets. How can I do this? Preferably in Firefox.

Bookmarklets has only one line of code so direct debugging them is impracticable.

If I create "script" tag with code which I send from bookmarklet, code from this "script" tag isn't listed on Firebug scripts... (this code run properly, only can't debugging)

Alternatively, If there is a possibility to debug code typed in a console, it will be OK too.

Answer 1

Make a bookmarklet like this:

javascript:document.body.appendChild(document.createElement('script')).setAttribute('src','http://localhost/test.js');void(0);

It would automatically appear in Firebug, as simple as that. (Assuming you have recent versions of Firefox and Firebug)

Use you development version of code in the test.js file and use debugger; or insert the breakpoints manually.

Extra note: If you face problems like your code works in development mode (by including file as mentioned above) but does not work when it is converted to a single line bookmarklet, then there must be a problem in the conversion/encoding you did to make it single line.

Answer 2

Paste your bookmarklet into the developer console, but before you execute it, add a debugger; statement on the first line. The bookmarklet will appear in the debugger under a tab called "SOURCE".