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
For up-to-date information please follow to corresponding WebStorm blog or PhpStorm blog.
Very nice!
i can’t understand the need to debug javascript inside th ide when you have a wonderful js debugger in firebug
@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.
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;
}
Thanks for sharing!
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)
Mark, somebody like chrome more than firefox.
2Mark Firebug debugging does not work in Chrome
Hey guys, will this also be supported in Idea Ultimate?
It’s already supported in 10.5 EAP.
But chrome has also a nice js debugger
But chrome has also a good js debugger
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
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?
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.
> 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
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.
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.
@chris
Remote JavaScript debugging is supported also. Use ‘JavaScript Debug’ -> ‘Remote’ run configuration for that.
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?
oh n its deffentily a javascript problem for chrome alone
n javascript linkin is enabled
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