Share via


デバッグ セッションの開始方法 (JavaScript)

このトピックでは、JavaScript と HTML5 で記述された Windows ストア アプリのデバッグ セッションを開始する方法について説明します。デバッグは 1 回のキーストロークで開始できます。または、特定のシナリオ用のデバッグ セッションを構成した後、アプリを起動する方法を選択できます。

このトピックの内容

In this topic

The easy way to start debugging

Configure the debugging session

  • Open the debugging property page for the project

  • Choose the build configuration options

  • Choose the deployment target

  • Choose the debugger to use

  • (Optional) Delay starting the app in the debug session

  • (Optional) Disable network loopbacks

Start the debugging session

  • Start debugging (F5)

  • Start debugging (F5) but delay the app start

Start an installed app in the debugger

Attach the debugger to a running app

  • Set the app to run in debug mode

  • Attach the debugger

デバッグを開始する簡単な方法

  1. Visual Studio でアプリ ソリューションを開きます。

  2. F5 キーを押します。

Visual Studio によってアプリがビルドされ、アタッチされたデバッガーが起動します。実行は、ブレークポイントに達するか、実行が手動で中断されるか、ハンドルされない例外が発生するか、アプリが終了するまで続行されます。詳細については、「クイック スタート: アプリのデバッグ (JavaScript)」を参照してください。

デバッグ セッションを構成する

スクリプトがコンパイルされていないため、ビルド構成とプラットフォームの設定は適用されません。C/C++ またはマネージ コンポーネントをデバッグする場合は、[構成][デバッグ] に設定し、[構成] ダイアログからターゲット プラットフォームを選択します。

Hh771032.collapse_all(ja-jp,VS.110).gifプロジェクトのデバッグ プロパティ ページを開く

  1. ソリューション エクスプローラーでプロジェクトを選択します。ショートカット メニューの [プロパティ] をクリックします。

  2. [構成プロパティ] ノードを展開し、[デバッグ] をクリックします。

Hh771032.collapse_all(ja-jp,VS.110).gifビルド構成オプションを選択する

  1. [構成] ボックスの一覧の [デバッグ] または [(アクティブ) デバッグ] をクリックします。

  2. [プラットフォーム] ボックスの一覧で、ビルドするターゲット プラットフォームを選択します。ほとんどの場合、[Any CPU] が最も適しています。

Hh771032.collapse_all(ja-jp,VS.110).gif配置ターゲットを選択する

Visual Studio コンピューター上、ローカル コンピューター上の Visual Studio シミュレーター内、またはリモート コンピューター上にアプリを配置してデバッグできます。プロジェクトの [デバッグ] プロパティ ページの [起動するデバッガー] の一覧からターゲットを選択します。

[起動するデバッガー] の一覧から次のオプションのいずれかを選択します。

ローカル コンピューター

ローカル コンピューターの現在のセッションでアプリをデバッグします。「ローカル コンピューターでの Windows ストア アプリの実行」を参照してください。

シミュレーター

Windows ストア アプリ用の Visual Studio シミュレーターでアプリをデバッグします。シミュレーターは、ローカル コンピューターでは使用できないデバイスの機能 (タッチ ジェスチャやデバイスの回転など) をデバッグできるようにするデスクトップ ウィンドウです。「シミュレーターでの Windows ストア アプリの実行」を参照してください。

リモート コンピューター

ローカル コンピューターにイントラネットを介して接続されているかイーサネット ケーブルを使用して直接接続されているデバイス上のアプリをデバッグします。リモートでデバッグするには、リモート デバイス上に Visual Studio リモート ツールがインストールされ、実行されている必要があります。「リモート コンピューターでの Windows ストア アプリの実行」を参照してください。

[リモート コンピューター] をクリックした場合は、次のいずれかの方法でリモート コンピューターの IP アドレスを指定します。

  • [コンピューター名] ボックスに、リモート コンピューターの名前または IP アドレスを入力します。

  • [コンピューター名] ボックスの下向き矢印をクリックし、[<検索...>] をクリックします。[リモート デバッガー接続の選択] ダイアログ ボックスでリモート コンピューターを選択します。

    Select Remote Debugger Connection (リモート デバッガーの接続の選択)

    注意

    [リモート デバッガー接続の選択] ダイアログ ボックスには、ローカル サブネット上にあるコンピューターとイーサネット ケーブルによって Visual Studio コンピューターに直接接続されているコンピューターが表示されます。別のコンピューターを指定するには、[コンピューター名] ボックスに名前を入力します。

Hh771032.collapse_all(ja-jp,VS.110).gif使用するデバッガーを選択する

既定では、デバッガーはアプリの JavaScript コードにアタッチされます。JavaScript コードの代わりにアプリのコンポーネントのネイティブ C++ コードとマネージ コードをデバッグすることを選択できます。デバッグするコードは、アプリ プロジェクトの [デバッグ] プロパティ ページの [デバッガーの種類] の一覧で指定します。

[デバッガーの種類] の一覧から次のデバッガーのいずれかを選択します。

スクリプトのみ

アプリの JavaScript コードをデバッグします。マネージ コードとネイティブ コードは無視されます。

ネイティブのみ

アプリのネイティブ コードと C/C++ コードをデバッグします。マネージ コードと JavaScript コードは無視されます。

マネージのみ

アプリのマネージ コードをデバッグします。JavaScript コードとネイティブ C/C++ コードは無視されます。

混合 (マネージとネイティブ)

アプリのネイティブ C/C++ コードとマネージ コードをデバッグします。JavaScript コードは無視されます。

Hh771032.collapse_all(ja-jp,VS.110).gif(省略可能) デバッグ セッションでのアプリの起動を遅らせる

既定では、Visual Studio はデバッグの開始と同時にアプリを起動します。デバッグ セッションは開始するが、アプリの起動は遅らせることもできます。アプリは、[スタート] メニューから起動されたとき、アクティブ化コントラクトによって起動されたとき、または別のプロセスやメソッドによって起動されたときに、デバッガー内で起動します。アプリケーションが実行されていないときに発生させる、アプリケーションのバッググラウンド イベントのデバッグの開始を遅らせることもできます。

アプリ プロジェクトの [デバッグ] プロパティ ページに表示される [アプリケーションの起動] の一覧で、アプリの起動を遅らせるかどうかを指定します。次のオプションのいずれかを選択します。

  • アプリの起動を遅らせる場合は [いいえ] をクリックします。

  • アプリケーションを直ちに起動する場合は [はい] をクリックします。

Hh771032.collapse_all(ja-jp,VS.110).gif(省略可能) ネットワーク ループバックを無効にする

セキュリティ上の理由から、標準的な方法でインストールされた Windows ストア アプリは、インストール先のデバイスに対してネットワーク呼び出しを行うことはできません。既定では、Visual Studio による配置では、配置されたアプリに対するこの規則の適用は免除されます。この免除によって、1 台のコンピューター上で通信プロシージャをテストできます。Windows ストアにアプリを送信する前に、この免除なしでアプリをテストする必要があります。

ネットワークのループバックの除外を削除するには、[デバッグ] プロパティ ページで [ネットワーク ループバックの許可] ボックスの一覧の [いいえ] を選択します。

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

Hh771032.collapse_all(ja-jp,VS.110).gifデバッグを開始する (F5)

[デバッグ] メニューの [デバッグの開始] をクリックする (キーボードの場合は F5 キーを押す) と、デバッガーがアタッチされた状態でアプリが起動します。実行は、ブレークポイントに達するか、実行が手動で中断されるか、ハンドルされない例外が発生するか、アプリが終了するまで続行されます。

Hh771032.collapse_all(ja-jp,VS.110).gifデバッグは開始する (F5 キー) がアプリの起動は遅らせる

デバッグ モードで実行するようにアプリを設定し、デバッガー以外の方法でアプリを起動できます。たとえば、[スタート] メニューからのアプリの起動をデバッグしたり、アプリを起動せずにアプリのバックグラウンド プロセスをデバッグしたりできます。アプリの起動を遅らせるには、次の手順を実行します。

  1. アプリ プロジェクト プロパティの [デバッグ] ページで、[アプリケーションの起動] の一覧の [No] をクリックします。

  2. [デバッグ] メニューの [デバッグの開始] をクリックします (キーボードの場合: F5 を押します)。

  3. [スタート] メニュー、実行コントラクト、または別のプロシージャからアプリを起動します。

アプリがデバッグ モードで起動します。実行は、ブレークポイントに達するか、実行が手動で中断されるか、ハンドルされない例外が発生するか、アプリが終了するまで続行されます。

.バックグラウンド タスクのデバッグの詳細については、「Windows ストア アプリの中断イベント、再開イベント、およびバックグラウンド イベントをトリガーする方法」を参照してください。

デバッガーでインストール済みのアプリを起動する

F5 キーを使用してデバッグを開始すると、Visual Studio はアプリをビルドして配置し、デバッグ モードで実行されるようにアプリを設定してから起動します。デバイスに既にインストールされているアプリを起動するには、[インストールされているアプリケーション パッケージのデバッグ] ダイアログ ボックスを使用します。この方法は、Windows ストアからインストールされたアプリをデバッグする必要がある場合や、アプリのソース ファイルはあってもアプリの Visual Studio プロジェクトがない場合に役立ちます。Visual Studio プロジェクトやソリューションを使用しないカスタム ビルド システムがこれに該当します。

アプリはローカル デバイスにインストールすることも、リモート デバイスにインストールすることもできます。アプリをすぐに起動できます。また、アプリを別のプロセスや方法で起動したときに ([スタート] メニューからの起動や、アクティブ化コントラクトによる起動など)、デバッガーで実行するようにアプリを設定することもできます。アプリを起動せずにバックグラウンド プロセスをデバッグする場合は、デバッグ モードで実行されるようにアプリを設定できます。詳細については、「Windows ストア アプリの中断イベント、再開イベント、およびバックグラウンド イベントをトリガーする方法」を参照してください。

インストール済みのアプリがデバッグ モードで実行されるように設定するには、次の手順を実行します。

注意

この手順は、アプリが実行されていないときに開始してください。

  1. [デバッグ] メニューの [インストールされているアプリケーション パッケージのデバッグ] をクリックします。

  2. 一覧から次のいずれかのオプションを選択します。

    ローカル コンピューター

    ローカル コンピューターの現在のセッションでアプリをデバッグします。「ローカル コンピューターでの Windows ストア アプリの実行」を参照してください。

    シミュレーター

    Windows ストア アプリ用の Visual Studio シミュレーターでアプリをデバッグします。シミュレーターは、ローカル コンピューターでは使用できないデバイスの機能 (タッチ ジェスチャやデバイスの回転など) をデバッグできるようにするデスクトップ ウィンドウです。「シミュレーターでの Windows ストア アプリの実行」を参照してください。

    リモート コンピューター

    ローカル コンピューターにイントラネットを介して接続されているかイーサネット ケーブルを使用して直接接続されているデバイス上のアプリをデバッグします。リモートでデバッグするには、リモート デバイス上に Visual Studio リモート ツールがインストールされ、実行されている必要があります。「リモート コンピューターでの Windows ストア アプリの実行」を参照してください。

  3. [インストールされているアプリケーション パッケージ] ボックスの一覧からアプリを選択します。

  4. [このコードの種類をデバッグ] ボックスの一覧から、使用するデバッグ エンジンを選択します。

  5. (省略可能) 他の方法で起動したアプリをデバッグするときや、バックグラウンド プロセスをデバッグするときは、[起動しないが、開始時にコードをデバッグ] を選択します。

[開始] をクリックすると、アプリが起動するか、デバッグ モードで実行するように設定されます。

実行中のアプリにデバッガーをアタッチする

Windows ストア アプリにデバッガーをアタッチするには、デバッグ可能パッケージ マネージャーを使用して、デバッグ モードで実行するようにアプリを設定する必要があります。デバッグ可能パッケージ マネージャーは、Visual Studio リモート ツールと共にインストールされます。

アプリへのデバッガーのアタッチは、インストール済みのアプリ (Windows ストアからインストールされたアプリなど) をデバッグする場合に役に立ちます。アタッチは、アプリのソース ファイルはあるが、アプリの Visual Studio プロジェクトがない場合に必要です。Visual Studio プロジェクトやソリューションを使用しないカスタム ビルド システムがこれに該当します。

アプリにアタッチするには:

  1. デバッグ モードで実行するようにアプリを設定します。これは、アプリが実行されていないときに行う必要があります。

  2. アプリを起動します。アプリの起動は、[スタート] メニュー、実行コントラクト、または他の方法で実行できます。

  3. 実行中のアプリにデバッガーをアタッチします。

Hh771032.collapse_all(ja-jp,VS.110).gifデバッグ モードで実行するようにアプリを設定する

  1. アプリをインストールするデバイスに Visual Studio リモート ツールをインストールします。「Installing the Remote Debugger」を参照してください。

  2. [スタート] メニューでDebuggable Package Managerを検索して起動します。

    AppxDebug コマンドレット用に適切に構成された PowerShell ウィンドウが表示されます。

  3. アプリのデバッグを有効にするには、アプリの PackageFullName 識別子を指定する必要があります。PackageFullName を含むすべてのアプリの一覧を表示するには、PowerShell プロンプトに「Get-AppxPackage」と入力します。

  4. PowerShell プロンプトに「Enable-AppxDebug PackageFullName」と入力します。PackageFullName はアプリの PackageFullName 識別子です。

Hh771032.collapse_all(ja-jp,VS.110).gifデバッガーをアタッチします。

ヒント

JavaScript アプリは、wwahost.exe プロセスのインスタンス内で実行されます。アプリにアタッチするときに他の JavaScript アプリが実行されている場合は、アプリが実行されている wwahost.exe の数値プロセス ID (PID) を知る必要があります。

この状況に対応する最も簡単な方法は、他の JavaScript アプリをすべて閉じることです。または、アプリを起動する前に Windows タスク マネージャーを開いて、wwahost.exe プロセスの ID を確認できます。[選択可能なプロセス] ダイアログ ボックスでアタッチ先のプロセスを指定すると、アプリの wwahost.exe は確認した ID とは別の ID になります。

デバッガーをアタッチするには:

  1. [デバッグ] メニューの [プロセスにアタッチ] をクリックします。

    [プロセスにアタッチ] ダイアログ ボックスが表示されます。

  2. リモート デバイス上のアプリにアタッチするには、[修飾子] ボックスにリモート デバイスを指定します。次の操作を行うことができます。

    • [修飾子] ボックスに名前を入力します。

    • [修飾子] ボックスの下向き矢印をクリックし、デバイスの一覧から前にアタッチしたデバイスを選択します。

    • [検索] をクリックし、ローカル サブネット上のデバイスの一覧からデバイスを選択します。

  3. デバッグするコードの種類を [アタッチ先] ボックスに指定します。

    [選択] をクリックし、次のいずれかを実行します。

    • [デバッグするコードの種類を自動的に判断する] をクリックします。

    • [次のコードの種類をデバッグする] をクリックし、一覧から 1 つ以上の型を選択します。

  4. [選択可能なプロセス] の一覧から、適切な wwahost.exe プロセスを選択します。[タイトル] 列を使用して、アプリを識別します。

  5. [アタッチ] をクリックします。

Visual Studio によって、デバッガーがプロセスにアタッチされます。実行は、ブレークポイントに達するか、実行が手動で中断されるか、ハンドルされない例外が発生するか、アプリが終了するまで続行されます。

参照

概念

クイック スタート: デバッガーのナビゲーション (JavaScript)

クイック スタート: アプリのデバッグ (JavaScript)

Windows ストア アプリの中断イベント、再開イベント、およびバックグラウンド イベントをトリガーする方法

Windows ストア アプリのデバッグ