javascript - 如何调试在 Razor View 中定义的模态对话的 document.ready Javascript？

Question

我的 Web 应用程序是那些“单页”样式的应用程序之一，它取代了 <div>通过ajax的内容。在我们希望向用户显示模态对话的情况下，调用此函数:

function OpenWindow(name, title, params) 
{
    var winParams = SetWindowParameters(name, title, params);
    var container = $('div.k-content[id=\'' + name + '\']');

    if (container.length > 0) 
        container.data("kendoWindow").destroy();

    container = $('<div/>', { id: name }).css('display', 'none');

    container.appendTo($('body'))

    if (params.content) 
        container.html(params.content);

    var window = container.kendoWindow(winParams);

    window.data("kendoWindow").center().open();
}

params 的一个示例值是这样的:

params = { content: response, draggable: true, wizard: true };

和response包含来自 public ActionResult ShowSomePopup 的结果返回 ViewResult对象。

所以另一个函数发出一个 ajax 请求，从服务器获取一些 HTML，然后将该响应对象传递给 OpenWindow .

我要返回的这个 View 是 Razor View 。 cshtml 文件看起来有点像这样:

<div id="SomeDiv">
    <!-- the rest of the form -->
</div>

<script type="text/javascript">
    $(document).ready(function ()
    {
        //some code
    });
</script>

我发现:

• How can I debug my MVC3 site with Chrome? - 接受的答案是 6 岁，我的 Chrome 看起来很不一样。如果我加载开发工具并单击与我的页面关联的脚本，无论我使用 Firebug 还是 Chrome 的调试器，该文件的内容都是空的:/image/lbjVU.png第二个答案对我没有帮助，因为我是 <script type="text/javascript> ... </script> 不“在”razor 代码的任何大括号内。

• Using Chrome JavaScript Debugger / How to break on page loading events - 我不明白接受的答案，但 +100 赏金的第二个答案对我不起作用。我检查了 DOMContentLoaded复选框它永远不会为我触发。

• How can I debug javascript contained in $(document).ready()? - 同样，由于脚本是在 cshtml 文件中定义的，因此它不会显示在 Sources 下调试器中的选项卡。

我发现的唯一解决方案是简单地将cshtml 脚本的内容移动到一个JS 文件中，然后从cshtml 的$(document).ready 调用那个 函数。脚本。但是，当我有数百 个 View 文件时，这是一个巨大的痛苦；我真的没法花时间遍历所有东西。

问题:如何使用 Chrome 调试在 Razor View 中定义的模态对话的 document.ready 函数？

Answer 1

在 cshtml 文件中的 js 中写入“调试器”，以便 Chrome 命中断点，然后您可以在浏览器开发人员工具打开时单步调试。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <script>
    
    $(document).ready(function () {
      debugger;
      alert("Hello world");
    })
  
  </script>
</div>

其他引用资料:https://www.w3schools.com/jsref/jsref_debugger.asp