VS Code - Debugger for PhantomJS

Install

Download and install VSC

Open up VSC and install this extension:

• open VSC
• press CTRL+SHIFT+P, enter "install" and press Enter alternatively click on the button in bottom left corner and pick first option

• enter "phantom", wait a moment VSC will open up extension info box then click on the small button in the bottom right corner of the box

Launch

Download PhantomJS executable.

Open your working directory in VSC. This can be done from menu or from console by typing code [path to directory]. If you are already in working directory just type code ..

Setup up VSC debugger:

• click Debug button or press CTRL+SHIFT+D
• create launch.json file manualy under ./.vscode/launch.json or by clicking on the small button that looks like cog then pick PhantomJS from the list that will open up

• edit launch.json by specifying :
  • full path to PhantomJS executable that you previously downloaded - runtimeExecutable
  • full path to PhantomJS JavaScript entrypoint file - file
  • root directory of your project - webRoot

If you write your code in TypeScript set sourceMaps to true. Also note that ts and js files have to be placed in the same directory.

If you are using PhantomJS modules you should put those in node_modules directory which should be child of your webRoot directory so that debugger can pick them up.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "phantomjs",
            "request": "launch",
            "file": "${workspaceRoot}/test.js",
            "webRoot": "${workspaceRoot}",
            "runtimeExecutable": "${workspaceRoot}/phantomjs.exe",
            "runtimeArgs": [],
            "scriptArgs": [],
            "sourceMaps": true
        }
    ]
}

Debug

Place breakpoints in your script(s) and press F5 to fire up phantom and start debugging. VSC debugger itself is very similar to javascript debuggers found in popular browsers like Google Chrome or Firefox for example.