在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應用程序

回答

相關問題