使用源映射和 webpack 调试 typescript

Posted 2023-03-13

【中文标题】使用源映射和 webpack 调试 typescript

【英文标题】：Debugging typescript with source maps and webpack

【发布时间】：2017-08-10 10:13:42

【问题描述】：

我有一个用 Typescript 编写的项目，我希望能够对其进行调试（在 Chrome Dev Tools 或 Intellij 中）。

起初我看到不支持 Typescript 的 import 功能。所以我尝试使用Webpack 和webpack dev server 但这完全失败了。即使我的应用程序正在运行（由于有一个包含所有代码的 bundle.js 文件），它也无法将代码与给定的源映射匹配，这使得调试变得不可能。

在我停止使用 webpack 后，我尝试添加 require.js 作为依赖项来解决我遇到的 require is not defined 错误。那行得通，但现在我又被卡住了：

未捕获的引用错误：未定义导出

我不知道为什么这不起作用。我想让我的应用程序工作（通过 webpack 或者能够在编译后解析导入语句）并且仍然能够使用 typescript 生成的源映射来调试代码。我怎样才能做到这一点？

我会附上我的配置文件，以防万一那里缺少某些东西：

tsconfig.json

  "compilerOptions": 
    "module": "commonjs",
    "target": "es6",
    "sourceMap": true
  ,
  "include": [
    "scripts/**/*"
  ],
  "exclude": [
    "node_modules"
  ]

webpack.config.js：

module.exports = 
    resolve: 
        extensions: [/*'.ts', '.tsx', */'.js']
    ,
    entry: './scripts/main.js',
    output: 
        path: '/',
        filename: 'app.js'
    ,
    module: 
        rules: [
             test: /\.js$/, loader: 'source-map-loader', enforce: 'pre' 
        ],
        loaders: [
             test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/ ,
            test: /\.css$/, loader: "style!css"
        ]
    ,
    watch: true
;

【参考方案1】：

我将在这里发布答案。此答案可能对您有用（请参阅第 5 步）。它因人而异。经过这么多天的研究，来自GitHub 的 robin-a-meade 的帖子最终确定了这一点。

在开始之前，主要问题似乎在于源映射在 VS Code 调试配置文件中的 URL，以及它（VS Code）如何看待应用程序。这独立于您正在使用的任何后端堆栈（例如 Express、.NET Core、Django 等）。您唯一需要注意的是，当您的应用程序运行时，Google Chrome 浏览器会成功加载生成的源映射。

使用：

Visual Studio 代码 1.13.1 版 NodeJS 7.4.0 Windows 10 64 位 Webpack 2.5（也应该适用于 Webpack 3） TypeScript 2.3

安装 Google Chrome 扩展程序：

1) 点击左侧的方形图标。

2,3) 键入不带逗号的“Debugger for Chrome”并点击安装。

配置调试器：

4) 点击错误图标。

5) 点击齿轮图标。这将打开“launch.json”，用于在 Visual Studio Code 中配置调试。

现在。这是它变得非常棘手的地方。这是它可能适合也可能不适合您的部分。

再次感谢 robin-a-meade from GitHub 的代码使其工作：

6) 输入以下内容。这将启动一个在 URL 中带有 http://localhost 的 Google Chrome 实例。然后，它将使用 webpack:// 路径来搜索 Webpack 映射。这真的很棘手，您可能必须尝试使用​​不同的组合才能看到哪个有效。

 
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost",
            "sourceMaps": true,
            "webRoot": "$workspaceRoot",
            "diagnosticLogging": true,
            "sourceMapPathOverrides": 
                "webpack:///./*": "$webRoot/*"
            
        

如果您使用的是 Firefox，请尝试使用这个：

            "name": "Launch Firefox",
            "type": "firefox",
            "firefoxExecutable": "C:/Program Files/Mozilla Firefox/firefox.exe",
            "request": "launch",
            "reAttach": true,
            "webRoot": "$workspaceRoot",
            "sourceMaps": "server",

            "pathMappings": [
                
                    "url":  "webpack:///",
                    "path": "$webRoot/"
                
            ],
            "url": "localhost"
        

Webpack 配置 添加：

开发工具：“源地图”

到你的 webpack 配置。这应该在 modules.export 对象下。

使用 Webpack 运行/构建项目；这应该生成源映射（检查是否生成了源映射，否则将不起作用！）：

那么你应该准备好了： 在调试中按下“播放按钮”，它应该可以工作了！

请记住，任何未导入到您的主 .js 文件（您拥有所有导入和要求的文件）的文件，将无法设置断点。

如果这不起作用，请查看此 URL 列表以帮助您解决问题。

https://github.com/angular/angular-cli/issues/2453（帮助我的奇迹页面） Debug webpack bundled node ts with Visual Studio Code VS Code: "Breakpoint ignored because generated code not found" error https://github.com/Microsoft/vscode-chrome-debug https://github.com/Microsoft/vscode/issues/25349 https://github.com/angular/angular-cli/issues/1223 https://github.com/Microsoft/vscode-chrome-debug/issues/40（页面底部） https://***.com/a/42405563/1057052

用于生成源映射： How do I generate sourcemaps when using babel and webpack?

【讨论】：

@Konstantine 您是否考虑将其重新标记为已接受的答案？它比现在的要多得多。

这里也值得一提 -- 获得 bundled.js 源映射后，尝试在浏览器开发控制台中对其进行调试，这样您就知道映射工作正常。

在 webpack 配置中有库选项时，sourceMapPathOverrides 的左侧部分遇到了一些问题。正确的是在index.map.js 文件的第一行。用星号替换 index.ts 使其工作。它看起来像："webpack://MyLib/./src/*": "$workspaceFolder/src/*"。还将debugger; 行添加到.ts 文件有助于查看调试器尝试打开的路径。

【参考方案2】：

要启用 webpack 调试，请将 devtool: "source-map" 添加到您的 webpack.config.js。

要使用require.js 加载文件，请将"module": "amd" 更改为tsconfig.json。 require.js 不支持加载 commonjs 模块。

【讨论】：

非常感谢！这两种方式实际上都奏效了。我可以通过webpack-dev-server 和通过 IntelliJ 使用正确映射和转译的 Typescript 通过 chrome 进行调试