How to debug JavaScript that's the result of an XHR

Question

My ASP.NET MVC app makes an XHR request from within a view, and retrieves another partial view. This partial view wires some event handlers.

I would like to set a break-point in the event handler of these partial views and debug it.

I have IE 9, Firefox 14.0.1 and Chrome 28.0.1500.5.

I am using Visual Web Developer 2010 Express.

`I would like to set a break-point in the event handler of these partial views and debug it.` - what's stopping you? — Oded, Jun 03 '13 at 10:58
The partial view is a server side view (.cshtml). It won't show up in browser's developer tools' debuggers. So, I cannot set a break-point in them. — Water Cooler v2, Jun 03 '13 at 11:03
And setting a break-point in javascript code in Visual Web Developer 2010 Express doesn't work. It marks the line as a break-point but does not step in. I am sure this one would be a simple thing to resolve. How do you make it step in? — Water Cooler v2, Jun 03 '13 at 11:04
You can also put a breakpoint in the XHR success before loading the JS and keep stepping through. — Oded, Jun 03 '13 at 11:05
Thanks, Oded. I would have. The thing is, immediately after the login page submission, the login controller loads a master (razor layout), which contains the XHR request initiation. Since that, too, is a cshtml, I can't set a break-point there either. — Water Cooler v2, Jun 03 '13 at 11:13
`And once it is loaded? You can set a breakpoint and reload.` Also, when I try to debug it in the IE JavaScript debugger, it says that another process already has a debugger attached to it, which I am assuming is Visual Web Developer. How do I fix this issue? — Water Cooler v2, Jun 03 '13 at 11:15

score 3 · Accepted Answer · answered Jun 03 '13 at 12:25

3

In the XHR success function, just add debugger; - docs

Open your browser in dev tools mode and the js will auto break at that line.

answered Jun 03 '13 at 12:25

Sean Kenny

Thanks very much. I am able to add the debugger keyword even in inline scripts in views and it breaks even in the composite html generated and sent to the client in the Visual Studio debugger. I am not that good at JavaScript. When I was learning it the last time a few months ago, I learnt about the debugger keyword, but I forgot about it again. Thank you very much for the help. – Water Cooler v2 Jun 03 '13 at 13:02
Welcome. One of most used keywords in javascript :-) – Sean Kenny Jun 03 '13 at 13:05
Wow, I have been wondering for months about being able to do such a thing... this is so useful! Also note that it is specified in ECMAScript 5.1 and therefore should work in most browsers. – djule5 Jan 12 '16 at 22:55

score 1 · Answer 2 · answered Jun 03 '13 at 11:03

1

I would like to set a break-point in the event handler of these partial views and debug it.

Great, go ahead. Download FireBug and (F12) you could put a breakpoint in your javascript code and debug it.

answered Jun 03 '13 at 11:03

Darin Dimitrov

Thanks, Darin. I have Firebug and I use the Developer tools of all the three browsers quite often. But I've never used it for XHR returned JavaScript code. The ajax request is made to a server side controller, which returns a partial view. I want to set a break-point in that partial view. Browser don't list views as they are server side components. How do I tell my browser's debugger to set a break-point in the mark-up returned by that XHR/partial view/ajax request? – Water Cooler v2 Jun 03 '13 at 11:07
But a partial view should contain markup, not scripts. Scripts should be placed in separate javascript files. I hope you are following best practices and not mixing your markup with scripts. – Darin Dimitrov Jun 03 '13 at 11:08
Thanks, Darin. It is a large project. I didn't write the code I am debugging. I would have, as I do, separated everything for my own sanity. I can't work "not properly." :-) – Water Cooler v2 Jun 03 '13 at 11:11
How do you get that nice box around `F12`? – Water Cooler v2 Jun 03 '13 at 11:16
F12: I saw your MarkDown source by clicking edit on your answer. Heheh! – Water Cooler v2 Jun 16 '13 at 22:52

2 Answers2