debug rxjs 需要进入ts文件

981377660LMT commented 4 months ago

问题：现在 DEBUG进入 /Users/liaomingtian/algo/algorithm-study/node_modules/rxjs/dist/cjs/index.js

981377660LMT commented 4 months ago

要在调试过程中进入RxJS的TypeScript源码，而不是编译后的JavaScript文件，你需要确保以下几点：

确保RxJS库包含源码映射文件：RxJS库在发布时通常会包含源码映射文件（.map文件），这些文件将编译后的JavaScript代码映射回原始的TypeScript代码。
配置VS Code以使用源码映射：确保你的VS Code调试配置正确，以便调试器能够使用这些源码映射文件。

步骤

检查RxJS的源码映射文件：确保RxJS库中包含源码映射文件。你可以在node_modules/rxjs目录中查看是否存在.map文件。例如，node_modules/rxjs/dist/cjs/index.js.map。
配置tsconfig.json：确保你的tsconfig.json文件中启用了源码映射：
```
{
 "compilerOptions": {
   "sourceMap": true,
   ...
 }
}
```

配置VS Code的launch.json：在VS Code的调试配置文件launch.json中，确保配置了正确的调试类型和其他必要的选项，以支持TypeScript代码的调试。

{
   "version": "0.2.0",
   "configurations": [
       {
           "type": "node",
           "request": "launch",
           "name": "启动程序",
           "program": "${workspaceFolder}/dist/app.js",
           "preLaunchTask": "tsc: 构建 - tsconfig.json",
           "outFiles": [
               "${workspaceFolder}/dist/**/*.js",
               "${workspaceFolder}/node_modules/rxjs/**/*.js"
           ],
           "sourceMaps": true,
           "resolveSourceMapLocations": [
               "${workspaceFolder}/dist/**/*.js",
               "${workspaceFolder}/node_modules/rxjs/**/*.js"
           ]
       }
   ]
}

这里的"outFiles"和"resolveSourceMapLocations"指定了编译后的JavaScript文件的位置，包括了RxJS库的位置，这有助于调试器找到对应的.js.map文件。

使用ts-node或ts-node-dev：如果你使用ts-node或ts-node-dev来运行TypeScript代码，这些工具会自动处理源码映射，使得你可以直接在TypeScript源码中设置断点和进行调试。确保在launch.json中正确配置了使用这些工具。

{
   "type": "node",
   "request": "launch",
   "name": "使用ts-node调试",
   "runtimeArgs": ["-r", "ts-node/register"],
   "args": ["${workspaceFolder}/src/app.ts"],
   "outFiles": [
       "${workspaceFolder}/node_modules/rxjs/**/*.js"
   ],
   "sourceMaps": true,
   "resolveSourceMapLocations": [
       "${workspaceFolder}/node_modules/rxjs/**/*.js"
   ]
}

启动调试：配置完成后，保存launch.json文件。然后，你可以通过VS Code的调试视图（侧边栏的小虫子图标）选择你刚才创建的配置，并点击绿色的启动按钮来启动调试会话。

通过这些步骤，你应该能够在VS Code中调试RxJS代码，并跳转到其TypeScript源码。这样，你可以在调试过程中查看和理解RxJS的内部实现，设置断点、单步执行代码、查看变量值

981377660LMT commented 4 months ago

debug 一个ts库的代码，发现进不去ts源码，检查了sourcemap也没问题，结果发现vscode debug默认不解析 node_moudles的 js 文件

981377660LMT commented 4 months ago

需要设置为

     "outFiles": ["${workspaceFolder}/**/*.js"],

才能解析 node_modules 中的 sourcemap 文件（.js.map）

981377660LMT commented 4 months ago

outFiles是VS Code调试配置(launch.json)中的一个属性，它指定了调试器在调试过程中应该考虑的编译后的JavaScript文件的位置。这个属性对于确保调试器能够找到并使用源码映射文件（.map文件）至关重要，从而允许开发者在原始的TypeScript或其他编译到JavaScript的语言源码中进行调试。 outFiles属性的作用指定文件位置：告诉调试器在哪里可以找到编译后的JavaScript文件及其对应的源码映射文件。提高调试性能：通过限定搜索范围，减少调试器在启动时需要搜索的文件数量，从而加快调试启动速度。确保正确的源码映射：帮助调试器正确地将编译后的代码映射回源代码，使得开发者可以在源代码中设置断点和查看变量等。

981377660LMT commented 4 months ago

debug 能进入 soucemap，库代码和 vscode debugger配置各需要注意哪些关键点

要确保在调试过程中能够进入源码映射（sourcemap）并正确地调试库代码，需要在库代码的构建配置以及VS Code的调试配置中注意以下关键点：

库代码构建配置关键点

生成源码映射：确保构建过程中为库代码生成了源码映射文件。这通常通过构建工具（如Webpack、TypeScript编译器等）的配置选项来实现。对于TypeScript，需要在tsconfig.json中设置"sourceMap": true。

两者的关系和选择直接使用tsc生成sourcemap：如果你直接使用tsc编译TypeScript代码，并且没有使用Webpack或其他模块打包器，那么sourcemap的生成完全由tsc负责。在Webpack项目中生成sourcemap：在使用Webpack管理项目时，即使tsc配置中启用了sourcemap，Webpack的配置也会影响最终的sourcemap生成。在这种情况下，推荐在Webpack配置中指定sourcemap的生成方式，因为Webpack不仅处理TypeScript文件，还处理项目中的其他资源和模块依赖。通过Webpack生成的sourcemap可以提供更完整的调试信息。总结在只使用tsc的项目中，sourcemap的生成由tsc负责。在使用Webpack的项目中，即使tsc可以生成sourcemap，最终的sourcemap通常由Webpack根据其配置生成，以确保所有资源和模块的映射信息都被正确处理。因此，理解项目的构建流程和工具配置对于正确生成和使用sourcemap至关重要。

正确的源码映射路径：源码映射文件（.map）应正确指向原始源文件。这意味着sources字段在.map文件中应正确反映源文件的相对路径或绝对路径。
源码映射注释：在编译后的JavaScript文件的末尾，应包含一个指向相应.map文件的注释（例如，//# sourceMappingURL=index.js.map）。这帮助调试器找到正确的源码映射文件。

VS Code调试配置（`launch.json`）关键点

启用源码映射：确保在launch.json配置中设置了"sourceMaps": true，以告诉VS Code调试器使用源码映射。
配置outFiles：使用outFiles属性指定编译后的JavaScript文件的位置。这应该覆盖包含.map文件的目录。正确的outFiles配置帮助VS Code找到并使用源码映射文件。
正确的program路径：确保program属性指向项目的入口文件。对于Node.js项目，这通常是主.js文件。如果你直接调试TypeScript文件，确保你的构建任务（preLaunchTask）在调试会话开始前运行。

示例：ts-node-dev 调试TypeScript项目的`launch.json`

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "name": "ts-node-dev",
      "request": "launch",
      "runtimeExecutable": "npx",
      "args": ["ts-node-dev", "--respawn", "--transpile-only", "${file}"],
      "console": "integratedTerminal",
      "outFiles": ["${workspaceFolder}/**/*.js"],
      "sourceMaps": true
    }
  ]
}

981377660LMT commented 4 months ago

--transpile-only选项：这个选项告诉ts-node-dev只进行代码转译，不进行类型检查。这可以加快启动速度，但意味着类型错误不会在运行时被捕获。如果你依赖于类型检查来发现错误，可能需要在开发流程中另外加入类型检查步骤。

981377660LMT commented 4 months ago

"--respawn"是ts-node-dev命令行选项之一，它的作用是在源文件发生变化时自动重启应用。这个选项使得ts-node-dev在开发过程中非常有用，因为它可以监视你的TypeScript文件的变化，并在每次保存文件时自动重新编译和运行应用，从而提供了一个快速的反馈循环

981377660LMT / ts