Debugging JavaScript in Mozilla Firefox

IntelliJ IDEA 9M1 supports debugging of JavaScript code in Mozilla Firefox. Just create a JavaScript Debug configuration, select Firefox from the Browser list and click OK:

IntelliJ IDEA automatically installs plugin for Mozilla Firefox and executes the configuration.
Note that you need to clear Make option under Before launch group before starting debugger to work around a bug that will be fixed in next Maia EAP.

This entry was posted in New Features and tagged , , , . Bookmark the permalink.

21 Responses to Debugging JavaScript in Mozilla Firefox

  1. Folks, could you please clarify whether only-JS breakpoints are honored, or mixed-type (e.g. JS inside a JSP) too?

  2. Martin Crowe says:

    Can you also kindly explain how remote JavaScript debugging is configured with an example? The “Remote URLS of local files” section in the dialog is quite confusing.

  3. Nikolay Chashnikov says:

    You cannot set breakpoints directly in JSP files because IDEA cannot automatically map such breakpoints to html files generated for JSPs. However after staring Remote JavaScript debug configuration you can select “Open Source in IDEA” from popup menu in Firefox and put breakpoints in html file which will be opened in IDEA.

  4. Markus says:

    Can I also debug js in jsp pages? The dialog just lets you pick .html files…

  5. I a run/debug configuration, as shown in the above screenshot, the plugin installed successfully, but every time I start the debugging from IntelliJ, all I see is “Waiting for a connection on port 7,814″. In the meantime Firefox started, but doesn’t seem to connect to IntelliJ.

    With netstat, I see IntelliJ is listening on port 7814. So it looks like the Firefox extension does not connect. What triggers the Firefox extension to connect to IntelliJ?

  6. Nikolay Chashnikov says:

    When you run a JavaScript debug configuration IDEA starts firefox.exe with a special command line parameter. Firefox Extension handles that parameter and connects to IDEA.
    Which version of Firefox are you using? Are there any errors in Firefox Error Console? Does it help if you close all Firefox windows before starting JavaScript debugger?

  7. Nikolay,

    Maybe the issue is that my instance of Firefox wasn’t started by IntelliJ. I always have Firefox running, so it would be inconvenient to have to quit it, just to have IntelliJ start it again when I want to debug something. I would make more sense for the plugin to provide a way for me to connect to IntelliJ when I want to debug something. Does this make sense?

  8. Tom Litton says:

    When i click on “Open Source in IDEA” i get our login page instead of the page i’m trying to debug. Does it not pass in the session cookies of the browser?

  9. Kevin Monahan says:

    I use OSX (10.6.1) and cannot select my Firefox executable. The selection dialog appears when I first try to run the “debug local javascript” configuration. In OS X applications are actually folders. When I navigate to my Firefox.app in the “Select Firefox Executable” dialog the “OK” button is disabled. I tried creating an alias, which is selectable in this dialog. But, after IDEA tries to install the plugin I get this error: “Error running : Cannot start Firefox: : cannot execute” + “OK”.

    Perhaps debugging JavaScript is only available on Windows/Linux?

    Maia-IU-90.137 (also seen in 122).

    Kevin

  10. Kevin Monahan says:

    I’ve tried all the workarounds I can think of plus some that have been suggested but I still can’t seem to get IDEA (Idea IU-90.193) to find Firefox. I can continue using Firebug, which is a great plugin, but I’d like to see what IDEA has to offer in this area.

    Thanks,
    Kevin

  11. Bubble says:

    Tried everything, the JS debugger never breaks in a breakpoint. IntelliJ (IU-93.13, Dec 8 build) launches the URL in FireFox correctly. I can see the plugin from JetBrains is installed as expected. Yet no breakpoints work.

    My initial remote URL is a JSP page that loads JS files. Breakpoints were all in JS files.
    Firebug works as expected.

  12. kibbylop says:

    I installed IntelliJ hoping (desperately) to debug FireFox, but have found no path to the dialog you so optimistically display. I relearn from this experience that I must consider any statement being “Just ….” suspect before meriting my attention or effort. But given Firefox’s current state, I _am_ desperate.

  13. kibbylop, have you tried the Run menu? :) I think Edit Configurations will help you with that.

  14. Ahmet Recep Navruz says:

    I was having the same situation with Bubble on Idea 9.0. Debugger was never braking in a breakpoint.

    I have Firefox 3.5 and Firebug installed…

    My Solution: When i active the firebug (firebug icon shown in yellow) idea debugger started to break at all breakpoints :)

  15. Andrew says:

    Plugin for debugging not compatible with Mozilla Firefox 3.6.3 :(

  16. Nikolay Chashnikov says:

    Andrew,
    support for Firefox 3.6 will appear in IDEA 9.0.2 which will be released soon. You can download IDEA 9.0.2 EAP build from http://confluence.jetbrains.net/display/IDEADEV/Maia+EAP.

  17. Joey Novak says:

    Allow a funning firefox to connect to idea pls…

    It sucks having to restart firefox all the time.

  18. Nikolay Chashnikov says:

    Joey,
    when you start JavaScript debug configuration from IDEA it should open a new tab if Firefox is already running. Also make sure that you’re using the latest IDEA version (10.0.2), it contains many fixes for JavaScript debugger.

  19. Jonathan Neufeld says:

    FireFox 6.0 doesn’t support this extension (v0.4.5), is their an upgrade?

  20. Nikolay Chashnikov says:

    Jonathan,
    the updated version of this extension compatible with Firefox 6.0 is bundled with IDEA 10.5.1 and later versions.

  21. waltmann says:

    Debugging All I get is a blank Firefox page.
    The URL window is empty.
    IntelliJ 11 with Firefox 9.0.1

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>