デバッグ

コアリポジトリへの貢献、ローダー/プラグインの作成、または複雑なプロジェクトでの作業を行う場合、デバッグツールはワークフローの中心となる可能性があります。大規模プロジェクトのパフォーマンスの低下や役に立たないトレースバックなど、問題が発生した場合、次のユーティリティを使用すると、問題の解決が容易になります。

• NodeとCLIを介して利用可能なstatsデータ。
• Chrome **開発ツール**と最新のNode.jsバージョン。

統計情報

このデータを手動で精査するか、ツールを使用して処理するかにかかわらず、statsデータはビルドの問題をデバッグする際に非常に役立ちます。内容は専用のページがあるのでここでは詳しく説明しませんが、次の情報を見つけるために使用できることを知っておいてください。

• 各モジュールの内容。
• 各チャンクに含まれるモジュール。
• モジュールごとのコンパイルと解決の統計情報。
• ビルドエラーと警告。
• モジュール間の関係。
• その他多数…

さらに、公式のanalyzeツールやその他のツールは、このデータを受け入れてさまざまな方法で視覚化します。

開発ツール

簡単なシナリオではconsoleステートメントがうまく機能する場合がありますが、より堅牢なソリューションが必要になる場合があります。ほとんどのフロントエンド開発者がすでに知っているように、Chrome開発ツールはウェブアプリケーションのデバッグにおいて非常に役立ちますが、*それだけではありません*。Node v6.3.0以降、開発者は組み込みの--inspectフラグを使用して、開発ツールでノードプログラムをデバッグできます。

node --inspectを使用してwebpackを起動してみましょう。

npm run buildなどのnpmスクリプトは実行できないため、node_modulesの完全なパスを指定する必要があります。

node --inspect ./node_modules/webpack/bin/webpack.js

次のような出力が表示されます。

Debugger listening on ws://127.0.0.1:9229/c624201a-250f-416e-a018-300bbec7be2c
For help see https://node.dokyumento.jp/en/docs/inspector

ブラウザでchrome://inspectに移動すると、*リモートターゲット*ヘッダーの下に検査したアクティブなスクリプトが表示されます。各スクリプトの下にある「inspect」リンクをクリックして専用のデバッガーを開くか、自動的に接続されるセッション用の*ノード用の専用開発ツールを開く*リンクをクリックします。スクリプトを--inspectするたびに自動的に開発ツールタブを開く便利なChromeプラグインであるNiM拡張機能も確認できます。

スクリプトの最初のステートメントで中断し、ソースをステップ実行してブレークポイントを設定し、必要に応じてビルドの開始/停止を行うことができる--inspect-brkフラグを使用することをお勧めします。また、スクリプトに引数を渡すこともできます。たとえば、複数の構成ファイルがある場合は、--config webpack.prod.jsを渡して、デバッグする構成を指定できます。