パート 3. JavaScript のデバッグ

JavaScript のデバッグは、Web 開発者にとって不可欠です。IntelliJ IDEA ベースの製品では、このようなデバッグは非常に簡単になります。PyCharm の JavaScript デバッグ機能を説明するために、ブラウザーページにいくつかの数値を表示し、サーバー上でデバッグする非常に基本的なスクリプトを作成します。

始める前に

設定で JavaScript and TypeScript バンドルプラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに JavaScript and TypeScript と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。
設定で JavaScript Debugger バンドルプラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに JavaScript Debugger と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。
JavaScript デバッガーの構成の説明に従って、組み込みデバッガーを構成します。
HTML、CSS、JavaScript コードに加えた変更を、ページを再ロードせずにブラウザーにすぐに表示するには、ライブ編集機能をアクティブにします。ライブ編集機能の詳細については、「HTML、CSS、JavaScript でのライブ編集」を参照してください。

JavaScript をローカルでデバッグする

最も基本的なシナリオから始めましょう。JavaScript が HTML ファイルと 1 つのフォルダーにある場合に JavaScript をデバッグします。

Python プロジェクトを作成するの説明に従って、Pure Python プロジェクトを作成します。
プロジェクトルートに 2 つのファイルを作成します (詳細については、新規ファイルを作成するを参照してください)。
- index.html :
  <!DOCTYPE html> <html> <head> <title>Character count</title> </head> <body> <form id="form"> <input type="text" id="inputText" placeholder="Enter text"> <button type="submit">Send</button> </form> <p id="output">Character count: </p> <script src="script.js"></script> </body> </html>
- script.js
  document.getElementById("form").addEventListener("submit", function(event){ event.preventDefault(); let inputText = document.getElementById("inputText").value; let characterCount = inputText.length; document.getElementById("output").innerHTML = "Character count: " + characterCount; });
行番号をクリックして、script.js の 6 行目にブレークポイントを設定します。
index.html に切り替え、コンテキストメニューからデバッグ index.html を選択してデバッガーを起動します。または、Shift+F9 を押します。
PyCharm は index.html でブラウザーを開きます。フィールドにテキストを入力し、Enter を押すか、送信をクリックします。
ブレークポイントにヒットし、PyCharm は JavaScript の実行を停止します。デバッグツールウィンドウで現在の状態を調べることができます。詳細については、「中断されたプログラムを調べる」を参照してください。

ローカル開発サーバーでの JavaScript のデバッグ

Django、Flask、React Web アプリケーションを開発する場合、通常、JavaScript ファイルは開発サーバーによって提供されます。このような場合に JavaScript をデバッグする方法を見てみましょう。

プロジェクトを準備する

Django プロジェクトを作成するに従って、アプリ (たとえば sample_app) を使用して Django プロジェクトを作成します。
sample_app/views.py に移動し、次のビューを追加します。
def index(request): return render(request, 'index.html')
キャレットをハイライトされる index.html に設定し、Alt+Enter を押して、テンプレート index.html を作成するを選択します。
新しく作成したテンプレートファイルに次の情報を入力します。
<!DOCTYPE html> <html> <head> <title>Character count</title> </head> <body> <form id="form"> <input type="text" id="inputText" placeholder="Enter text"> <button type="submit">Send</button> </form> <p id="output">Character count: </p> {% load static %} <script src="{% static 'script.js' %}"></script> </body> </html>
アプリケーションディレクトリに新しいディレクトリ static を作成します (詳細については、ディレクトリを作成するを参照してください)。新しいディレクトリに script.js を作成し、次のコードを入力します。
document.getElementById("form").addEventListener("submit", function(event){ event.preventDefault(); let inputText = document.getElementById("inputText").value; let characterCount = inputText.length; document.getElementById("output").innerHTML = "Character count: " + characterCount; });
urls.py を開き、from sample_app.views import index をインポートに追加し、path('', index, name='index'), を urlpatterns に追加します。次の内容が得られるはずです。
from django.contrib import admin from django.urls import path from sample_app.views import index urlpatterns = [ path('', index, name='index'), path('admin/', admin.site.urls), ]

これで Django プロジェクトの準備が整ったため、script.js のデバッグを開始できます。

行番号をクリックして、script.js の 6 行目にブレークポイントを設定します。

Setting a breakpoint in the JavaScript file

ウィンドウの上部にある実行ウィジェットを使用して、自動的に作成された Django サーバー実行構成を実行します。
実行ウィジェットでをクリックし、ドロップダウンから実行構成の編集を選択します。
開いた実行 / デバッグ構成ダイアログで、Alt+Insert を押して JavaScript デバッグを選択します。構成の名前を指定し、URL で実行中の Django サーバーのアドレス (たとえば、http ://localhost:8000/) を指定します。
適用をクリックして設定を保存し、Shift+F9 を押してデバッグモードで実行します。
PyCharm は index.html でブラウザーを開きます。フィールドにテキストを入力し、Enter を押すか、送信をクリックします。
ブレークポイントにヒットし、PyCharm は JavaScript の実行を停止します。デバッグツールウィンドウで現在の状態を調べることができます。詳細については、「中断されたプログラムを調べる」を参照してください。

最終更新日: 2024 年 6 月 17 日

関連ページ：

プラグインのインストール

プラグインは PyCharm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケット...

JavaScript デバッガーの構成

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

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

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

Python プロジェクトを作成する

純粋な Python プロジェクトは、Python プログラミングを対象としています。プロジェクトは、ソースコード、テスト、使用するライブラリ、個人設定を 1 つのユニットに整理できます。プロジェクトが不要な場合は、LightEdit モードでファイルを編集するか、プロジェクトを設定せずに Python ファイルを作成できます。プロジェクトを作成するには、次のいずれかを実行します。に移動します。ウェルカム画面で、新規プロジェクトをクリックします。、新規プロジェクトダイアログで、プロジェクト名とそ...

プロジェクトを作成する

プロジェクトを作成したら、新しい項目の追加を開始できます。新しいディレクトリ、パッケージ、ファイルを作成したり、既存のファイルやフォルダーを追加したりできます。新規項目の作成：新規ファイルを作成する以下のいずれか 1 つを実行します: プロジェクトツールウィンドウ () で、新しいファイルを作成するディレクトリまたはパッケージを選択し、メインメニューからを選択します。ディレクトリまたはパッケージを右クリックし、コンテキストメニューから新規を選択します。ディレクトリを選択し、を押します。、目的の...

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

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