Question

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

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

除非我的javascript错误，否则我无法找到打开该文件的方法。

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

据我所知，我在Javascript中没有使用eval。

这是我的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上持久化断点。最简单的解决方案是在代码中添加Property1Value Property2Value Property3Value行。

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

debugger;

或者，在你的例子中

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

Answer 2

您必须设置参数＆＃34; UseBundle＆＃34;在appSettings part

中的web.config文件中为false

Answer 3

您可以通过以下方式访问VM895文件：

点击来源标签
检查鼠标 - ＆gt;单击“事件侦听器断点”下的框
点击窗口（您可能需要运行一次或两次以获取代码）

您也可以尝试通过代码中的console.log（）进行访问，例如this answer。

试图在Chrome中调试Javascript

3 个答案: