How do I debug my JavaScript that is being executed by Chutzpah/PhantomJS

Question

I am using Chutzpah to execute my JavaScript unit tests.

I reference paths to my source files and below have a series of tests. Text Explorer in Visual Studio lists my tests and I can execute them directly from the IDE, so everything seems to be working correctly.

However I would like to step into the source code that is being executed when my tests are run.

Is this possible?

Matthew Manela · Accepted Answer · 2015-09-04T03:29:30.840

38

Update: Version 4.1.0 of Chutzpah adds integrated VS debugging.

This is not currently possible using Chutzpah. The best you can do is to install the context menu extension which will add a "Open In Browser" right click option. Then you can use the browser's built in debugging tool to step through the code.

I would love to add an integrated way to plug into the VS debugging system but have not figured out how to do that yet.

edited Sep 04 '15 at 03:29

answered Sep 24 '12 at 22:38

Matthew Manela

16,572
3
64
66

2

This worked for me, using Chrome. I set a breakpoint, then did a browser refresh. To debug the TS directly (instead of the generated javascript), turn on the "source maps" feature in the chrome dev tools settings (gear icon in the lower right-hand side). – John Hatton Apr 14 '13 at 01:05
Did this situation change at all since then? Have you managed to integrate into the Visual Studio debugging? – julealgon Oct 15 '14 at 20:22
1

The context menu plugin fails to load in browser if the project path has spaces in it e.g. "...\Visual Studio 2013\Project\..." – Sean B Jun 05 '15 at 21:50
2

Thanks, I found the bug and will fix in next release – Matthew Manela Jun 05 '15 at 22:57

score 0 · Answer 2 · answered Jun 04 '14 at 13:35

Maybe this could point you in the right direction:

I made a quick and dirty screenshot grabber for CasperJS using captureBase64('png')

It is POSTing the image into the receiving server which then sends it via socket.io to the browser which displays it is as inline image.

The source code is available on github:

https://github.com/maciejjankowski/flaming-octo-puss

I'm not sure how compatible it is with PhantomJS, but CasperJS works flawlessly so if chutzpah is using PhantomJS there is a chance you could make this concept to work.

You would need to add this to each step or set it as onStepComplete handler:

this.evaluate( function(img){
  __utils__.sendAJAX("http://localhost:8001/", 'POST', {'img' : img }, false);    
  }, 
  {'img' : this.captureBase64('png')} 
);

How do I debug my JavaScript that is being executed by Chutzpah/PhantomJS

2 Answers2