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.

Comments below can no longer be edited.

18 Responses to IntelliJ IDEA: Debugging JavaScript in Google Chrome

  1. Avatar

    Alexander Chuprin says:

    March 28, 2011

    Hi. Is there support for Safari on Mac OS?

  2. Avatar

    powerpuffgirl says:

    March 28, 2011

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

  3. Avatar

    Nikolay Chashnikov says:

    March 28, 2011

    no, we don’t have support for Safari.

    yes, this feature will be available in WebStorm 2.1.

    • Avatar

      Marshall says:

      February 23, 2015

      Would be really great if you guys supported Safari.

  4. Avatar

    Geoffrey Donaldson says:

    April 13, 2011

    Do we need to enable something on the chrome side? When I run debug, I just get ‘connecting to’

  5. Avatar

    Nikolay Chashnikov says:

    April 15, 2011

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

    Geoffrey Donaldson says:

    April 18, 2011


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

    Nikolay Chashnikov says:

    April 19, 2011

    which version of OS X do you have?

  8. Avatar

    Eric Rich says:

    May 24, 2011

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

    Nikolay Chashnikov says:

    May 25, 2011

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

  10. Avatar

    Marco says:

    November 16, 2011

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

    Nikolay Chashnikov says:

    November 17, 2011

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

    Konstantin Azarov says:

    February 13, 2012

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

    Konstantin Azarov says:

    February 13, 2012

    Never mind, I see this is already fixed in 11.0.2

  14. Avatar

    Nick says:

    April 16, 2012

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

    Nikolay Chashnikov says:

    April 19, 2012

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

    Mark says:

    May 24, 2012

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

    Aleksey says:

    February 6, 2013

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

Discover more