Debugging JavaScript in Google Chrome

Posted on by

Both WebStorm 2.0 and PhpStorm 2.0 allow you to debug JavaScript code while running it in Mozilla Firefox (including Firefox 4).

In WebStorm 2.1 and PhpStorm 2.1, which are currently in early production access, you can also choose to debug JavaScript in Google Chrome.

Debugger for Chrome supports all features of JavaScript debugger for Firefox. You can set breakpoints, inspect local variables, evaluate expressions and more:

If you use Chrome for web browsing and want to debug in it simultaneously, you can configure WebStorm or PhpStorm to use a separate Chrome user profile in ‘IDE Settings | Web Browsers | Chrome‘:

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

Download WebStorm/PhpStorm EAP, try the new JS debugger and let us know what you think.

Develop with pleasure!
-JetBrains Web IDE Team

Comments below can no longer be edited.

22 Responses to Debugging JavaScript in Google Chrome

  1. Bryan Green says:

    April 27, 2011

    Very nice!

  2. Mark says:

    April 28, 2011

    i can’t understand the need to debug javascript inside th ide when you have a wonderful js debugger in firebug

    • Tekool says:

      December 28, 2011

      @mark You need a debugger in IDE when you work on projects with many files because each error reported by the debugger , each breakpoint is directly linked to the file. Only one click is needed to go from the report to the line in your code. It is simply mandatory when you work on large projects.

      For my part as I can’t have Chrome nor Firefox debugger console to work with WebStorm. I was only testing it and even if this is a great editor, I will not buy it until console logging works with it.

      • Tekool says:

        December 29, 2011

        I found what my problem was. I can now log onto the Firefox console (not the Chrome one this said and Chrome crash often trying to activate it).

        WebStorm console Proxy is only defined on window.top, not in contained window frames nor iframe. So when you have to log onto console from a frame you have to log to window.top.console, not directly console. To be honnest if JetBrains developers can do somethign for this it would be cool. I will try to log an issue for this if I finally buy the editor.

        For your knowledge. If like me you have to runtime detect that the console you are logging into is the webstorm one use this hook (Firefox only) :

        var webstorm/*Boolean*/ = false;
        try{ window.top.console.jbExtension = “someDummyValue” } catch(e)
        {
        webstorm = true;
        }

        • nnmatveev says:

          January 4, 2012

          Thanks for sharing!


          WebStorm console Proxy is only defined on window.top, not in contained window frames nor iframe. So when you have to log onto console from a frame you have to log to window.top.console, not directly console. To be honnest if JetBrains developers can do somethign for this it would be cool. I will try to log an issue for this if I finally buy the editor.

          Please submit an issue to project issue tracker (http://youtrack.jetbrains.net/issues/WI#newissue=yes) or welcome to our discussion forum (http://devnet.jetbrains.net/community/wi)

  3. OZ says:

    April 28, 2011

    Mark, somebody like chrome more than firefox.

  4. nicity says:

    April 28, 2011

    2Mark Firebug debugging does not work in Chrome 🙂

  5. Dragan Bajcic says:

    April 28, 2011

    Hey guys, will this also be supported in Idea Ultimate?

  6. Alexey Gopachenko says:

    April 28, 2011

    It’s already supported in 10.5 EAP.

  7. Mark says:

    April 28, 2011

    But chrome has also a nice js debugger

  8. Mark says:

    April 28, 2011

    But chrome has also a good js debugger

  9. Dragan Bajcic says:

    May 4, 2011

    Thanks Aleksey, so i guess node.js support is on its way too?

    sorry for all this questions, i can’t find roadmap for idea ultimate 10.x anywhere on the site 🙁

  10. Thom Bradford says:

    May 19, 2011

    2Mark… are you asking customers of an Integrated Development Environment why they’d prefer *not* to use an *Integrated* Development Environment? Yes, Firebug is good, so are the Safari and Chrome Debuggers. The point is to not have to switch back and forth between a *read only* debugger (as you see in most browsers) and your source code. There is value in not having to say “Oh, what line did that happen on? Let me go back to my editor, track that line down, change it, and then try it all over again”

    Or am I missing something here?

  11. Leo Burov says:

    May 25, 2011

    I couldn’t get it to work for me… Does it work only for html files? I was hoping to use it in my php/javascript projects.

  12. Alex says:

    May 27, 2011

    > You can set breakpoints, inspect local variables,
    > evaluate expressions and more:

    I’ve downloaded WS 2.1 and I can’t figure out how to evaluate expression in the WS debugger. I am sure I’m missing something obvious. Please help!

    Thanks,
    Alex

  13. Alex says:

    May 27, 2011

    I found the answer:

    http://www.jetbrains.com/webstorm/webhelp/evaluating-expressions.html

    Sorry for the silly question. It would be nice if this window was docked to the main debugging area much like the default chrome debugger does it.

  14. chris says:

    December 18, 2011

    Is it also possible to do remote debugging ? I tried to past in a html file from a url but that does not seem to work.

  15. nnmatveev says:

    December 23, 2011

    @chris
    Remote JavaScript debugging is supported also. Use ‘JavaScript Debug’ -> ‘Remote’ run configuration for that.

  16. michael says:

    February 8, 2012

    would this be good for the latest verson google chrome that has problems clickin a link to a game room n it popin up off pogo.com n simply help me get any of all links to click n actually open like firefox n ie is btw i uninstalled n reinstalled all versons of chrome in vista was workin fine for yrs of no pc viruese

    or shall i try another source?

  17. michael says:

    February 8, 2012

    oh n its deffentily a javascript problem for chrome alone

  18. michael says:

    February 8, 2012

    n javascript linkin is enabled

  19. adrian says:

    February 9, 2012

    I can’t manage to set up remote javascript debugging with Chrome for my Zend Framework MVC application hosted on a Zend Server installation on Windows 7. My js files are located in …/project/httpdocs/js and my project base URL is http://localhost/project/httpdocs/.

    I have managed to set up PHP Web Application debugging with path mapping (symlinks) and all, but for Javascript debugging I’m not sure how to set up path mapping (remote URLs for local files) in the debug configuration. When I run my Javascript debug configuration, the debugger actually stops in the included jQuery (jquery.min.js) and shows values and all, but the breakpoints in my own js files are ignored.

    I don’t find any good tutorials and http://wiki.jetbrains.net/intellij/Remote_JavaScript_debugging_with_WebStorm_and_PHPStorm doesn’t really help, either. Can someone help me out or point out relevant resources?

    Thanks, Adrian