How to debug javascript and set break point in google app engine project.

I'm new to javascript and the development cycle for it.

I was trying to follow this guide: http://www.jetbrains.com/pycharm/webhelp/javascript-specific-guidelines.html

but got stuck on 7 and 8

1. 
   Run your application by opening its starting HTML page in the PyCharm default browser.
2. Debug your application.

by "starting html page" I assume it means go to http://127.0.0.1:8080/ in chrome. Doing this, the debugger stops correctly at python breakpoints (in my webapp2 requesthandlers), but the debugger won't stop on breakpoints that are in my javascript code.

Under Run/Debug Configurations, I have "Run browser: http://127.0.0.1:8080/ " checked.

I also have "Start JavaScript debugger automatically when debugging" checked.

(what is the javascript debugger? and should I expect it to just pop up magically?)

When I click debug it uses the following commands:

C:\Python27\python.exe "C:\Program Files\JetBrains\PyCharm 2.5\helpers\pydev\pydevd.py" --client 127.0.0.1 --port 51102 --file "C:/Program Files/Google/google_appengine/dev_appserver.py" .

PyDev console: using IPython 0.12.1

pydev debugger: starting

Connected to pydev debugger (build 117.376)

Any help / prods in the right direction would be welcome

thanks

EDIT: Or should I just be using chrome developer tools / firebug ? I don't really understand what the pycharm javascript debugging feature is.