Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
iradul committed May 14, 2016
1 parent ac042d7 commit a468d00
Showing 1 changed file with 28 additions and 5 deletions.
33 changes: 28 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,31 @@
# VS Code - Debugger for PhantomJS

## This procject is forked from [Debugger for Chrome](https://github.com/Microsoft/vscode-chrome-debug)
### Install
Download and install [VSC](https://code.visualstudio.com/)

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

![alt step1](https://cloud.githubusercontent.com/assets/2411422/15265838/37150d2e-195e-11e6-8aa7-9de81418486d.png)
- 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

![alt step2](https://cloud.githubusercontent.com/assets/2411422/15265841/3a547e70-195e-11e6-8648-28e2c2709ecc.png)

### Launch
You must specify:
* full path to PhantomJS executable - `runtimeExecutable`
* full path to PhantomJS JavaScript file - `file`
* root directory of your project - `webRoot`
Download [PhantomJS](http://phantomjs.org/download.html) 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

![alt creating launch.json](https://cloud.githubusercontent.com/assets/2411422/15265900/df27964c-1960-11e6-9327-b4f30b9c4545.png)
- 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.

Expand All @@ -29,3 +48,7 @@ If you are using PhantomJS modules you should put those in `node_modules` direct
}
```

### 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.
![alt debugging](https://cloud.githubusercontent.com/assets/2411422/15265986/975537c2-1963-11e6-8ece-97910cded4da.png)

0 comments on commit a468d00

Please sign in to comment.