Chrome での JavaScript のデバッグ

1. 設定で JavaScript and TypeScript バンドルプラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 プラグイン を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript and TypeScript と入力します。 プラグインの詳細については、 プラグインの管理 を参照してください。

2. 設定で JavaScript Debugger バンドルプラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 プラグイン を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript デバッガー と入力します。 プラグインの詳細については、 プラグインの管理 を参照してください。

3. JavaScript デバッガーの構成 の説明に従って、組み込みデバッガーを構成します。

   HTML、CSS、JavaScript コードに加えた変更を、ページを再ロードせずにブラウザーにすぐに表示するには、 ライブ編集機能をアクティブにします。 ライブ編集機能の詳細については、 HTML、CSS、JavaScript でのライブ編集 を参照してください。

デバッグを開始する

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

2. デバッグする JavaScript を参照する HTML ファイルを開くか、 プロジェクトツールウィンドウで HTML ファイルを選択します。

3. エディターのコンテキストメニューまたは選択から、 デバッグ <HTML_file_name> を選択します。 CLion はデバッグ構成を生成し、それを通じてデバッグセッションを開始します。 ファイルがブラウザーで開き、 デバッグツールウィンドウが表示されます。

4. デバッグ ツールウィンドウで、通常どおり操作を続けます： プログラムをステップ実行、 実行を停止・再開、 中断時の調査 、コールスタックと変数の確認、ウォッチの設定、変数の評価、 実際の HTML DOM の表示などが可能です。

   ソースマップを無視して実際に実行されるコードをステップ実行するには、 を デバッグ ツールウィンドウのツールバーで押します。

1. コードに ブレークポイントを設定します。

2. たとえば、npm スクリプトを使用してアプリケーションを開発モードで起動します。

3. 実行 ツールウィンドウまたは ターミナルエミュレータ には、アプリケーションが実行されている URL が表示されます。 Ctrl+Shift を押したまま、この URL リンクをクリックします。 CLion は自動生成された 構成で、タイプ JavaScript Debug のデバッグセッションを開始します。

   新しいターミナルから開発モードでアプリケーションを起動した場合は、リンクの横にある ブラウザーでデバッグを開始する ボタンをクリックするだけです。

   

   デフォルトでは、ボタンは表示されていません。 表示するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 詳細設定 に移動して、 JavaScript と TypeScript 領域の ターミナルの localhost リンクに 'ブラウザでデバッグを開始' ボタンを表示する チェックボックスを選択してください。

リモート Web サーバーでアプリケーションをデバッグする

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

2. JavaScript デバッグ​ タイプの実行 / デバッグ構成を作成します。

   実行 | 実行構成の編集​ に移動し、 実行構成の編集 ダイアログで、開いた 実行構成の編集 ダイアログで、ツールバーの 追加 ボタン () をクリックし、リストから JavaScript デバッグ​ を選択します。

3. 開いた 実行 / デバッグ構成：JavaScript デバッグダイアログで、アプリケーションが実行されている URL アドレスを指定します。 この URL アドレスは、 Web サーバールート URL と、 サーバーアクセス構成に従って、Web サーバーのドキュメントルートを基準とした HTML ファイルへのパスを連結したものである必要があります。 詳細については、 ウェブサーバーとの同期化 を参照してください。

   OK をクリックして構成設定を保存します。

4. ツールバーの 実行/デバッグ構成を選択 リストで新しく作成した構成を選択し、 デバッグ ボタン をクリックします。 実行構成で指定した HTML ファイルが選択したブラウザーで開き、 デバッグツールウィンドウが表示されます。

5. デバッグ ツールウィンドウで、通常どおり操作を続けます： プログラムをステップ実行、 実行を停止・再開、 中断時の調査 、コールスタックと変数の確認、ウォッチの設定、変数の評価、 実際の HTML DOM の表示などが可能です。

   ソースマップを無視して実際に実行されるコードをステップ実行するには、 を デバッグ ツールウィンドウのツールバーで押します。

1. デバッグ用に ワーカーに ブレークポイントを設定します。

2. Service Workers を利用している場合は、 デバッガー ページ（設定 | ビルド、実行、デプロイ | デバッガー ）で 署名されていない要求を許可する チェックボックスが選択されていることを確認してください。 そうし ないと、デバッグセッション中にサービスワーカーが使用できなくなる可能性があります。

3. 外部 Web サーバー上で実行されているクライアント側の JavaScript のデバッグで前述したように、タイプ JavaScript デバッグのデバッグ構成を作成します。

4. ツールバーの 実行 ウィジェットリストから、新しく作成された 構成を選択し、その横にある をクリックします。

   実行構成で指定された HTML ファイルがブラウザーで開き、 デバッグツールウィンドウが開き、使用可能なすべての ワーカーを示す フレーム リストが表示されます。

   

   ワーカーのデータ（変数、ウォッチなど）を調べるには、リストでそのスレッドを選択し、 変数 ペインと ウォッチ式 ペインでそのデータを表示します。 別の ワーカーを選択すると、それに応じてペインの内容が更新されます。

Node.js/Chrome 実行 / デバッグ構成へのアタッチを作成する

1. 実行 | 実行構成の編集​ に進みます。 または、ツールバーの 実行 ウィジェットから 実行構成の編集 を選択します。

   

   開いた 実行構成の編集 ダイアログで、ツールバーの 追加 ボタン () をクリックし、リストから Node.js/Chrome への接続 を選択します。

   

   実行 / デバッグ構成：Node.js / Chrome にアタッチダイアログが開きます。

2. 構成名を指定し、事前定義されたホストとポートの値 localhost:9229 を受け入れます。

   

3. 変更を適用 と OK をクリックして構成を保存し、ダイアログを閉じます。

Chrome を実行して拡張機能をロードする

1. コマンドラインから Chrome を実行する(英語)を使用して、リモートデバッグポートと Chrome ユーザーデータディレクトリ(英語)を指定します。

   コマンドライン シェルまたは組み込みの ターミナルエミュレータ （Alt+F12 ）を開き、次のように入力してください：

   <path_to_chrome_executable> --remote-debugging-port=<port_specified_in_run_configuration> --user-data-dir=<your_Chrome_user_data_directory>

2. 開いた Chrome ウィンドウに 解凍した拡張機能をロードする(英語)を入力します。

デバッグを開始する

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

2. ツールバーの 実行 ウィジェットリストから、新しく作成された Node.js/Chrome への接続 構成を選択し、その横にある をクリックします。

   

   デバッグツールウィンドウが開きます。

3. 拡張機能がロードされている Chrome タブに移動します。

4. CLion に切り替えます。 デバッグ ツールウィンドウで、 ブレークポイントをステップ実行 、フレームの切り替え、値のオンザフライ変更、 中断中のプログラムの調査、 式の評価、 ウォッチの設定などが可能です。