WebStormのWebPackのデバッグ11

Question

ソースマッピングを使用してWebStormのWebPackにバンドルされているjavascriptアプリケーションをデバッグしようとしています。

var path = require('path'); 

module.exports = { 
    debug: true, 
    devtool: 'source-map', 

    context: path.join(__dirname, 'js'), 
    entry: './main.js', 
    output: { 
     path: path.join(__dirname, 'Built'), 
     filename: '[name].bundle.js' 
    } 
} 

ソースマップが生成され、このようになりますされています：今

{"version":3,"sources":["webpack:///webpack/bootstrap 2919a5f916c286b8e21a","webpack:///./main.js","webpack:///./structure_editor/content.js","webpack:///./structure_editor/test_bundle.js"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;;;;;;ACtCA;AACA;;AAEA;AACA;;AAEA;;AAEA;;AAEA;;;;;;;ACVA,8C;;;;;;ACAA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA,6B","file":"main.bundle.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 2919a5f916c286b8e21a\n **/","document.write(require(\"./structure_editor/content.js\"));\r\nvar TestBundle = require(\"./structure_editor/test_bundle.js\");\r\n\r\nvar test = new TestBundle();\r\ntest.testMe();\r\n\r\n//var StructureEditor = require(\"./structure_editor/structure_editor.js\");\r\n\r\n//var editor = new StructureEditor(0x00FF00);\r\n\r\n//editor.run();\r\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./main.js\n ** module id = 0\n ** module chunks = 0\n **/","module.exports = \"It works from content.js.\";\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./structure_editor/content.js\n ** module id = 1\n ** module chunks = 0\n **/","var TestBundle = function() {\r\n \r\n}\r\n\r\nTestBundle.prototype.testMe = function() {\r\n var a = 10;\r\n var b = 12;\r\n var c = a + b;\r\n document.write(c);\r\n};\r\n\r\nmodule.exports = TestBundle;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./structure_editor/test_bundle.js\n ** module id = 2\n ** module chunks = 0\n **/"],"sourceRoot":""} 

、私が発見したWebStorm 11が完全にWebPACKのを支援することを言及し、それはです私の現在のwebpack.config.jsは、このようになりますソースマッピング[例えば。 here]ですが、情報はほとんどありません。提供された設定でのデバッグは機能せず、ブレークポイントは無視されます。多くの試行の後、私はデバッグを行います（正確には、他の試行でコードが破損する可能性がありますが、行とコードの実行が一致しない）という唯一の設定を見つけました。devtool: 'eval'を設定します。しかし、これは私が使用しようとしているソースマッピングとは関係ありません。

生成されたソースマップは一般的なすべてのブラウザで機能し、元のソースをデバッグできます。なぜWebStormが機能しないのですか？ソースマップを使用する前にWebStormで何らかの設定を行う必要がありますか？

私が使用している現在のWSバージョンは142.4148で、デバッグはクロム拡張で行われています。古いWS 10バージョン（WebPackでうまくいくと思われていたという理由だけでWS 11を使用しています）でも、ここでデバッグをセットアップする方法やチュートリアルはありがたいです。

Answer 1

WebpackソースマップはほとんどがサポートされていますWebStorm 11では、リモートURLマッピングをJavascript Debugで実行する必要があります。WebStormがWebpackの出力ファイル（ソースマップを含む）を持つディレクトリと、sourcemapで指定されたソースファイルへのパスをプロジェクト。したがって、コンパイルされたスクリプトWebサーバーのURLとローカルパスのマッピングを指定し、ソースマップのURLをプロジェクトのローカルパスにマップする必要があります。 奇妙に聞こえますが、それほど複雑ではありません。あなたのような設定ファイルの場合、バンドルファイルとソースマップがある'Built'ディレクトリにはリモートURL http://localhost:63342/webpack/Built、'js'ディレクトリにはwebpack:///. - を指定する必要があります。これは、我々はすぐにWebPACKのデバッグに関するブログ記事を公開する予定 は、私は時間のために、この上で私の脳をしぼっ...今のところ、私は簡単な例

Answer 2

ためhttps://github.com/prigara/debugging-webpackを見て提案することができます...私のため正常に動作し、私はそれが他人を助けることができることを願っていますhttps://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/

webstormインスタンスを設定するには、指示に従いますが、webpack-dev-serverで実行しないでください。WEBrick ::のような別のWebサーバを使用してください。 Rubyの鉱山/レールや組み込みのデバッグサーバで使用されるHTTPServer。なんらかの理由で、webpack-dev-serverはソースマップを行番号と正しく関連付けていません。

Answer 3

私はあなたが

デバッガの文を置くことができることを追加します。

あなたのjavascript/typescriptでは、角度またはvue2のフレームワークファイルでさえも。

URLへのパスマッピングが機能しなくても、それはとにかく進んでいきます。