対話型デバッガーコンソールの使用

デバッガーコンソールで JavaScript を実行する

1. 入力フィールドに > でステートメントの入力を始めます。タイプするにつれて、WebStorm は完成のための異形を提案します。

2. 関連するステートメントを選択し、Enter を押します。WebStorm は、デバッガーコンソールにその値を表示します。

   

   WebStorm はオブジェクトのプレビューを表示するため、展開する必要はありません。オブジェクトを展開すると、そのオブジェクトのプロパティの概要のみが表示され、__proto__ の内容はデフォルトで非表示になります。

ソースコードに移動する

• console.* の出力を含む各行に、WebStorm はファイルの名前とそれが呼び出された行を表示します。このリンクをクリックすると、ソースコード内の呼び出しに移動します。

  

• デバッガーコンソールはスタックトレースも表示します。報告された問題の横にあるリンクをクリックすると、この問題が発生したコード行に移動します。

  

メッセージを除外する

デバッガーコンソールタブでは、オブジェクトがツリービューで表示され、デフォルトではスタックトレースが折りたたまれています。警告 console.warn()、エラー console.error()、情報 console.info() メッセージには、わかりやすくするために異なるアイコンと背景色があります。

• 特定の種類のログメッセージを非表示にするには、 をクリックして、除外する重大度を選択します。

  

グループメッセージ

• console.group() と console.groupEnd() を使用してグループ化されたログメッセージはツリーとして表示されます。デフォルトで折りたたまれた出力を表示するには、console.groupCollapsed() を使います。

  

CSS スタイルを適用する

• ログメッセージにスタイルを適用するには、CSS と %c マーカーを使用します。

  

  詳細は、CSS を使用したコンソール出力のスタイル(英語)を参照してください。