Trying to debug Javascript in Chrome

Question

I'm developing an MVC web app in Visual Studio 2013, and I have been able to browse to the debug session of the app and hit F12 in chrome to watch my javascript. I bring up the debug window, click on the Sources tab, and go into my Content/JS/Script.js file and can set breakpoints.

Lately, my breakpoints are never hit. It seems like the javascript is getting called, but it's not stopping. I did notice that if the code errors, I can click on the link in the error, and Sources brings up a file called VM895 or something like that, which seems to be a copy of my Script.js file, except without my breakpoints.

Unless my javascript errors, I can't find a way to open that file.

Can anybody explain to me why this is happening? Why doesn't it use the breakpoints I put in the actual script file, and what might have changed?

As far as I know, I am not using eval anywhere in my Javascript.

Here is my MVC/Razor:

<div class="col-md-5">
    @Html.DropDownListFor(model => model.SelectedRoleId,
        ViewBag.ReviewRoles as SelectList,
        new { @class = "form-control", onchange = "OnChangeAjaxAction.call(this, 'reviewRole');", id = "ddlReviewRole" })
</div>

Here is the rendered source from the browser:

<select 
        class="form-control" data-val="true" 
        data-val-number="The field SelectedRoleId must be a number." 
        data-val-required="The SelectedRoleId field is required."
        id="ddlReviewRole" 
        name="SelectedRoleId" 
        onchange="OnChangeAjaxAction.call(this, 'reviewRole');">
    <option value="14">Reviewer</option>
    <option value="42">Erb Reviewer</option>
</select>

Here's the Javascript:

OnChangeAjaxAction = function(e) {
    var form = this.form;
    //e.preventDefault(); //This prevents the regular form submit
    var formData = new FormData($(form).get(0));
    AjaxAction(form.action + "?mode=" + e, form.method, formData, $(form).attr("data-target-div"), $(form).attr("data-refresh-div"));

    return false;
}

Have you tried clearing your cache so that the scripts are refetched? Perhaps there's something odd going on there. — Sam Hanley, Nov 10 '15 at 20:09
Did you deactivate breakpoints by mistake? In the Sources tab, on the far right at the top, there is what looks like a roadsign pointing right (blue if you hover). That's the button to activate/deactivate all breakpoints. — Josh KG, Nov 10 '15 at 20:13
No Josh KG, if I get into the VM895 file and set breakpoints and retrigger the javascript, they hit. — M Kenyon II, Nov 10 '15 at 20:18
Ziki, that does not answer my question. I am not knowingly using eval. Even if I was, how can I view the source code in the VM without hitting an error? — M Kenyon II, Nov 10 '15 at 20:21
Just wondering: Do the debugger statements work when you add them via your code editor and not through the browser? — Pytth, Nov 10 '15 at 20:26

Ruan Mendes · Accepted Answer · 2015-11-10T20:27:53.470

8

Browsers (sometimes) have a hard time persisting breakpoints on dynamically loaded JavaScript. Simplest solution is to add a debugger; line in your code.

You may think you are not using eval, but whenever you set handlers in HTML, that is dynamically creating code that is then executed;

// Code loaded dynamically
function doSomething(y) {
    var x = 1;
    // If dev tools is open, it will treat `debugger` as a breakpoint
    debugger;
}

Or, in your example

<div class="col-md-5">
    @Html.DropDownListFor(model => model.SelectedRoleId,
        ViewBag.ReviewRoles as SelectList,
        new { @class = "form-control", 
        onchange = "debugger; OnChangeAjaxAction.call(this, 'reviewRole');", id = "ddlReviewRole" })
</div>

edited Nov 10 '15 at 20:27

answered Nov 10 '15 at 20:25

Ruan Mendes

90,375
31
153
217

That also works for environments like Node.js, simplest solution. – Patrick Roberts Nov 10 '15 at 20:27
That will work, thanks. Still don't know why the behavior suddenly changed. – M Kenyon II Nov 10 '15 at 21:29
@MKenyonII In my experience, this problem has fluctuated; Chrome behaving the best out of the three, but new bugs/fixes are introduced pretty often. – Ruan Mendes Nov 11 '15 at 14:56

score 0 · Answer 2 · answered May 06 '16 at 15:33

0

You have to set the parameter "UseBundle" to false in your web.config file in appSettings part

answered May 06 '16 at 15:33

Zerelli Seifeddine

81
3
9

Would you be ok to clarify what it is about the `UseBundle` parameter which would help the user hit breakpoints? From what I'm reading at http://www.asp.net/mvc/overview/performance/bundling-and-minification it seems to be primarily a performance feature? – Peter David Carter May 06 '16 at 19:19

Nate · Answer 3 · 2017-09-28T15:56:32.617

0

You may be able to get to the VM895 file by:

Clicking on the sources tab
Checking the Mouse -> click box under Event Listener Breakpoints
Clicking in the window (you may need to hit run once or twice to get to your code)

You might also try getting to it via console.log() in your code like in this answer.

edited Sep 28 '17 at 15:56

answered Sep 28 '17 at 15:49

Nate

2,449
3
21
29

Trying to debug Javascript in Chrome

3 Answers3

Linked