9

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.

Greck
  • 580
  • 6
  • 15

3 Answers3

4

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.

webextensions.org
  • 731
  • 6
  • 15
  • Thanks for proposal, it works! However, there is one minus in my case because I create tool to generate bookmarklets (from userscripts) so to debug them I have to show a content of bookmarklet, copy to a file and then I can debug. – Greck Mar 15 '13 at 19:11
  • Is it that you want to debug the bookmarklet in its original form, ie, debug the single line of code? I'm a bit confused by the last comment! What are the other things that you are looking for resolving your requirement? – webextensions.org Mar 16 '13 at 10:31
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".

forivall
  • 9,504
  • 2
  • 33
  • 58
0

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.

ejectamenta
  • 1,047
  • 17
  • 20