パート 3. JavaScript のデバッグ
JavaScript のデバッグは、Web 開発者にとって不可欠です。 IntelliJ IDEA ベースの製品では、このようなデバッグは非常に簡単になります。 JavaScript のデバッグ機能を PyCharm で説明するために、ブラウザーページにいくつかの数値を表示するだけの非常に基本的なスクリプトを作成し、サーバー上でデバッグします。
始める前
設定で JavaScript and TypeScript バンドルプラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript and TypeScript と入力します。 プラグインの詳細については、 Managing plugins を参照してください。
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの マーケットプレース タブで JavaScript Debugger プラグインをインストールして有効化してください。 このプラグインは PyCharm Pro でのみ利用できます。
JavaScript デバッガーの構成 の説明に従って、組み込みデバッガーを構成します。
HTML、CSS、JavaScript コードに加えた変更を、ページを再ロードせずにブラウザーにすぐに表示するには、 ライブ編集機能をアクティブにします。 ライブ編集機能の詳細については、 HTML、CSS、JavaScript でのライブ編集 を参照してください。
JavaScript をローカルでデバッグする
まずは最も基本的なシナリオから始めます。HTML ファイルと同じフォルダーにある 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 行目にブレークポイントを設定します。
ウィンドウの上部にある 実行 ウィジェットを使用して、自動的に作成された Django サーバー実行構成を実行します。
実行 ウィジェットで
をクリックし、ドロップダウンから 実行構成の編集 を選択します。開いた 実行 / デバッグ構成 ダイアログで、 Alt+Insert を押して JavaScript デバッグ を選択します。 構成の名前を指定し、 URL で実行中の Django サーバーのアドレス (たとえば、
http ://localhost:8000/) を指定します。
適用 をクリックして設定を保存し、 Shift+F9 を押してデバッグモードで実行します。
PyCharm は index.html でブラウザーを開きます。 フィールドにテキストを入力し、 Enter を押すか、 送信 をクリックします。
ブレークポイントにヒットし、PyCharm が JavaScript の実行を停止します。 デバッグ ツールウィンドウで現在の状態を調べることができます。 詳細については、「中断されたプログラムを調べる 」を参照してください。