Guide to getting JavaScript debugging working for Chrome in WebStorm 2.1
OS: OSX 10.6.6.7
WebStorm: 2.1
I've tried everything I can think of and can just not get this working.
I've tried with and without a custom profile directory, turning the remote debugging port on and off, it's just not clear what steps I have to do get it to work.
Cheers,
Ryan
Please sign in to leave a comment.
Could you please try the following steps:
1) Create a simple html file with JavaScript code
2) Put a breakpoint inside JavaScript
3) From popup menu on the editor select 'Create ...' item to create JavaScript debug configuration.
4) Select 'Chrome' in 'Browser' chooser, click 'Apply'
5) Press 'Debug' button
After that WebStorm should open Chrome browser and stop on the breakpoint.
Nikolay,
I hope you can give me some additional insights...
Obviously the config for Firefox is okay but the Chrome choice this config is inadequate.
The only file/directory => remote URL mapping I have is at the topmost '.../html' to 'http://example.com' as I am working in a PHP-based Drupal CMS environment where URLs and specific file mappings have no meaning.
I suspect that this is some minor 'gotcha' item that I am overlooking, but I don't see it at the moment.
Any insights or recommended 'try this' suggestions will be greatly appreciated.
--DropaBalm Jambo--
Another thing to note... In terms of my current configuration, I see that there is an actual JetBrains Firefox Extension (v. 0.4.6) when viewing Firefox Add-ons. However, I see no JetBrains extension in my Chrome extensions.
Could this be an issue? An extension that did not auto-install as it was supposed to do? Or does your Chrome Javascript communication not rely on an explicit extension?
--DropaBalm Jambo--
JavaScript debugger in Chrome is implemeted using the chrome dev tools api so there is no JetBrains extension for Chrome.
Could you please replace <WebStorm_home>/bin/log.xml file by the attached one, reproduce the problem and post here idea.log file (use Help | 'Reveal log' action to open the directory containing the log file)?
Attachment(s):
log.xml
Hi Nikolay!
Thank you for your help. I did as you asked and am beginning to see why/how this is an issue for me. Rather than attach the whole newly generated log file, here is the essential part:
2011-07-08 12:16:50,992 [ 307359] DEBUG - pl.ChromeConnectionManagerImpl - Creating new connection to Chrome
2011-07-08 12:17:01,021 [ 317388] DEBUG - tion.impl.ChromeConnectionImpl - New connection to 127.0.0.1:7930 initialized
2011-07-08 12:17:01,046 [ 317413] DEBUG - t.debugger.impl.JSDebugProcess - FileFinder: RemoteDebuggingFileFinder:
http://demo.dropabalm.com->file://X:/XXXX/Documents/htdocs/dropabalm/html
2011-07-08 12:17:01,300 [ 317667] DEBUG - tion.impl.ChromeConnectionImpl - Waiting for 127.0.0.1:7930
2011-07-08 12:17:01,805 [ 318172] DEBUG - tion.impl.ChromeConnectionImpl - Socket 127.0.0.1:7930 is available
2011-07-08 12:17:01,806 [ 318173] DEBUG - pl.ChromeConnectionManagerImpl - Trying to connect to 7930
2011-07-08 12:17:01,902 [ 318269] DEBUG - tion.impl.ChromeConnectionImpl - Tab found
2011-07-08 12:17:01,902 [ 318269] DEBUG - tion.impl.ChromeConnectionImpl - attaching to tab
2011-07-08 12:17:04,904 [ 321271] DEBUG - tion.impl.ChromeConnectionImpl - attaching timed out
2011-07-08 12:17:04,904 [ 321271] DEBUG - .ChromeConnectionLoggerFactory - Closing 1 connections using ConnectionCloser
2011-07-08 12:17:04,939 [ 321306] DEBUG - tion.impl.ChromeConnectionImpl - Cannot attach: org.chromium.sdk.internal.tools.v8.V8Helper$CallbackException: java.lang.Exception: Failure: Detach
2011-07-08 12:17:05,440 [ 321807] DEBUG - tion.impl.ChromeConnectionImpl - Reconnecting
2011-07-08 12:17:05,440 [ 321807] DEBUG - tion.impl.ChromeConnectionImpl - Waiting for 127.0.0.1:7930
The remaining file entries consist of PhpStorm attempting to attach via the 127.0.0.1:7930 connection. When I eventually manually broken the connection attempt, it did this same thing over 30 times.
Now here is what appears to me to be at issue. Although I run a local development configuration which is WAMP-based, I do not run all my development sites through the default 127.0.0.1 'loopback' IP address. In my Apache virtual host configuration I use named virtual hosts. In order to run multiple development sites with SSL certificates, for example, to develop and test eCommerce and other secure situations, you need to use named virtual hosts.
I this case the subdomain URL, demo.dropabalm.com, is conveniently redirected from its actual public server's IP to my locally-served IP. I have a batch file that simply modifies my local hosts file to provide DNS resolution of this subdomain URL to, in this case, 192.168.1.129. (This IP is actually a 'multi-site' Drupal platform from which the 'demo' subdomain is served.
So, while I have configured my JavaScript Debugger connection in PhpStorm with a 'remote' set-up, it would seem that the implemention of the connection is assuming a local, 127.0.0.1, IP. I believe that this would work as expected if PhpStorm were to reference DNS to find that demo.dropabalm.com was, in fact, running at 192.168.1.129 -- or even more simply to use demo.dropabalm.com:7930 for the connection attempt rather than the numerical IP.
Perhaps there is a configuration tweak that you can suggest that will make this work as the system now is. If not, I would assume that this information will be helpful to you to figure out how to get your great product working in situations such as mine.
Thank you again for your help. I look forward to your next recommendation of what to do or try.
--DropaBalm Jambo--
Actually WebStorm uses 127.0.0.1:7930 address to connect to the Chrome process and not to your app. So the problem isn't related to URL of your server and DNS resolution.
According to the log WebStorm successfully connected to the Chrome process but the first attemp to attach debugger to it was failed. Could you please provide the next lines of the log?
Hi Nikolay,
Nuts, I was hoping it would be something obvious that jumps right out at us.
I did a fresh log, started PhpStorm and Chrome, then initiated the JS Debug connection. Got the 'Waiting for PhpStorm...' message in a new Chrome page/tab which was pointing in the address bar to a file-based URL in the temp directory, and just started waiting. Eventually when nothing happened, I broke the connection in PhpStorm and have attached the full log here (as there may be clues to what is going on in the prior lines as well as the JS Debug connection entries, etc).
Thanks again for working with me on this. I would sure value being able to do PhpStorm JS debugging using Chrome. But at least I have the Firefox option.
--DropaBalm Jambo--
Attachment(s):
jsChromeDebugIssue_idea.log.zip
Which version of Chrome do you use?
Hi Nikolay,
Currently, I am running 14.0.814.0 dev-m (the dev channel) as its support for the Developer Tools feature is the best and first to get better, especially for support of JQuery, etc.
--DropaBalm Jambo--
Could you please try to close all Chrome instances before starting the debugger?
Also please go to Settings | Web Browser | Chrome, press 'Settings...' button and select the both options 'Use custom profile directory' and 'Enable remote debug on port'.
Nikolay,
We have progress! I tried every combination of things you suggested. As it turns out, the SINGLE FACTOR determining whether a JavaScript debugging session will start for me is whether or not Chrome is running BEFORE initiating the connection.
It does not matter whether I am running on the standard or alternate profile (via the Settings>>Web-browsers>>Settings dialog. It does not matter whether the remote debugging port is enabled or not. The ONLY thing that keeps a connection from succeeding is if Chrome is running before the connection.
Oddly, too, (and I was hoping this would not be the case as it would be a better work-around), if Chrome is running on its standard profile and WebStorm is configured to use its own profile, the connection will fail.
In all my previous tests I had never complete closed Chrome before starting a connection as this is not required in Firefox and, as you might expect, I simply rarely do not have Chrome running whenever I am at my computer whether working or not.
Once a connection succeeds, as expected, I can disconnect and reconnect at will -- each new connection opens a new tab in the connected Chrome instance.
So, where I am at the moment -- until/unless you folks figure this out and tweak it in an upcoming point release -- I simply now know to close all instances of Chrome before initiating my first JavaScript debugging connection. Then, until I am done and as long as this connect-able Chrome instance is running, I can do JS debugging on demand.
Let me know if additional tests or information is needed... or if there is an upcoming patch to test, etc.
Hope this information exchange has been helpful...
Thank you for working through this with me,
--DropaBalm Jambo--