How to open/debug current file using built-in Web server in WebStorm?

Question

Is there a way to create a run configuration that will open the file that is being edited in the browser using the WebStorm built-in web server (http://localhost:63342/) and start the debugging?

reference: http://blog.jetbrains.com/webstorm/2013/03/built-in-server-in-webstorm-6/

Answer 1

Another solution that does not require setup for every project is to create an external tool that will load your browser of preference with the proper path. Here is an example on how to set that up using chrome:

Program:

C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

Parameters (don't forget the quotes in case file names have spaces in them):

"http://localhost:63342/$ProjectName$/$FilePathRelativeToProjectRoot$"

Working Directory:

C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

Once you set this up it will work on any project. Make sure to tweak the program path and working directory to the path where your chrome browser is installed.

Answer 2

You don't need a run configuration, but a default In place deployment:

Note that the server configuration name (LOCAL) is in bold which means that it's the default (can be set from the right click menu or an icon).

Configure Mappings like this:

where project is the name of your project.

Now you can use View | Preview file in (Alt+F2) and enable Live Edit if needed.

---

Note that it's useful for the preview and will not start JavaScript debugging. To debug the scripts on a page right click in the file and use the Debug action in the Run or file context menu, or the corresponding keyboard shortcut: