Debugging JavaScript in Google Chrome

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

This blog is permanently closed.

For up-to-date information please follow to corresponding WebStorm blog or PhpStorm blog.

 
This entry was posted in Cool Feature, PhpStorm, WebStorm and tagged , , , . Bookmark the permalink.

22 Responses to Debugging JavaScript in Google Chrome

  1. Bryan Green says:

    Very nice!

  2. Mark says:

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

    • Tekool says:

      @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:

        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:

          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:

    Mark, somebody like chrome more than firefox.

  4. nicity says:

    2Mark Firebug debugging does not work in Chrome :)

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

  6. Alexey Gopachenko says:

    It’s already supported in 10.5 EAP.

  7. Mark says:

    But chrome has also a nice js debugger

  8. Mark says:

    But chrome has also a good js debugger

  9. 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. 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:

    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:

    > 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:

    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:

    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:

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

  16. michael says:

    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:

    oh n its deffentily a javascript problem for chrome alone

  18. michael says:

    n javascript linkin is enabled

  19. adrian says:

    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

Comments are closed.