在IntelliJ / WebStorm中调试webpack / browserify React应用程序

时间:2017-02-19 00:24:21

标签: javascript debugging intellij-idea webstorm

我遵循了几乎所有在线发现的指南,我无法在断点处使用IntelliJ调试器。

我正在使用路由器开发React应用程序。后端在Play Framework中。

我尝试使用生成源地图。这来自gulpFiles:

var bundler = watchify(browserify('./frontend/app.jsx', { debug: true }).transform(babel, {
        presets: ["es2015","react","stage-3"],
        plugins: [
            "transform-decorators-legacy",
            "transform-runtime"
        ]
    }));

生成了源地图;我能够在Chrome调试器中进行调试,但我无法使用IntelliJ。我只看到控制台输出。

我尝试使用webpack生成:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'public/javascripts');
var APP_DIR = path.resolve(__dirname, 'frontend');

var config = {
    entry: APP_DIR + '/app.jsx',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    module : {
        loaders : [
            {
                test : /\.jsx?/,
                include : APP_DIR,
                loader : 'babel-loader'
            }
        ]
    },
    devtool: "source-map"

};

module.exports = config;

同样的事情我不能在IntelliJ的断点处停下来。

我像这样配置了JavaScript调试:

Name: React Debug
URL: http://localhost:9000/index
Remote URLs of local files (optional) : ./frontend

仍然没有运气和断点不起作用。我错过了什么?

1 个答案:

答案 0 :(得分:0)

我设法让它与Webpack一起工作。 我使用npm任务来运行webpack而不是:

webpack -d --watch
正如所建议的那样。我用过这个:

webpack --debug --output-pathinfo --watch