IntelliJ IDEA TypeScriptWebpack 调试仅适用于 JavaScript 断点

typescript

IntelliJ IDEA typescript/Webpack 调试仅适用于 JavaScript 断点

IntelliJ IDEA是一款功能强大的集成开发环境（IDE），用于开发各种语言和技术。其中，typescript是一种由微软开发的JavaScript的超集，它添加了静态类型和其他一些功能。Webpack则是一个模块打包器，用于将各种资源（包括JavaScript文件）打包成一个或多个bundle。

然而，对于使用IntelliJ IDEA进行typescript/Webpack开发的开发人员来说，可能会面临一个问题：在调试过程中，只能在JavaScript代码中设置断点，而无法在typescript代码中设置断点。这意味着在调试typescript代码时，无法直接查看变量值、执行上下文等信息。

案例代码和问题描述

假设我们有一个简单的typescript文件，其中包含一个类和一个方法。我们希望能够在方法中设置断点，以便在调试过程中观察变量的值。

typescript
class MyClass {
  myMethod() {
    let myVariable = "Hello, world!";
    console.log(myVariable);
  }
}
const myInstance = new MyClass();
myInstance.myMethod();

在IntelliJ IDEA中，我们可以通过配置Webpack来将typescript文件编译为JavaScript文件，并使用Webpack的调试功能。然而，即使我们在typescript文件中设置了断点，当我们运行调试会话时，断点并不会被命中。

解决方案

虽然IntelliJ IDEA本身不支持在typescript中设置断点，但我们可以通过在Webpack配置中添加一些插件来解决这个问题。

首先，我们需要安装并配置source-map-loader插件。这个插件可以将typescript文件中的源映射（source maps）加载到调试器中，以便能够在typescript代码中设置断点。

Javascript
// webpack.config.JS
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
            },
          },
        ],
      },
      {
        enforce: 'pre',
        test: /\.JS$/,
        loader: 'source-map-loader',
      },
    ],
  },
  // ...
};

接下来，我们需要在IntelliJ IDEA的调试配置中启用“JavaScript Debugger”插件，并在“Debug”标签页中设置相关选项。具体来说，我们需要启用“Support sourcemaps”选项，并确保“Generated code”选项被设置为“JavaScript”。这样，IntelliJ IDEA就能够正确加载typescript源映射，并在typescript代码中设置断点。

现在，当我们再次运行调试会话时，我们就可以在typescript代码中设置断点，并观察变量的值和执行上下文了。

尽管IntelliJ IDEA本身在typescript/Webpack调试中仅支持JavaScript断点，但我们可以通过配置Webpack和IntelliJ IDEA来解决这个问题。通过安装并配置source-map-loader插件，并在IntelliJ IDEA的调试配置中启用相应选项，我们可以在typescript代码中设置断点，并获得更好的调试体验。

希望本文能帮助到使用IntelliJ IDEA进行typescript/Webpack开发的开发人员，提高他们的调试效率和开发体验。