PyCharm 2020.2ヘルプ

パート3: JavaScript のデバッグ

The possibility to debug JavaScript is vital for web developers. With IntelliJ IDEA-based products, such debugging becomes quite easy. To illustrate the JavaScript debugging capabilities with PyCharm, we’ll create a very basic script that just shows some numbers in a browser page, and then debug it on a server.

外部Webサーバーでデバッグする場合は、アプリケーションファイルがデプロイされ、コンピューター上にそのコピーが保存されます。Webサーバー自体が物理的にリモートホスト上で実行されているか、マシン上で実行されているかに関わらず、デプロイされたアプリケーションファイルはリモートとして扱われます。

いくつかのJavaScriptをロードするリモート HTMLファイルが開かれると、デバッガはPyCharmに現在処理されているファイルの名前と処理される行の番号を通知します。PyCharmはこのファイルのローカルコピーを開き、指定された番号の行を示します。この動作は、サーバー上のファイルとフォルダーとローカルコピー間の対応を指定することで有効になります。この対応はマッピングと呼ばれ、デバッグ構成で設定されます。

前提条件

以下を確認してください:

  • PyCharm Professional エディションバージョン3.0以降を使用しています。

  • Google Chromeで作業しています。

  • アプリケーションサーバーとしてXAMPP(英語)を使用しています。

このチュートリアルは、次のツールを使用して作成されます。

プロジェクトの作成

メインメニューでファイル | 新規プロジェクトを選択し、次の操作を行います。

  • Pure Pythonプロジェクトタイプを選択する

  • プロジェクトの場所を指定するC:\SampleProjects\py\MyJSProject

  • choose the Python interpreter

Create a new project

準備ができたら、作成をクリックします。

この新しいプロジェクトを別のウィンドウで開き、現在開いているプロジェクトに追加しないでください:

Open a project

サンプルコードの準備

First, let’s create a HTML page. To do that, with the プロジェクトツールウィンドウ having the focus, press Alt+Insert , choose HTML ファイル on the popup menu, and enter the filename numbers .

PyCharmはいくつかの初期の内容でHTMLファイルをスタブします。次に、このHTMLファイルにJavaScriptファイルへの参照を埋め込みます。これを行うには、次のコードを<body>タグ:

<script type="text/javascript" src="numbers.js" language="JavaScript"></script>

入力中に利用可能なコード補完について:

Code completion

When ready, pay attention to the highlighted filename numbers.js . This is a reference to a non-existent JavaScript file. Place the caret at this name and press Alt+Enter (or click the yellow light bulb the Intention action icon ); a quick-fix is suggested – create the missing file:

Intention Action

このクイックフィックスを選択して、スタブJavaScriptファイルを用意してください。次に、次のコードを入力してください。

var i=0; for (i=0;i<=10;i++) {if (i==3) { continue; } document.write("The number is " + i); document.write("<br/>"); }

ブレークポイントの設定

Now let’s set breakpoints to our JavaScript file. This is most easy – just click the left gutter at the line you want the script to suspend:

Breakpoint set

サーバーの構成

サーバーの作成

サーバーを作成するには、次の手順を実行します。

  1. 設定/環境設定ダイアログを開きます ( Ctrl+Alt+S を押すか、メインツールバーの the Settings/Preferences icon をクリックする)

  2. ノードビルド、実行、デプロイを展開し、ページデプロイをクリックします。

  3. デプロイページで、the Add buttonをクリックします。

  4. サーバー名 MyRemoteServer を指定し、local or mounted serverと入力します。

接続とマッピングの設定

次に、サーバーを構成します。接続タブで、ローカルファイルをアップロードするディレクトリを指定します。私たちの場合、このディレクトリはC:\xampp\htdocsです - ローカルファイルがこのディレクトリにアップロードされることを意味します:

Configure connection to the server

次に、マッピングタブをクリックします。ここでは、ローカルパス、サーバー上のデプロイパス(接続タブで指定されたフォルダーに関連する)、およびサーバー上のWebパスを定義します。

Configure folder mappings

プロジェクトのデフォルトサーバーの定義

サーバーをプロジェクトのデフォルトにします。これを行うには、デプロイツールバーicon_use_web_server_configuration_as_default ボタンをクリックします。

Set a server as default

OKをクリックして変更を適用するには、設定/環境設定ダイアログを閉じます。

最後に、プロジェクトC:\SampleProjects\py\MyJSProjectC:\xampp\htdocsにコピーします。

サーバーの表示

サーバーが稼働していることを確認してください。さらに重要なのは、PyCharmに表示されます。これを行うには、メインメニューでツール | デプロイ | リモート・ホストの参照を選択します。リモートホストツールウィンドウには、新しく作成されたサーバーが表示されます。

Browse remote server

サーバーへのファイルのデプロイ

PyCharmを使って、ちょうどスナップです... ex:メインメニューから簡単に行うことができます: ツール | デプロイ | MyRemoteServerにアップロードするを選択するか、コンテキストメニューを使用します:

Upload files to a remote server

アップロードの結果を以下に示します。

Upload results

デバッグ

デバッガセッションの開始

All the preliminary steps are done, and it’s time to proceed to the debugging session. To start it, right-click the background of the file numbers.html , and choose デバッグ 'number.html' from the context menu - thus you will launch the debugger with the default 一時的な実行/デバッグ構成 :

Start debugging

デバッガ情報の確認

デバッグセッションが開始されると、HTMLページがブラウザに表示され、デバッグツールウィンドウが開きます。最初のブレークポイントに達すると、プログラムの実行が中断されます。このようなブレークポイントには青いストライプが付いています。

Breakpoint hit

アプリケーションをステップ実行すると、対応する情報がデバッグツールウィンドウとWebブラウザのページに表示されます。

Web page paused in debugger

スクリプトをステップ実行するには、Stepping through the script または the Step over buttonをクリックします。デバッガセッションを終了するか、黄色のバナーを閉じるか、キャンセルをクリックします。

要約

このチュートリアルは終了です。次の課題についての知識をリフレッシュしました:

  • サーバーを作成し、接続とマッピングを設定しました。

  • サーバーにファイルをデプロイしました。

  • JavaScriptコードにブレークポイントを追加しました。

  • デバッグセッションを開始し、デバッガ情報を調べました。

最終更新日: 2020年7月09日

関連ページ:

プロジェクトツールウィンドウ

表示 | ツール・ウィンドウ | プロジェクトこのツールウィンドウを使用すると、プロジェクトをさまざまな観点から見て、新しい項目(ディレクトリ、ファイル、クラスなど)の作成、エディターでのファイルの開き、目的のコードフラグメントへの移動などのタスクを実行できます。このツールウィンドウのほとんどの機能...

デプロイ

macOSのPyCharm | 環境設定 | ビルド、実行、デプロイ | デプロイこのページでは、PyCharmとサーバー間の相互作用を制御できるサーバーアクセス構成とサーバーグループを作成、編集、削除します。サーバーを使用するときはいつでも、サーバーがリモートホスト上にあるかコンピューター上にある...

デバッグツールウィンドウ

このツールウィンドウは、デバッグを開始すると使用可能になります。It displays the output generated by the debugging session for your application. If you are debugging multiple実行/デバッグ構成...

パート2: Djangoテンプレートのデバッグ

この機能はProfessionalエディションでのみサポートされています。このエディションは有償版であり、優れた機能セットを提供します。詳細については、比較表を参照してください。開始する前に、Djangoがプロジェクトテンプレート言語として指定されていることを確認してください。詳細はセクションDja...