Chrome Sources面板不显示带Source Map的TypeScript生成文件

I’ve run into similar source map headaches with Chrome 66, especially when dealing with dynamically loaded scripts like SAPUI5 controllers. Let’s break down the fixes and workarounds that helped me get TS debugging working:

1. Verify Your TypeScript Compilation Settings First #

Make sure your tsconfig.json is tuned for SAPUI5’s AMD module system and generates valid source maps:

{
  "compilerOptions": {
    "sourceMap": true,
    "inlineSources": true, // Embeds TS code directly in the map to avoid missing local files
    "module": "AMD", // Critical for SAPUI5's async loading
    "target": "ES5", // Matches SAPUI5's runtime environment
    "outDir": "./webapp/controller", // Output JS files to the folder SAPUI5 expects
    "rootDir": "./src/controller" // Point to your original TS files
  }
}

After compiling, double-check the //# sourceMappingURL= line at the end of your FinalAssembly.controller.js—the path to the .map file must be correct (relative paths work best if JS and map are in the same folder).

2. Fix SAPUI5 Dynamic Loading Quirks #

SAPUI5’s async controller loading can throw off Chrome’s source map parser. Try these tweaks:

• Add a sourceURL directive at the top of your compiled JS file, using a path that matches SAPUI5’s namespace structure:

  //# sourceURL=your/app/namespace/FinalAssembly.controller.ts
  

  Chrome sometimes struggles with flat filenames for dynamically loaded modules—using the full namespace path helps it index the file correctly.
• Ensure your TS controller uses the same namespace as SAPUI5 expects (e.g., sap.ui.define(["sap/ui/core/mvc/Controller"], Controller => {...}) instead of plain TS modules).

3. Force Chrome to Recognize Source Maps #

If Chrome isn’t even requesting the .map file:

• Go to DevTools Settings (gear icon) → Sources → Confirm "Enable JavaScript source maps" is checked (it’s easy to accidentally uncheck this).
• Use Workspace Mapping: Right-click in the Sources panel → "Add folder to workspace", select your local project folder, then map it to the corresponding path on your server (e.g., map local src/controller to your app’s controller path on the server). This tells Chrome to use your local TS and map files directly, bypassing server-side caching issues.
• Do a hard refresh with Ctrl+Shift+R (or Cmd+Shift+R on Mac) to clear cached scripts—old JS files without valid map references can stick around.

4. Work Around Chrome 66’s Known Source Map Bugs #

Chrome 66 had several bugs related to source map parsing for dynamically loaded scripts. Try these workarounds:

• Enable DevTools Experiments: Go to chrome://flags/#enable-devtools-experiments, turn it on, restart Chrome, then go back to DevTools Settings → Experiments and enable "Experimental JavaScript Debugger". This fixes some edge cases with async script source maps.
• If possible, upgrade Chrome to version 67 or later—Google fixed many source map issues in subsequent releases. Downgrading to 65 is another option if upgrading isn’t feasible.

5. Troubleshoot Your Test Case #

For your simpler test scenario:

• Confirm the .map file is hosted correctly on your server and accessible via the path in the sourceMappingURL line.
• In DevTools, go to the Sources panel → Page → Expand your domain name—look for the JS file under "top" or a hidden subfolder. If it’s missing, use the workspace mapping trick above to link your local TS file to the server’s JS path.

Hopefully one of these steps gets your TS debugging working in Chrome 66!

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