2

watchify/browserify を使用して、このコマンドでデバッグ ソース マップを含むバンドルを作成します。

watchify main.js -o bundle.js -v -d 

Chrome DevTools を使用して結果のアプリをデバッグすると、元のネストされたフォルダーの場所でソース ファイルにアクセスでき、DevTools の [ソース] パネルに表示されます。

ここに画像の説明を入力

ただし、このコマンドで反応を実行すると、

watchify main.js -t reactify -o bundle.js -v -d

Chrome DevTools は、同じフォルダー内のすべてのソース ファイルを表示しbundle.js、ファイル名には完全なローカル パス名が含まれます。

ここに画像の説明を入力

ファイルが長すぎて表示できないため、ソースパネルと個々のタブの両方で正しいファイルを識別するのが面倒で難しいと感じています。

ソースファイルが元のフォルダーの場所に表示されるように、これを回避する方法を知っている人はいますか (pic 1 のように)。どうも

4

1 に答える 1