対話型デバッガーコンソールの使用
Node.js アプリケーションをデバッグすると、WebStorm は デバッグ ツールウィンドウにコンソールタブが プロセスコンソール と デバッガーコンソール の 2 つ表示されます。
プロセスコンソール タブには、ノードプロセス自体の出力、つまり process.stdout(英語) と process.stderr(英語) に直接書き込まれるか、 console.*(英語) を使用してログに記録されるすべての出力が表示されます。
デバッガーコンソール では、JavaScript コードスニペットを実行して console.*(英語) メッセージを表示できます。
デバッガーコンソールで JavaScript を実行する
入力フィールドに
>でステートメントの入力を始めます。 入力中に、WebStorm は補完の候補を提案します。該当する明細を選択して Enter を押します。 WebStorm はその値をデバッガーコンソールに表示します。
WebStorm はオブジェクトのプレビューを表示するので、展開する必要はありません。 オブジェクトを展開すると、そのオブジェクトのプロパティの概要のみが表示され、
__proto__の内容はデフォルトで非表示になります。
ソースコードに移動する
console.*の出力がある各行で、WebStorm はファイル名と呼び出された行を表示します。 このリンクをクリックすると、ソースコード内の呼び出しに移動します。
デバッガーコンソール はスタックトレースも表示します。 報告された問題の横にあるリンクをクリックすると、この問題が発生したコード行に移動します。
メッセージを除外する
デバッガーコンソール タブでは、オブジェクトがツリービューで表示され、デフォルトではスタックトレースが折りたたまれています。 警告 console.warn() 、エラー console.error() 、情報 console.info() メッセージには、わかりやすくするために異なるアイコンと背景色があります。
特定の種類のログメッセージを非表示にするには、
をクリックして、除外する重大度を選択します。
グループメッセージ
console.group()とconsole.groupEnd()を使用してグループ化されたログメッセージはツリーとして表示されます。 デフォルトで折りたたまれた出力を表示するには、console.groupCollapsed()を使います。
CSS スタイルを適用する
ログメッセージにスタイルを適用するには、CSS と
%cマーカーを使用します。
詳細は、 CSS を使用したコンソール出力のスタイル(英語)を参照してください。