如何在 Chrome 开发工具中调试 Common.js？答案

【问题标题】：How to Debug Common.js in Chrome Dev Tools?如何在 Chrome 开发工具中调试 Common.js？
【发布时间】：2018-06-15 15:22:40
【问题描述】：

My MediaWiki:Common.js 绘制按钮并将事件附加到按钮。

$('#btnSave').html('<button>Send HTTP Post</button>');

如何在不先通过 MW 核心代码和 jquery 代码的情况下调试 Common.js？

我尝试在 Common.js 中放置 debugger; 标志，但 chrome 似乎没有注意到它。

$(document).on('click', '#btnSave', function() { 
  debugger;
  $.ajax({
    url:"../api.php?action=edit&title=Portal:TagDescriptions&section=2&summary=Hello%20World",
    type:"POST",
    data:{ Text: "Hello, world.",
          token:"c30460d9159a5e2eccca60944ef286405b2393d1%2B%5C" },
    contentType:"application/x-www-form-urlencoded",
    dataType:"json",
    success: function(data) {
        $('#lblDescription').html(data);
    }
  })
});

【问题讨论】：

您的问题有什么问题，我无法理解。你能解释一下吗？
@KiranShahi 你不明白哪一部分？
将调试器关键字放入 ajax 调用中！
@Sidhanshu_thx，我会试试的

标签： javascript jquery google-chrome-devtools mediawiki

【解决方案1】：

您可能需要启用资源加载器的“调试模式”。这将禁用自动脚本缩小。这可以通过在 URL 中添加 debug=true 参数来轻松启用。 See explanation。不过，这不应该是必需的。

这通常还会强制浏览器获取最新的修改，否则可能会被缓存，并可能阻止您在几分钟内以非调试模式查看它们。

缓存可能是debugger 语句不起作用的原因。添加debug=true 应该可以防止缓存问题。

另一个问题可能是文件中的语法错误导致代码无法执行，或者是逻辑错误导致事件未触发，可能是您附加事件的 HTML 元素当时不存在于页面上脚本被执行。您应该将整个代码包装在“document.ready”事件中。见how to execute code on document.ready event with jQuery。示例：

$(function() {
    // Your code here
});

【讨论】：

谢谢，我试试看