如何调试加载到单页应用主div中的外部HTML文件内的JS脚本

首先，你遇到的Chrome调试看不到外部文件的问题，本质是因为这些HTML文件是通过AJAX $.get 请求加载后直接插入DOM的——Chrome不会将这类动态注入的内容（尤其是内嵌脚本）作为独立资源显示在Sources面板中，脚本会被当作页面主上下文的一部分执行，没有关联到原始的index_test2.html文件。

下面分两部分解决你的问题：

一、解决调试问题的具体方法 #

1. 分离HTML与脚本（最推荐） #

把index_test2.html里的内嵌脚本抽成独立的JS文件，比如命名为about.js：

// about.js
var c = document.getElementById("internal_content");
c.innerText = "ABOUT";

然后修改index_test2.html只保留静态内容：

<div id="internal_content"></div>

接着在主页面的路由逻辑里，加载完HTML后再动态加载对应的JS文件，修改navigate函数里的回调逻辑：

getContent(fragmentId, function (content) {
  $("#content").html(content);
  // 根据页面标识加载对应脚本
  if(fragmentId === "index_test2") {
    const script = document.createElement('script');
    script.src = 'about.js';
    script.onload = function() {
      console.log("About页面脚本加载完成");
    };
    document.body.appendChild(script);
  }
});

这样about.js会作为独立资源被请求，你就能在Chrome Sources面板里直接找到它，自由设置断点调试了。

2. 临时调试：添加debugger语句 #

如果不想修改现有结构，也可以在index_test2.html的内嵌脚本里手动添加debugger;语句：

<div id="internal_content"></div>
<script>
debugger; // 执行到这里会自动触发浏览器断点
var c = document.getElementById("internal_content");
c.innerText = "ABOUT";
</script>

当脚本执行到debugger;时，Chrome会自动暂停，此时你可以在Sources面板的VMxxx（虚拟临时文件）标签里看到这段代码，进行调试。

二、更优的SPA实现方式 #

你当前的基础哈希路由方案能运行，但在可维护性、调试性上有局限，推荐以下优化方向：

1. 采用模块化页面配置 #

不要把页面内容和逻辑耦合，给每个页面定义统一的配置项，比如：

const pageConfigs = {
  "index_test1": {
    htmlPath: "index_test1.html",
    jsPath: null // 静态页面无需脚本
  },
  "index_test2": {
    htmlPath: "index_test2.html",
    jsPath: "about.js"
  }
};

后续路由逻辑根据配置加载对应的HTML和JS，新增页面只需要添加配置项，代码逻辑更清晰。

2. 使用成熟的SPA路由方案 #

如果项目后续会扩展，推荐使用专门的SPA框架（比如Vue、React）或者轻量路由库：

• 框架自带的路由系统会自动管理页面加载、组件生命周期，配套的调试工具（比如Vue DevTools、React DevTools）能直观看到页面组件和状态变化。
• 轻量路由库（如Page.js）能帮你处理哈希路由的细节（比如路由参数、导航守卫），比手写的基础路由更健壮。

3. 逐步替换jQuery（可选） #

现代浏览器的原生API已经足够强大，比如可以用fetch替代$.get，用原生DOM操作替代jQuery，减少依赖的同时也更符合现代前端开发习惯。

内容的提问来源于stack exchange，提问作者pitcairn1987