CODEWITHSUNDEEP
javascriptdebuggingfirefoxbookmarklet
Greck
Greck

Reputation: 590

Debugging bookmarklets in Firefox

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.

Upvotes: 10

Views: 2918

Answers (3)

forivall
forivall

Reputation: 9901

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".

Upvotes: 3

ejectamenta
ejectamenta

Reputation: 1087

copy & paste your bookmarklet code into the debugger console, press 'enter'

by "code" I mean

function(){ ... }();

any loaded javascript files will appear in the debugger tab, where you can set breakpoints, step through etc. when you paste (or up arrow in console) and press 'enter' a second time.

Upvotes: 0

webextensions.org
webextensions.org

Reputation: 739

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.

Upvotes: 4

Related Questions