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

我跟踪了几乎所有我在网上找到的指南，并且我无法在IntelliJ中的调试器停在断点处。在IntelliJ/WebStorm中调试webpack/browserify React应用程序

我正在开发与路由器的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

仍然没有运气和断点不工作。我在想什么？

来源

2017-02-19 Ľubomír

“的本地文件远程URL”显然是错误的 - 它应该是网页的网址，而不是在文件系统中的路径 – lena

又见https://blog.jetbrains.com/webstorm/2017/ 01 /调试反应的应用程式/ – lena

我设法让它与Webpack一起工作。我用NPM任务的WebPack而不是和运行：

webpack -d --watch

的建议比比皆是。我用这个：

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

来源

2017-02-19 15:23:43

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

回答

相关问题