如何在Chrome开发者工具调试JS加载的局部视图内脚本？

我之前也踩过这个一模一样的坑！用$("#containerId").load()加载带JS的局部视图后，脚本被Chrome标成随机编号的VM文件，搜也搜不到、断点没法设，确实头疼。不过有几个亲测有效的方法能解决，给你一步步说：

方法1：给动态脚本添加sourceURL标记（最推荐） #

Chrome把动态注入的脚本当成匿名代码，所以会用VMxxxx命名。我们只要在局部视图的脚本末尾加一行特殊注释，就能让它显示自定义的名称，之后搜索和断点都和普通脚本一样方便。

比如你的局部视图里的JS代码可以改成这样：

$(function() {
  // 这里是你的业务逻辑代码
  console.log("局部视图脚本执行中");
  // 其他操作...
});
// 关键：添加这个注释，自定义脚本名称
//# sourceURL=partial-action-script.js

刷新页面后，直接在Sources面板的搜索框输入partial-action-script.js就能找到它，随便设置断点就行，再也不用找VM文件了！

方法2：通过调用栈定位VM文件 #

如果暂时没法修改局部视图的代码，也可以用这个方法：

• 在动态脚本里故意加一行console.log("调试入口");，或者直接插入debugger;语句（执行到这里会自动触发断点）
• 打开Chrome的Console面板，找到刚才输出的日志，点击日志后面的VMxxxx链接，就能直接跳转到Sources面板对应的VM文件里
• 进入文件后，就可以正常设置断点，之后触发脚本执行时就会自动暂停

另外，如果脚本里有事件绑定（比如按钮点击），点击按钮后，在Sources面板的Call Stack区域里找到对应的VM条目，点击也能直接定位到脚本位置。

方法3：用XHR断点拦截加载请求 #

因为load()方法本质是发起XHR请求获取局部视图，我们可以拦截这个请求来调试：

1. 打开Chrome Sources面板，左侧找到XHR/fetch Breakpoints
2. 点击+号，输入你的Action路径（比如/ControllerName/ActionName，或者只输入ActionName做模糊匹配）
3. 刷新页面，当请求触发时，Chrome会自动暂停，此时在右侧的请求详情里找到Response，就能看到返回的HTML和脚本代码
4. 你可以直接在Response里的脚本部分设置断点，或者复制代码到Snippets里调试

方法4：利用Snippets临时调试 #

如果已经找到了VM文件，可以把里面的代码复制到Sources面板的Snippets标签里：

1. 右键点击Snippets区域，选择New snippet
2. 粘贴脚本代码，修改或添加断点
3. 点击Snippets上方的运行按钮，就能执行调试——而且即使刷新页面VM编号变化，Snippets里的代码还会保留着，方便反复调试

内容的提问来源于stack exchange，提问作者ali-myousefi