CODEWITHSUNDEEP
javascriptgoogle-chromedebugging
M Kenyon II
M Kenyon II

Reputation: 4274

Trying to debug Javascript in Chrome

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;
}

Upvotes: 2

Views: 2405

Answers (3)

Nate
Nate

Reputation: 2519

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

  1. Clicking on the sources tab
  2. Checking the Mouse -> click box under Event Listener Breakpoints
  3. 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.

Upvotes: 0

Zerelli Seifeddine
Zerelli Seifeddine

Reputation: 81

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

Upvotes: 0

Ruan Mendes
Ruan Mendes

Reputation: 92314

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>

Upvotes: 8

Related Questions