VisualStudio 2017中TypeScript断点无法命中的排查求助

我之前在VS2017+ASP.NET Core 1.1+Webpack的Angular2项目里也碰到过一模一样的问题——Chrome能正常调试TypeScript，但VS里断点总是提示未加载符号，哪怕已经开了脚本调试。折腾了好一阵，总结出几个靠谱的排查和解决步骤：

• 确认Webpack的Source Map类型配置：VS 2017对外部独立的.map文件支持更好，内联的source map（比如inline-source-map、eval-source-map）大概率不会被VS的调试引擎正确解析。所以务必把Webpack配置里的devtool设置为source-map：

  module.exports = {
    // 其他配置...
    devtool: 'source-map',
    // 其他配置...
  };
  

  改完后记得重新编译，生成对应的.js.map文件。

• 禁用VS自带的TypeScript编译：既然你已经用Webpack处理TS编译了，VS自带的编译会生成额外的.js和.map文件，和Webpack的输出冲突，导致source map不匹配。可以右键项目→属性→TypeScript Build，把“Compile on save”和“Automatically compile TypeScript files which are not part of a project”都关掉；或者直接编辑.csproj文件，添加以下配置彻底禁用：

  <PropertyGroup>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
  </PropertyGroup>
  

• 核对VS调试设置细节：

  1. 右键项目→属性→调试，再次确认“Enable JavaScript debugging for ASP.NET (Chrome, Edge and IE)”是勾选状态。
  2. 调试时一定要选择Chrome作为目标浏览器，其他浏览器对VS的脚本调试支持可能有问题。
  3. 启动调试后，打开VS的调试→Windows→Script Documents，看看能不能找到你的TS文件。如果找不到，右键“Script Documents”→Load Script，手动选择Webpack生成的.js文件，对应的.map会自动加载，之后就能定位到TS文件并设置断点了。

• 修正Source Map的路径映射：有时候Webpack生成的source map里的文件路径格式不对，VS无法匹配到项目中的原始TS文件。可以在Webpack配置的output里添加devtoolModuleFilenameTemplate，指定绝对路径格式：

  module.exports = {
    devtool: 'source-map',
    output: {
      // 其他输出配置...
      devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]'
    },
    // 其他配置...
  };
  

• 清理缓存避免旧文件干扰：

  1. 手动删除项目的bin、obj文件夹，以及Webpack的输出目录（比如wwwroot/dist）。
  2. VS里点击生成→清理解决方案，然后重新生成项目。
  3. Chrome里清空调试缓存：按F12打开开发者工具→Application→Clear storage，勾选“Cached images and files”和“Storage”，点击Clear site data。

• 禁用开发环境的静态文件缓存：ASP.NET Core默认会缓存静态文件，导致调试时加载旧的JS和source map。在Startup.cs的Configure方法里修改静态文件配置：

  app.UseStaticFiles(new StaticFileOptions
  {
      OnPrepareResponse = ctx =>
      {
          if (env.IsDevelopment())
          {
              ctx.Context.Response.Headers.Append("Cache-Control", "no-cache, no-store, must-revalidate");
              ctx.Context.Response.Headers.Append("Pragma", "no-cache");
              ctx.Context.Response.Headers.Append("Expires", "0");
          }
      }
  });
  

按照这些步骤逐一排查，应该就能解决VS里TypeScript断点无法命中的问题了。

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