IntelliJ IDEA: Debugging JavaScript in Google Chrome

IntelliJ IDEA 10 allows you to debug JavaScript code running it in Mozilla Firefox. In IntelliJ IDEA 10.5 can choose to debug JavaScript in Google Chrome as well.

Debugger for Chrome supports all features of JavaScript debugger for Firefox, you can set breakpoints, inspect local variables, evaluate expressions and so on:

If you use Chrome for web browsing and want to debug in it simultaneously you can configure IntelliJ IDEA to use a separate Chrome user profile in ‘IDE Settings | Browser | Chrome‘:

To configure the default debugging browser just edit the ‘JavaScript Debug’ configuration under ‘Defaults’ section.

Download IntelliJ IDEA 10.5 EAP, try the new JS debugger and let us know what you think.

Off-topic: debugging JS in FireFox 4 is supported since IntelliJ IDEA 10.0.3.

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

17 Responses to IntelliJ IDEA: Debugging JavaScript in Google Chrome

  1. Alexander Chuprin says:

    Hi. Is there support for Safari on Mac OS?

  2. powerpuffgirl says:

    Will this feature come to WebStorm/PhpStorm 2.x also?

  3. Nikolay Chashnikov says:

    Alexander,
    no, we don’t have support for Safari.

    Powerpuffgirl,
    yes, this feature will be available in WebStorm 2.1.

  4. Do we need to enable something on the chrome side? When I run debug, I just get ‘connecting to 127.0.0.1:7930′

  5. Nikolay Chashnikov says:

    Geoffrey,
    no, you don’t. IDEA starts Chrome with a special command line argument to enable debugging. Does it help if you close Chrome before starting the debugger?

  6. Nikolay,

    Once I discovered what I actually need to put into the ‘Path’ field for chrome:
    ‘/Applications/Google Chrome.app’ on OS X (this was not made clear at all).
    I now have it opening a new tab in my existing window, which of course won’t work, as my default instance doesn’t have remote debugging. It should be opening a new instance with a custom profile.

    I have to run this command myself to get it to work:
    /Applications/Google Chrome.app/Contents/MacOS/Google Chrome –remote-shell-port=7930 –user-data-dir=”/Users/user/Library/Preferences/WebIDE10/chrome-user-data”
    Which opens up a new instance, which then webstorm connects to, but I still have to also manually goto the web address that I want to debug.

  7. Nikolay Chashnikov says:

    Geoffrey,
    which version of OS X do you have?

  8. Eric Rich says:

    Is this feature only supported for local files and not files served remotely?

    I have to specify a local HTML file as it complains if I use a URL. Also, it’d be nice if we could map URLs -> project filesystem so that we could stept through and edit the local files instead of the files served from the URL. If the Chrome debugging was enhanced to support remote debugging in this fashion, then it would be a real winner for me. Otherwise, it’s not too useful for a Java web developer.

  9. Nikolay Chashnikov says:

    Eric,
    just select ‘Remote’ kind of JavaScript Debug configuration and you’ll get exactly that do you want.

  10. Marco says:

    While debugging javascript with WebStorm using Chrome (under OSX) if I turn the developer tools on in Chrome the WebStorm debugger exits. Is there a way to avoid that ?

  11. Nikolay Chashnikov says:

    Marco,
    I think currently there is no way to avoid it. Looks like WebStorm and the Developer Tools uses the same API of Chrome and it cannot be used from two processes simultaneously.

  12. Konstantin Azarov says:

    Looks like new Chrome has renamed the flag from –remote-shell-port to –remote-debugging-port, and now the plugin doesn’t work. Is there a way to fix for work around that (apart from using older version of Chrome)?

  13. Konstantin Azarov says:

    Never mind, I see this is already fixed in 11.0.2

  14. Nick says:

    Its not obvious to me how to debug anything in Chrome.
    In Firebug, I right click on a page, and select debug in Idea, and stuff seems to work.

    Not a clue how to do this in Chrome with 11.x

  15. Nikolay Chashnikov says:

    Nick,
    there is indeed no way to start the JavaScript debugger from Chrome. You need to open a html file in IDEA and select ‘Debug’ from the popup menu (or create a JavaScript debug configuration in Run | Edit Configurations dialog and start it).

  16. Mark says:

    Yeah, this makes no sense. It is starting up Chrome automatically for me, and I see a Tomcat 7 JavaScript debugger window in IDEA.

    In Chrome is says “Waiting for connection from IntelliJ IDEA…” and never changes
    In IDEA 11.1 it says “Not connected to Chrome”

    I have a Tomcat 7 configuration and I start it up in debug mode, in the debug configuration, I have clicked start browser and in javascript debugger mode. Run Tomcat 7 in debug mode and I can debug my Java code, but get the above problems for JavaScript.

    Have no idea why it doesn’t work, just like debugging Java in Tomcat is really easy to setup and it just works.

  17. Aleksey says:

    As I get I cannot in RubyMine work with JSDebug generally just starting my application ?
    And falling into break points?

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>