4

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/

Sylvain
  • 19,099
  • 23
  • 96
  • 145

2 Answers2

10

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

server

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:

mappings

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:

Debug

CrazyCoder
  • 389,263
  • 172
  • 990
  • 904
  • Thanks for your answer! It’s good to know that I can use deployments to view the current file but I really need a solution that attaches the debugger too. Using the the Debug action in the Run menu loads the file using `file://`; not using the local web server which is what I need. – Sylvain May 01 '13 at 02:47
  • 2
    With the correct deployment configuration **Debug** action will open it on the web server via `http://`. I've double checked it with the sample project before writing the answer. – CrazyCoder May 01 '13 at 12:20
  • You are absolutely right. I didn't test it right yesterday. Thanks a lot. – Sylvain May 02 '13 at 02:15
  • FYI - you can change the port for the built-in server by going to Settings->Debugger->JavaScript - the first option is the port setting. – Queso Oct 13 '14 at 15:08
2

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:

external tools setup

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.

Zaptree
  • 3,763
  • 1
  • 31
  • 26