Can't seem to get Javascript debugger working reliably.

If I should say anything that could be interpreted as being critical of PhpStorm, I pre-repudiate it now. I don't know enough about how it works yet to be issuing any sorts of opinions.

I'm having an unusual and surprising amount of difficulty getting JavaScript debugging to work correctly. I've had it working a few times, and then it quits. I don't know why it started working nor do I know why it quit working.

. Windows 7, 64-bit
. Trying to debug in Chrome
. The JB IDE extension is installed in Chrome and showing the "JB" little signature in the upper right.
. Version 6.0.3 of PhpStorm as an evaluation.
. Project created with "Web server is installed locally, source files are located under its document root".

The specifications for my local WAMP server on my development machine is:

Server Specifications
Apache 2.4.4 VC10 - OpenSSl 0.9.8y
MySQL 5.5.30-community
PHP 5.4.13
phpMyAdmin 3.5.7
eAccelerator 1.0-git42067ac7e2
APC 3.1.14
Zend Optimizer Plus 7.0.0-beta
Xdebug 2.2.1
     
UniController
OpenSSL 1.0.1c
Go-Pear 1.1.6
msmtp 1.4.30 - Mail client for PHP
Cron - Scheduler
DtDNS - IP address updater
db_backup - Database back-up
ActivePerl via Installer

There's just one file I'm trying to debug, an HTML file, and it simply has more or less the same code as in the video covering JavaScript debugging:

<!DOCTYPE html>
<html>
<head>
    <title>Test page</title>
</head>
<body>
<script>
    var names = ['Mary', 'John', 'Dino'];
    for (var i =0; i < names.length; i++)
        {
        var name = names[i];
        var stringToLog = 'Hello, ' + name;
        console.log(stringToLog);
        }
    alert ("all done");
</script>
</body>
</html>

I'm just trying to put a breakpoint (to make sure JavaScript debugging is working correctly) on the line that reads "var stringToLog = 'Hello, ' + name;", but I can't get it working. I checked the debug configuration for the file and it seems very straightforward. Hitting the debug icon does start the file in the browser, even bringing up the browser if it's not already started. Chrome claims, up near the title bar of the browser: ""JetBrains IDE Support" is debugging this tab." and there is the "JB" logo in the upper right of the browser. The program just blows right through the 3 console messages and goes to the "all done" alert, sweeping right past any breakpoints set in the gutter as if they aren't there.

PhpStorm is clearly starting the webpage and the output in this test html file IS going to the console window, and there aren't that many settings in the debug configuration screen to get wrong.

I do kind of worry about the fact that the video on JavaScript debugging simply said that the proper plug-in is installed automatically into Chrome by PhpStorm, and yet I had to install it by hand. Before I installed it by hand I was getting the "waiting for connection from JetBrain IDE support extension for Chrome" message from PhpStorm.

I do sometimes still get the message in the lower left of the screen that reads "Waiting for connection from JetBrains IDE Support extension for Chrome. Please ensure you have installed the extension or see help." And then nothing at all seems to happen, including just running through my code without stopping. And at other times it just blows through my code and doesn't hit any breakpoints.

I have no idea what's going on. This doesn't look like it should be that difficult.

Any ideas? Insights?

7 comments

Hello!

it works fine for me using your code and PHPStorm 6.0.3 - see the attached screenshot
What does your run configuration look like? Are you running your application on Apache server?
Please check the sample project attached to the message - does debugging work for you using it?



Attachment(s):
test1.png
jsdebugtest1.zip
0

I use Apache 2.4.4 VC10, as the config info on the first post describes.

The little project zip file works perfectly as far as I can tell.

I have attached a JPG showing MY debug configuration. It's the same as yours (logically) except in the "Remote URL" column where you have a path set to the root url of the project on the server.

1. How did you create this project? As "Web server is installed locally, source files are located under its document root" as I did, or something different?
2. How did you set this column? I can't find a way to set it. I checked the help page (http://www.jetbrains.com/phpstorm/webhelp/run-debug-configuration-javascript-debug.html) but didn't see how to set it; it just says WHAT to set it to, not HOW.
3. Did you create this as local or remote?

Thanks for your help. Your zip file is giving me my first useful clues.

Best regards.

Steve



Attachment(s):
angular.jpg
0

>It's the same as yours (logically) except in the "Remote URL" column  where you have a path set to the root url of the project on the server.

and that's the problem:) Debugger can't match your local sources with the web path on server, thus breakpoints don't work

1. I just created a new project just in web server doc root. But this doesn't actually matter - your way works as well
2. just open you run configuration, select a line with your project root folder and double-click in its right part - the fileld will become editable, and you'll be able to type your url there - http://localhost/Angular1
3. Remote. You need using Javascript remote debug configuration to debug applications served by web servers. Local configurations are for pages opened locally, using file:// protocol

0

Elena:

Well, I GUESS the problem is solved. At least as far as I can tell, inasmuch as debugging is now working.

In the help file, the text referred to "File/Directory" column as being a read-only field and the "Remote URL" as being a "text box", though there is ABSOLUTELY NOTHING to indicate it's editable on the screen, completely UNLIKE "URL to open" and "Name", which are clearly edit boxes.

So I blindly clicked in the blank area and, lo and behold, there is an easter-egg text box there. Setting it to the directory of the project on the localhost server started the breakpoints working. I have NO IDEA why that would make a difference.

While I'm deeply gratified and very relieved that debugging is working now, at least so far, this kinda seems a little diabolical to me. Had you not sent me your nearly structurally identical but WORKING project, I could have spent YEARS trying to figure this out.

1. Why have the text field in the Remote URL appear hidden/invisible, completely unlike the other text fields on the same page? At least put a little shadow box there or SOMETHING.
2. Why does the "Remote URL" field need to be there at all? One more or less describes this path when creating the project; why not fill it in FOR US, at least as a default?
3. PhpStorm has enough info to draw a conclusion about what this value should be from the "URL to open" field; why not pull this value from THAT, at least as a default?

Once a person KNOWS that this field is editable and what value to put in it, setting it is no big deal. But there are no error messages, labels, instructions or even the slightest hint of what is going wrong. For the newbie, it just doesn't work and no hint as to why.

Even what info there is in the help file is cryptic:

  • Remote URL - in this text box, type the corresponding absolute URL address.


Absolute URL address of WHAT? The project dir URL or the URL of the file being debugged? It probably ISN'T the URL of the file to debug because THAT'S already in "URL to open". But why does it need the URL of the directory of the file being debugged then since it already HAS that as part of the "URL to open"?

Very confusing to a newbie.

At this point I'm assuming there are reasons for these oddities that I just don't understand at the moment but that will become clear in time.

Thanks for taking the time to give me your working zipped example. I'd still be thrashing if you hadn't done that.

0

Elena:

>>3. Remote. You need using Javascript remote debug configuration to debug applications served by web servers. Local configurations are for pages opened locally, using file:// protocol<<

This may be the crux of my failure to comprehend.

Is this common terminology in a web programming context, or just PhpStorm? IOW, are "file://" protocol executions always called "local" and EVERYTHING else, including executions from servers located completely on the same development machine, are ALL remote servers?

0

Not sure about common terminilogy, but yes - execution on wen servers, even located on the same machine, is called remote

0

Please sign in to leave a comment.