Debug JavaScript with PHPStorm?

I have some code like:

 
?>
<script type="text/javascript">
//<![CDATA[
function set_value(name, id, resourcetype) {
    opener.document.getElementById('id_name').value = name;
    opener.document.getElementById('id_resourceid').value = id;
    opener.document.getElementById('id_resourcetype').value = resourcetype;
    window.close();
}
//]]>
</script>
<?php
 

 
When I view this code in the IDE I try to set a breakpoint here but nothing happens. Is there a way to debug JaveScript in a PHPStorm project?
22 comments
Comment actions Permalink

PhpStorm has the same features as Webstorm regarding Javascript debugging so it's definitely possible. There are lot of videos on youtube and documentation on the net on how to set it up. I would recommend getting the Jetbrains Chrome Plugin. With that debugging works really well and setup has gotten much simpler.

Here is one video:
https://www.youtube.com/watch?v=jwubF2gmLNQ

0
Comment actions Permalink

Son once I have the Jet Brains IDE for Chrome plugin then what?

0
Comment actions Permalink

For PHPStorm there doesn't seem to be a JavaScript configuration. What do I use instead? I have attached a screenshot of some JavaScript that I have set a breakpoint in but the breakpoint never gets hit. Breakpoints set in the PHP code work fine.



Attachment(s):
IDE.jpg
0
Comment actions Permalink

There is a lot of documentation out there about this process but I know it can be tricky to get it working all the way. Maybe have another look at some tutorial and if that doesn't help post some screenshots of how you've set up the php debugging. There are a lot of variables on your end so it's difficult to give specific advice.

0
Comment actions Permalink

Hello!

PHPStorm does include the javaScript Debug run configuration - see the attached screenshot. It is the configuration you have to use to debug javascript in browser



Attachment(s):
debug.png
0
Comment actions Permalink

You must have a different version than I. I have attached a screenshot of the settings that I see. I don't find 'JavaScript Debug'.



Attachment(s):
IDE.jpg
0
Comment actions Permalink

Run | Edit Configurations

or via drop down box on main toolbar

Have you watch the video Seb linked in first comment? -- the guy who made that screencast uses it there.

P.S.
http://www.jetbrains.com/phpstorm/webhelp/debugging-javascript.html

0
Comment actions Permalink

I started watching the video but it didn't seem to apply so I will have to look at it again. Thank you.

One more question. Is this local or remote? The JavaScript is invoked from a PHP Web page. As with PHPStorm I invoke the web page with something like http://localhost/moodle26. I enable debugging on the browser with XDebug and in the IDE I "listen" for debugging messages. Is JavaScript debugging similiar?

Thanks again.



Attachment(s):
IDE.jpg
0
Comment actions Permalink

Yes, I believe you need to provide remote URL so that IDe can match scripts to files.

BTW -- do not edit Defaults (as shown on screenshot -- Elena did it so that you know which one to look for) but create your own configuration.

0
Comment actions Permalink

Sorry to be so thick but the URL is the URL path to the PHP file containing the <script> or the path to the .js "source"? If I am providing a URL then it would be of the form 'http://localhost/a/b/c/d.js'?

0
Comment actions Permalink

You can simply map your website root to the correct folder in the project and all files/folders below will be resolved in similar way automatically:

Project Root: C:\projects\my_project
Remote URL: http://localhost/

with such setting http://localhost/js/myscript.js will be automatically matched to C:\projects\my_project\js\myscript.js

In case if you are using URL-rewriting or other URL-altering stuff, you may need to specify remote URLs for individual files.

http://www.jetbrains.com/phpstorm/webhelp/run-debug-configuration-javascript-debug.html

0
Comment actions Permalink

The project root directory is c:/wamp/moodle26/mod/mediasite. As you can see from the screenshot I have set the URL to be the same. But the breakpoint is not getting hit.



Attachment(s):
IDE.jpg
0
Comment actions Permalink

You need to set REMOTE URL not a just URL.

In URL field you specify what URL to open when Debug configuration will be executed.
In Remote URL you specify mappings (between project and actual URL)

An example:
screen01.png

P.S.
And another thing -- DO NOT EDIT DEFAULTS -- it does nothing without actual run/debug configuration entry (big green plus button).

http://www.jetbrains.com/phpstorm/webhelp/run-debug-configurations.html

0
Comment actions Permalink

Now I am really confused. This whole section is Defaults. You said not to edit defaults. What should I edit?

How do I set the Remote URL? I tried right-clicking and left-clicking . . . nothing came up. It says that the remote URL is "optional". Do I need to set a URL for each of the .js files in the project?

Update:
I found that if I click on that column the column is editable. So I entered a URL for the project but still no breakpoint.

0
Comment actions Permalink
Now I am really confused. This whole section is Defaults. You said not to edit defaults. What should I edit?

You should use GREEN PLUS button to create your own configuration of required type. The link I gave in previous comment (added after original post) explains it all. Here it is again: http://www.jetbrains.com/phpstorm/webhelp/run-debug-configurations.html

I'm sure you can find the difference between Defaults section (check the aforementioned link to understand what it does) and other sections (actual configurations of different types)
screen01.png

How do I set the Remote URL? I tried right-clicking and left-clicking . . . nothing came up.

Double click ... or single click and just start typing.

It says that the remote URL is "optional"

I'm entering it anyway -- as you can clearly see from the screenshot. Always works for me (to debug HTML+JS pages). Possibly it is not necessary for you.

Do I need to set a URL for each of the .js files in the project?

I believe I've already answered this in one of the previous comments. Plus, what I do is shown on screenshot above anyway.


P.S.
http://www.jetbrains.com/phpstorm/webhelp/debugging-javascript.html -- please check "External Links:" section at the bottom of the page -- it has links to articles/manuals (with pictures) with different javascript debug scenarios. They are for *Storm v6 and older, but it works nearly the same in v7.

BTW -- the above link has step-by-step instructions anyway (without pics though).

0
Comment actions Permalink

Still no luck. The key piece of information that I was missing was that debugging JavaScript in a PHP project is more like unit tests that setting a breakpoint with and listening to XDebug messages like I was doing before. But now that that is settled I still am not able to hit a breakpoint. I have attached a screenshot of what I have so far. It seems to mimic the instructions (which still say that the remote URL is optional).



Attachment(s):
IDE.jpg
0
Comment actions Permalink

Your Remote URL is longer than just URL. This looks like you are trying to open a file that is OUTSIDE of your project (since IDE does not have a mapping for it).

That's the best of what I can say here. Maybe Elena can help you any better (she does know much more about JS debugging and may provide you with better instructions).

0
Comment actions Permalink

I guess I will wait for her. The URL is shorter because if I debug the configuration it automatically opens the URL given in the URL. If I put the same URL as my project then it will open up a page without the right arguments. I want the web page that references the JavaScript to be opened with the right arguments and the only way to ensure that is to start at the very beginning. Namely with the "shorter" URL.

0
Comment actions Permalink

Hello!

I'm confused. What does your setup look like? The URL in javaScript Debug run configuration should be your page address, like http://localhost/moodle26/index.php. Remote URL mapping for the project root can't be longer - it is a web path of your project on your server; and the page URL is normally a web path + a relative path of your page on server...

0
Comment actions Permalink

I have attached a screenshot of the setup (earlier in the thread). Do you need more information?

When I call the Moodle application I invoke it in the browser as http://localhost/Moodle26 (no index.php). My project is a plugin to Moodle and as such it follows Moodle rules and resides in the physical directory C:/wamp/apps/moodle26/mod/mediasite. The Moodle application calls my plugin according to what the user selects but generally it is something like http://localhost/Moodle26/mod/mediasite/xxx. Where xxx is the PHP page path of the function that is being invoked. In my plugin project I have a folder that physically resides in C:/wamp/apps/moodle26/mod/mediasite/js and all of the files there are JavaScript files. These JavaScript functions will be called at various places in my plugin, to either load a PHP page or perform some kind of validation or management. It is these JavaScript functions that I would like to set a breakpoint in. The URL is set to http:/localhost/moodle26 because if I select this JavaScriptDebug configuration then it automatically brings the page at http://localhost/moodle26. Then based on the user clicks pages in my plugin may or may not be invoked. If they are and the particular functionality involves JavaScript I want to break on the function where the breakpoint is set. But it will probably be a page reference by something like http://localhost/moodle26/mod/mediasite/xxx. Hence the remote path is longer.

Is it possible to set up so JavaScript breakpoints are like PHP breakpoints? Right now it seems like in order for the JavaScript breakpoints to be hit I need to run a specific configuration. There doesn't seem to be the concept that like PHP you enable breakpoints on the browser and "listen" for the breakpoint information on the IDE. Is this possible for JavaScript or is it only for PHP?

0
Comment actions Permalink

If I create a file with .html extension the debugger works fine with lines that are written with javascript. But this time if there is some PHP code around,  than PHP debugging is off.  On the other hand , If I create a file with .php extension and I use javascript in this file ; it is impossible to debug javascript lines.

Can somebody give me an advice ??

0
Comment actions Permalink

Seem there is currently no way to debug js embedded in php. See http://youtrack.jetbrains.com/issue/WEB-2099

0

Please sign in to leave a comment.