I'm trying to debug some controller code in an Angular application in WebStorm using Google Chrome.

My Debug Settings :

When running theses Debug settings :

1) Chorme flickers in the Taskbar as if it is trying to connect.

2) I don't see the Debugging Tab (Indication) usually shown at the top of the page (like a brownish header)

3) In WebStorm's Debugger window i get the following message

 "cannot connect , ensure that Web Inspector is closed "

Additionally I was able to debug my code using Chrome development tools.

Any idea what is interfering the Webstorm's Debugger from connecting to Chrome ?

I'm trying to debug some controller code in an Angular application in WebStorm using Google Chrome.

My Debug Settings :

When running theses Debug settings :

1) Chorme flickers in the Taskbar as if it is trying to connect.

2) I don't see the Debugging Tab (Indication) usually shown at the top of the page (like a brownish header)

3) In WebStorm's Debugger window i get the following message

 "cannot connect , ensure that Web Inspector is closed "

Additionally I was able to debug my code using Chrome development tools.

Any idea what is interfering the Webstorm's Debugger from connecting to Chrome ?

• javascript
• angularjs
• google-chrome
• debugging
• webstorm

• WebStorm and Chrome versions? – LazyOne Commented Oct 11, 2014 at 19:02
• Webstorm 7 . I'm not sure the exact version of chrome . but i installed it not long ago on Windows 7 64 bit – eran otzap Commented Oct 11, 2014 at 19:11
• In Chrome -- Menu (burger icon) | About Google Chrome ? – LazyOne Commented Oct 11, 2014 at 19:16
• In any case: Chrome has recently (v37) updated their protocols .. which made WebStorm v8 inpatible (and you are using even older version). So either try v9 EAP build or downgrade Chrome to v36 (e.g. install it separately, disable auto-updates and use it for development only). v9 EAP -- see blog.jetbrains./webstorm/2014/10/… – LazyOne Commented Oct 11, 2014 at 19:18
• Ok thanks , i just started using Firefox instead . – eran otzap Commented Oct 11, 2014 at 19:28

3 Answers 3

Have you installed "JetBrains IDE Support" extension for chrome? if your web server is running in localhost:63342, try:

1. Setting the URL parameter to http:// localhost:63342
2. Bind your index.html file to http:// localhost:63342/index.html

If you have any question, please have a look to this post which describes how to debug Angular with Intellij, step by step: http://ignaciosuay./how-to-debug-angularjs-with-intellij/

I encounter the same problem as you,but I have find the solution.You just lack a simple but important step,which is Overriding the default CORS settings.You can follow:

1. Right-click the JetBrains Chrome extension icon and choose Options on the context menu. A web page with Chrome extension options opens showing the parameters to connect to WebStorm.
2. Change the port which you can find in your WebStorm.Then,you can debug your AngularJS app in the Chrome.

You also can see https://www.jetbrains./webstorm/help/using-jetbrains-chrome-extension.html

first check Jetbrains IDE Support install on your chrome then right click on icon go to option check port, I use routing in my angular application for this reason in URL of webstorm javascript debug not selected the specific html file just for example (http://localhost:63342/sampleproject/) write on urlbox then breakpoint in controllers worked . this solution worked for me