断点不生效需检查三方面：tsconfig开启sourceMap和inlineSources；WebStorm TypeScript设置与tsconfig一致且禁用Compile on save；Chrome调试需用source-map而非eval-source-map并清缓存。
断点不生效？确认 TypeScript 编译输出路径和源码映射是否对齐
WebStorm 调试 TS 本质是调试生成的 .js 文件，但靠 sourceMap 回溯到 TS 行。如果断点点不上，大概率是映射断了。
检查三件事：
-
tsconfig.json中必须有"sourceMap": true（推荐同时开"inlineSources": true，避免额外.js.map文件丢失） - WebStorm 的
Preferences > Languages & Frameworks > TypeScript里，“Compiler options” 要勾选Generate source maps，且路径设置需和tsconfig.json一致 - 确保 WebStorm 没在用内置 TypeScript 编译器编译出冲突文件——关掉
Preferences > Languages & Frameworks > TypeScript > Compile on save，改用你自己的构建流程（如tsc -w或webpack --watch）
Chrome 调试器里看不到 TS 变量名？检查 sourcemap 类型和调试器加载行为
即使断点能停，也可能看到 __WEBPACK_IMPORTED_MODULE_0__ 这类变量，而不是原始 import 名或 const 名。
这不是 WebStorm 问题，而是 Chrome DevTools 加载 sourcemap 的方式限制：
- Webpack 默认生成
devtool: "eval-source-map"，这种 map 不支持变量名还原；换成"source-map"或"inline-source-map" - 确保
tsconfig.json中"declaration": false（开启会干扰 sourcemap 解析） - 重启 Chrome 并清空 DevTools 缓存：打开 DevTools → 右上角 ⋯ → Settings → “Disable cache” 打钩 + 刷新页面
调试 Node.js TS 项目时提示 “Cannot find module”？启动配置没走 tsc 编译输出
直接用 node src/index.ts 肯定报错——Node 不认识 TS。WebStorm 的 Node.js 运行配置默认执行的是 .js 入口，不是 .ts。
- 运行配置中，“JavaScript file” 必须填编译后的路径，比如
dist/index.js，不是src/index.ts - 别依赖 “Run with Node.js” 右键菜单自动推导——它常误选 TS 源文件。手动新建
Run Configuration > Node.js，显式指定Working directory和JavaScript file - 如果用
ts-node调试（不推荐用于生产级调试），需在配置里加--require ts-node/register，但 sourcemap 支持不稳定，断点位置可能偏移
Vue / React 项目里 TS 断点跳转错行？检查框架 CLI 的构建插件是否覆盖了 sourcemap
Vue CLI、Create React App 等封装了 webpack，它们的默认 sourcemap 配置往往只服务开发服务器，不保证 WebStorm 调试兼容。
- Vue CLI：在
vue.config.js加configureWebpack: { devtool: 'source-map' }（不要用cheap-module-eval-source-map） - Create React App：需
npm run eject后修改webpack.config.js，把devtool改成'source-map'；否则 CRA 的react-scripts会强制覆盖 - 确保 WebStorm 的
Preferences > Languages & Frameworks > JavaScript > Debugging > Source Maps中，“Project files” 映射正确，例如dist/.*\.js→src/
真实项目里，sourcemap 是链条：TS 编译 → 构建工具处理 → DevServer 注入 → 浏览器加载 → WebStorm 解析。任一环弱化，调试就退化成看 JS。别指望一键“精通”，得一层层验。
