javascript - Debugging bookmarklets in Firefox - Stack Overflow

admin管理员组

文章数量:1296459

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.

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.

• javascript
• debugging
• firefox
• bookmarklet

Share Improve this question Follow asked Mar 11, 2013 at 17:30 GreckGreck 59066 silver badges1616 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

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

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.

本文标签： javascriptDebugging bookmarklets in FirefoxStack Overflow