PhpStorm 2024.3 ヘルプ

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

対話式のコンソールペインには、スタックトレースと、コードにログインしたすべてのものが表示されます(たとえば、console.* を使用)。

コンソールペインも read-eval-print ループREPL)なので、そこに JavaScript コードスニペットを実行して、現在デバッグしているページと対話できます。

コンソールで JavaScript を実行する

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

  2. 該当する明細を選択して Enter を押します。PhpStorm はその値をコンソールに表示します。

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

ソースコードに移動する

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

    JavaScript interactive debugger console: navigation to source code
  • コンソールはスタックトレースも表示します。報告された問題の横にあるリンクをクリックすると、この問題が発生したコード行に移動します。

    JavaScript interactive debugger console: navigation to errors

メッセージを除外する

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

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

    Node.js interactive debugger console: filtering out messages by type

グループメッセージ

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

    Node.js interactive debugger console: log messages grouped

CSS スタイルを適用する

関連ページ:

Chrome での JavaScript のデバッグ

PhpStorm は、client-sideJavaScript コード用の組み込みデバッガーを提供します。以下の手順では、このデバッガーの使用を開始するための基本的な手順を説明します。始める前に:設定で JavaScript and TypeScript バンドルプラグインが有効になっていることを確認します。を押して設定を開き、を選択します。インストール済みタブをクリックします。検索フィールドに JavaScript and TypeScript と入力します。プラグインの詳細については、プラグイ...

JavaScript のテスト

PhpStorm を使用すると、Karma、Vitest、Jest、Protractor、Cucumber.js、Mocha、Node.js テストランナーを使用して JavaScript ユニットテストを実行およびデバッグできます。テスト結果はツリービューで確認でき、そこからテストソースに簡単に移動できます。テストのステータスは、エディターのテストの隣に表示され、すぐに実行またはデバッグするオプションがあります。Jest、Karma、Mocha については、PhpStorm のコードカバレッジ...

コードの実行 / デバッグ

簡単な方法:プログラムにパラメーターを渡さず、プログラムの開始前にアクションを実行する必要がない場合は、一時的な構成を使用してエディターまたはツールバーからプログラムを実行 / デバッグできます。現在のファイルを実行するエディターでファイルを開き、次のいずれかのオプションを使用して実行します。エディター領域の任意の場所を右クリックしてコンテキストメニューを開き、そこから実行および <script name> を選択します。エディターの上にあるツールバーで、ドロップダウンメニューから現在...

HTML

PhpStorm は、構文やエラーのハイライト、コードスタイルに応じたフォーマット、構造検証、コード補完、デバッグセッション中のオンザフライプレビュー(ライブ編集)やコードエディターの専用プレビュータブなど、HTML を強力にサポートします。HTML ツールプラグインを有効にするこの機能は、デフォルトで PhpStorm にバンドルされて有効になっている HTML ツールプラグインに依存しています。関連する機能が利用できない場合は、プラグインを無効にしていないことを確認してください。を押して設定を...

JavaScript デバッガーの構成

PhpStorm は、client-sideJavaScript コード用の組み込みデバッガーを提供します。デバッグセッションを開始すると、ビルトインデバッガーが自動的に起動します。デバッグが正常に行われるようにするには、組み込みの Web サーバーポートを指定して、PhpStorm が他のデバッガーオプションに提案しているデフォルト設定を受け入れるだけで十分です。始める前に設定で JavaScript and TypeScript バンドルプラグインが有効になっていることを確認します。を押して設...