対話型デバッガーコンソール
対話式のコンソールペインには、スタックトレースと、コードにログインしたすべてのものが表示されます(たとえば、console.*
を使用)。
コンソールペインも read-eval-print ループ(REPL)なので、そこに JavaScript コードスニペットを実行して、現在デバッグしているページと対話できます。
コンソールで JavaScript を実行する
入力フィールドに
>
でステートメントの入力を始めます。タイプするにつれて、JetBrains Rider は完成のための異形を提案します。該当する明細を選択して Enter を押します。JetBrains Rider はその値をコンソールに表示します。
JetBrains Rider はオブジェクトのプレビューを表示するため、展開する必要はありません。オブジェクトをさらに展開すると、そのオブジェクトのプロパティのみの概要が表示されます。
__proto__
の内容はデフォルトで非表示になっています。
ソースコードに移動する
console.*
の出力を含む各行に、JetBrains Rider はファイルの名前とそれが呼び出された行を表示します。このリンクをクリックすると、ソースコード内の呼び出しに移動します。コンソールはスタックトレースも表示します。報告された問題の横にあるリンクをクリックすると、この問題が発生したコード行に移動します。
メッセージを除外する
コンソールタブでは、オブジェクトがツリービューで表示され、デフォルトではスタックトレースが折りたたまれています。警告 console.warn()
、エラー console.error()
、情報 console.info()
メッセージには、わかりやすくするために異なるアイコンと背景色があります。
特定の種類のログメッセージを非表示にするには、 をクリックして、除外する重大度を選択します。
グループメッセージ
console.group()
とconsole.groupEnd()
を使用してグループ化されたログメッセージはツリーとして表示されます。デフォルトで折りたたまれた出力を表示するには、console.groupCollapsed()
を使います。
CSS スタイルを適用する
ログメッセージにスタイルを適用するには、CSS と
%c
マーカーを使用します。詳細は、CSS を使用したコンソール出力のスタイル(英語)を参照してください。
関連ページ:
Chrome での JavaScript のデバッグ
JetBrains Rider は、client-sideJavaScript コード用の組み込みデバッガーを提供します。以下のビデオと手順では、このデバッガーの使用を開始するための基本的な手順を説明しています。始める前に:設定で JavaScript と TypeScript バンドルプラグインが有効になっていることを確認します。を押して設定を開き、を選択します。インストール済みタブをクリックします。検索フィールドに JavaScript と TypeScript と入力します。プラグインの詳細に...
JavaScript のテスト
JetBrains Rider を使用すると、Karma、Vitest、Jest、Protractor、Cucumber.js、Mocha、Node.js テストランナーを使用して JavaScript ユニットテストを実行およびデバッグできます。テスト結果はツリービューで確認でき、そこからテストソースに簡単に移動できます。テストのステータスは、エディターのテストの隣に表示され、すぐに実行またはデバッグするオプションがあります。Jest、Karma、Mocha については、JetBrains R...
実行
JetBrains Rider を使用すると、サポートされている任意の言語でコードを実行できます。JetBrains Rider でコードを実行するたびに、特定の実行 / デバッグ構成を使用しています。これにより、ソリューションのどの部分が実行され、どのパラメーターと環境を使用するかが定義されます。単一の静的メソッドの実行、アプリケーションの開始、単体テストの実行、Web サーバーでのコードの実行、マルチプロセス環境のデバッグなどを、さまざまな種類の実行 / デバッグ構成で実行できます。各構成は...
言語およびフレームワーク: HTML
JetBrains Rider は、構文やエラーのハイライト、コードスタイルに応じたフォーマット、構造検証、コード補完、デバッグセッション中のオンザフライプレビュー(ライブ編集)やコードエディターの専用プレビュータブなど、HTML を強力にサポートします。HTML ツールプラグインを有効にするこの機能は、デフォルトで JetBrains Rider にバンドルされて有効になっている HTML ツールプラグインに依存しています。関連する機能が利用できない場合は、プラグインを無効にしていないことを確認...
JavaScript デバッガーの構成
JetBrains Rider は、client-sideJavaScript コード用の組み込みデバッガーを提供します。デバッグセッションを開始すると、ビルトインデバッガーが自動的に起動します。デバッグが正常に行われるようにするには、組み込みの Web サーバーポートを指定して、JetBrains Rider が他のデバッガーオプションに提案しているデフォルト設定を受け入れるだけで十分です。始める前に設定で JavaScript と TypeScript バンドルプラグインが有効になっていることを...