typescript 使用源映射和 webpack 调试打字稿

Debugging typescript with source maps and webpack

提问by Konstantine

I have project written in Typescript and I want to be able to debug it (either in Chrome Dev Toolsor in Intellij).

我有用 Typescript 编写的项目，我希望能够对其进行调试（Chrome Dev Tools在Intellij.

At first I saw that Typescript's importfunctionality was not supported. So I tried using Webpackalong with webpack dev serverbut this failed completely. Even though my application was working (due to having a single bundle.jsfile that has all the code) it would be unable to match the code with the given source maps and this making debugging impossible.

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

After I stopped using webpack I tried adding require.jsas a dependency to resolve the require is not definederror I was getting. That worked but now I'm stuck again and getting this:

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

Uncaught ReferenceError: exports is not defined

未捕获的 ReferenceError：未定义导出

I have no idea why this isn't working. I want to be make my application work (either through webpack or being able to resolve import statements after transpilation) and still be able to debug the code using the typescript-produced source-maps. How can I achieve this?

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

I'm attaching my config files in case there is something missing there:

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

tsconfig.json

配置文件

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

webpack.config.js:

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
};

采纳答案by Saravana

To enable debugging with webpack, add devtool: "source-map"to your webpack.config.js.

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

To load files using require.js, change "module": "amd"in tsconfig.json. require.jsdoes not support loading commonjsmodules.

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

回答by Jose A

I'm going to post an answer here. This answer may notwork for you (See Step 5). It varies a lot from person to person. After so many days spent in research, robin-a-meade's post from GitHubwas the one that nailed it.

我将在这里发布答案。此答案可能不适合您（请参阅步骤 5）。它因人而异。经过这么多天的研究，GitHub 上robin-a-meade 的帖子成功了。

Before starting, the main problem seems to lie in the source mapping's URL of inside the VS Code Debugging Configuration file, and how it (VS Code) sees the application. This is independent from any back-end stack you're using (E.g Express, .NET Core, Django, etc.). The only thing you need to be aware of, is that Google Chrome successfully loads the generated source map when your application is running.

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

Used:

用过的：

• Visual Studio Code ver 1.13.1
• NodeJS 7.4.0
• Windows 10 64-bit
• Webpack 2.5 (Should apply for Webpack 3 as well)
• TypeScript 2.3

• Visual Studio 代码 1.13.1 版
• 节点 7.4.0
• 视窗 10 64 位
• Webpack 2.5（也应适用于 Webpack 3）
• 打字稿 2.3

Install the Google Chrome Extension:

安装谷歌浏览器扩展：

1) Click on the square icon on the left.

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

2,3) type "Debugger for Chrome" without commas and click install.

2,3) 键入不带逗号的“Debugger for Chrome”，然后单击安装。

Configure the debugger:

配置调试器：

4) Click on the bug icon.

4) 单击错误图标。

5) Click on the gear icon. This will open "launch.json" which is used for configuring the debugging in Visual Studio Code.

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

Now. This is where it gets really tricky. This is the part that it may or may not work for you.

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

Again, thanks goes to robin-a-meade from GitHubwhose code made it work:

再次感谢来自 GitHub的robin-a-meade，他的代码使它工作：

6) Enter the following. This is going to launch a Google Chrome instance with http://localhostin the URL. Then, it will use the webpack://path to search for the Webpack mappings. This is really tricky and you may have to try with different combinations to see which one works.

6) 输入以下内容。这将http://localhost在 URL 中启动一个 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}/*"
            }
        }

If you're using Firefox, try using this one:

如果您使用的是 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 ConfigurationAdd:

Webpack 配置添加：

devtool : "source-map"

开发工具：“源地图”

To your webpack configuration. This should go under the modules.export object.

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

Run/Build the project with Webpack; this should generate the source-map (Check if the source map is generated, otherwise nothing will work!):

使用 Webpack 运行/构建项目；这应该生成源映射（检查源映射是否生成，否则什么都不会工作！）：

Then you should be ready to go: Press the "Play button" in the debugging and it should be working!

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

Remember, any file that is not imported to your main .jsfile (where you have all of your imports and requires), will not be able to have a breakpoint set.

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

If that didn't work, check this list of URLs that can help you out.

如果这不起作用，请查看可以帮助您的 URL 列表。

1. https://github.com/angular/angular-cli/issues/2453(Miracle page that helped me out)
2. Debug webpack bundled node ts with Visual Studio Code
3. VS Code: "Breakpoint ignored because generated code not found" error
4. https://github.com/Microsoft/vscode-chrome-debug
5. https://github.com/Microsoft/vscode/issues/25349
6. https://github.com/angular/angular-cli/issues/1223
7. https://github.com/Microsoft/vscode-chrome-debug/issues/40(Bottom of the page)
8. https://stackoverflow.com/a/42405563/1057052

1. https://github.com/angular/angular-cli/issues/2453（帮助我的奇迹页面）
2. 使用 Visual Studio Code 调试 webpack 捆绑节点 ts
3. VS Code：“断点被忽略，因为未找到生成的代码”错误
4. https://github.com/Microsoft/vscode-chrome-debug
5. https://github.com/Microsoft/vscode/issues/25349
6. https://github.com/angular/angular-cli/issues/1223
7. https://github.com/Microsoft/vscode-chrome-debug/issues/40（页面底部）
8. https://stackoverflow.com/a/42405563/1057052

For generating soruce maps: How do I generate sourcemaps when using babel and webpack?

用于生成源映射： 如何在使用 babel 和 webpack 时生成源映射？