尝试在Chrome中调试Javascript [英] Trying to debug Javascript in Chrome

问题描述

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

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.

最近，我的断点从未被击中.看来javascript正在被调用，但并没有停止.我确实注意到，如果代码错误，我可以单击错误中的链接，并且Sources会打开一个名为VM895或类似名称的文件，该文件似乎是我Script.js文件的副本，除非没有断点.

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.

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

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?

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

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

这是我的MVC/剃刀:

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>

这是Javascript:

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

推荐答案

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

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

您可能认为您没有使用eval，但是只要在HTML中设置处理程序，就会动态创建然后执行的代码；

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

或者，在您的示例中

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

这篇关于尝试在Chrome中调试Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！