IntelliJ IDEA 2020.3 ヘルプ

Firefox で JavaScript をデバッグする

IntelliJ IDEA を使用すると、Firefox リモートデバッグ機能を使用して、Firefox バージョン 36 以降でクライアント側の JavaScript をデバッグできます。ただし、以下の理由から、Chrome または Chrome ファミリの他のブラウザーを使用することを強くお勧めします。

  • IntelliJ IDEA は、FireFox でのデバッグセッション中のソースマップ(英語)をサポートしていません。これは、圧縮された JavaScript またはマシンで生成された JavaScript のデバッグをブロックします。

  • Firefox でデバッグする場合、HTML、CSS、または JavaScript コードの変更をその場でプレビューすることはできません。この機能はライブ編集と呼ばれ、Google Chrome(英語) でのみサポートされています。

IntelliJ IDEA 内蔵 Web サーバーまたは外部サーバー上で実行されているアプリケーションをデバッグできます。

始める前に

  • 設定 / 環境設定 | プラグインページで JavaScript デバッガーバンドルプラグインが有効になっていることを確認してください。詳細については、プラグインの管理を参照してください。

Firefox でリモートデバッグを有効にする

  1. Firefox ブラウザーを開き、ツールバーの Open menu をクリックして、Web 開発者 | トグルツールに移動します。開発ツールペインが開きます。

  2. ペインのツールバーで Customize Developer Tools をクリックし、リストから設定を選択して、詳細設定ブラウザーのクロムとアドオンのデバッグを有効にするおよびリモートのデバッグを有効にするチェックボックスを選択します。

    Selecting the Enable remote debugging and Enable browser chrome add-on debugging checkboxes

デバッガーサーバーで Firefox を再起動する

  • IntelliJ IDEA で、ターミナルツールウィンドウ Alt+F12 を開き、コマンドプロンプトで <path to Firefox> -start-debugger-server <port number> と入力します。後で、実行構成でこのポート番号を指定します。任意のポート番号を設定できますが、6000 以降を使用することをお勧めします。

  • バージョン 61 以前では、Firefox を再起動する必要はありません

    Firefox を開き、ツール | 開発者 | 開発者ツールバーに移動して、ブラウザーの下部に表示されるコンソールに listen <port number> と入力します。

    Firefox version 61 and earlier: type Listen 6000
  • IntelliJ IDEA で、ターミナルツールウィンドウ Alt+F12 を開き、コマンドプロンプトで <path to Firefox> --start-debugger-server <port number> と入力します。後で、実行構成でこのポート番号を指定します。任意のポート番号を設定できますが、6000 以降を使用することをお勧めします。

  • バージョン 61 以前では、Firefox を再起動する必要はありません

    Firefox を開き、ツール | 開発者 | 開発者ツールバーに移動して、ブラウザーの下部に表示されるコンソールに listen <port number> と入力します。

    Firefox version 61 and earlier: type Listen 6000

アプリケーションのデバッグ

  1. 必要に応じて、JavaScript コードにブレークポイントを設定します。

  2. タイプ Firefox リモートのデバッグ構成を作成します。メインメニューから実行 | 構成の編集を選択し、ツールバーの the Add button をクリックして、リストから Firefox リモートを選択します。

  3. 表示される実行 / デバッグ構成: Firefox リモートダイアログで、ホストフィールドに localhost と入力します。ポートフィールドに、Firefox でリモートデバッグを有効にしたときに指定したポートを入力します。デフォルト値は 6000 です。

  4. Firefox でアプリケーションを開きます。コード実行後にブラウザーにアプリケーションが表示されます。つまり、設定したブレークポイントはまだ有効ではありません。

  5. ツールバーの実行 / デバッグ構成を選択リストで新しく作成した設定を選択して Debug をクリックします。

  6. 表示されるダイアログで、OK をクリックして、ブラウザーからの受信を許可します。

  7. ブラウザーでアプリケーションページをリフレッシュします。ページにはコード実行の結果が最初のブレークポイントまで表示されます。

  8. デバッグツールウィンドウで、通常どおりに続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し中断時検査し、実際の HTMLDOM を表示します。

サンプル

index.htmlindex.js を参照する index.htmlindex.js ファイルの 2 つのファイルで構成される単純なアプリケーションがあるとします。この例では、アプリケーションが IntelliJ IDEA ビルトインサーバーで実行されているときにデバッグする方法を示します。

  1. ターミナルツールウィンドウ(Alt+F12、コマンドプロンプトで start firefox --start-debugger-server 6000 と入力します。

  2. index.jsブレークポイントを設定します。

  3. Firefox リモートデバッグ構成を作成し、それぞれホストおよびポートフィールドに localhost および 6000 を入力します。

    ws_js_debug_ff_run_config.png

  4. エディターで index.html を開き、コンテキストメニューからブラウザーで開くを選択し、リストから Firefox を選択します:

    ws_js_debug_ff_open_in_browser.png
    ブラウザーが開き、IntelliJ IDEA ポート(現在は 63345)上で実行されているアプリケーションが表示されます。
    ws_js_debug_ff_open_in_browser_breakpoint_not_hit.png

  5. ツールバーのリストから、index_firefox_remote 構成を選択し、 Debug をクリックします。

    ws_js_debug_ff_choose_run_config.png
    表示される受信接続ダイアログで OK をクリックします。
    ws_js_debug_ff_incoming_connection.png
    ブラウザーでアプリケーションページをリフレッシュします。

関連ページ:

HTML、CSS、JavaScript でのライブ編集

ライブ編集機能を使用すると、HTML、CSS、または JavaScript コードに加えた変更は、ページを再ロードせずにブラウザーにすぐに表示されます。ライブ編集は、デバッグセッション中にのみ使用できます。詳細については、Chrome での JavaScript のデバッグを参照してください。ライブ編集は、HTML、CSS、または JavaScript を含むまたは生成する他のファイルタイプで機能します。Node.js アプリケーションのデバッグの場合、ライブ編集も使用できます。詳細については、...

プラグインを管理する

このサイトのメニューやアクション名表記は日本語です。IntelliJ IDEA を日本語化するには、日本語言語パックのインストールを参照してください。プラグインは以下に示すように IntelliJ IDEA のコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、コーディング演習と検証で新しい...

デバッガーセッションを開始する

デバッガーセッションの開始は、通常モードでのプログラムと非常に似ています。デバッガーはバックグラウンドで接続されているため、デバッガーセッションを開始するために特別な設定を行う必要はありません。IntelliJ IDEA からプログラムを実行できる場合は、同じ構成を使用してプログラムをデバッグすることもできます。このトピックは、実行 / デバッグ構成の理解に依存しています。IntelliJ IDEA は追加のセットアップなしで単純なアプリケーションをデバッグする方法を提供しますが、デバッガーを効...

中断されたプログラムを調べる

デバッガーセッションの開始後、デバッグツールウィンドウが表示され、次のいずれかが発生するまでプログラムが正常に実行されます。ブレークポイントがヒットしました、プログラムを手動で一時停止する、その後、プログラムは中断され、現在の状態を調べたり、実行を制御したり、実行時にさまざまなシナリオをテストしたりできます。誤ってデバッグツールウィンドウを閉じた場合は、メインメニューからを選択するか、を押して再度開きます。フレームを調べる:プログラムの状態はフレームで表されます。プログラムが一時停止すると、

カバレッジで未使用のコードを見つける

IntelliJ IDEA を使用すると、クライアント側アプリケーションで未使用の JavaScript、TypeScript、CSS コードを見つけることができます。特別なコードカバレッジモードでアプリケーションを実行すると、IntelliJ IDEA は、すべてのファイルとフォルダーで使用されたコードの量を示すレポートを作成します。ソースマップのおかげで、このレポートにはソースファイルのカバレッジが表示されますが、ブラウザーで実際に実行されたコンパイル済みコードのカバレッジは表示されません。...