试图在Chrome中调试Javascript

Question

我正在Visual Studio 2013中开发一个MVC Web应用程序,我已经能够浏览应用程序的调试会话并在chrome中点击F12来观看我的javascript.我打开调试窗口,单击Sources选项卡,然后进入我的Content/JS/Script.js文件并设置断点.

最近,我的断点从未被击中.似乎javascript被调用了,但它并没有停止.我注意到如果代码错误,我可以点击错误中的链接,Sources会显示一个名为VM895的文件或类似的东西,这似乎是我的Script.js文件的副本,除了没有我的断点.

除非我的javascript错误,否则我找不到打开该文件的方法.

任何人都可以向我解释为什么会这样吗？为什么不使用我在实际脚本文件中放置的断点,以及可能发生了什么变化？

据我所知,eval我的Javascript中没有使用任何地方.

这是我的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>

这是来自浏览器的渲染源:

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

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

Answer 1

浏览器(有时)很难在动态加载的JavaScript上持久化断点.最简单的解决方案是debugger;在代码中添加一行.

您可能认为您没有使用eval,但每当您在HTML中设置处理程序时,都会动态创建随后执行的代码;

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

或者,在你的例子中

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