Question

我使用webstorm的预定义项目模板在webstorm中创建了一个示例react starter kit项目，并尝试在调试模式下设置断点。

我首先使用npm run build构建项目，然后将调试配置设置为运行build/server.js。

然而，它无法识别原始源文件中的任何断点，似乎忽略了源图。如何让它识别源图并允许我在源文件中设置断点以及步入源文件。

反应初学者工具包回购中存在这个问题：https://github.com/kriasoft/react-starter-kit/issues/121但我无法看到解决方案的内容，与评论者不同，我甚至无法让它进入源文件......它只是停留在生成的js文件上。

Answer 1

唉... WebStorm 10不支持Webpack生成的源映射。 WebStorm 11对客户端应用程序部分支持它们（请参阅http://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/），但Node.js不支持它们。因此，您无法在WebStorm 11中调试server.js，但您可以调试客户端。为此，请尝试以下操作：

更改 src / config.js 中的 appConfig ，如下所示：

const appConfig = merge({}, config, {
  entry: [
    ...(WATCH ? ['webpack-hot-middleware/client'] : []),
    './src/app.js',
  ],
  output: {
    path: path.join(__dirname, '../build/public'),
    filename: 'app.js',
  },
devtool: 'source-map',
module: {
    loaders: [
      WATCH ? {
        ...JS_LOADER,
        query: {
          // Wraps all React components into arbitrary transforms
          // https://github.com/gaearon/babel-plugin-react-transform
          plugins: ['react-transform'],
          extra: {
            'react-transform': {
              transforms: [
                {
                  transform: 'react-transform-hmr',
                  imports: ['react'],
                  locals: ['module'],
                }, {
                  transform: 'react-transform-catch-errors',
                  imports: ['react', 'redbox-react'],
                },
              ],
            },
          },
        },
      } : JS_LOADER,
      ...config.module.loaders,
      {
        test: /\.css$/,
        loader: 'style-loader/useable!css-loader!postcss-loader',
      },
    ],
  },
});

设置javascript调试运行配置：

网址：http://localhost:5000 远程URL：将项目根文件夹映射到＆＃39; webpack:///path/to/react-starter-kit＆＃39;，例如＆＃39; webpack:///C:/WebstormProjects/react-starter-kit＆＃39; 将build/public映射到http://localhost:5000

这不能很好地工作，但一般情况下工作 - src / routes.js，src / app.js中的断点被点击

如何使用react starter kit让调试器识别webstorm 10中的源图

1 个答案: