次の方法で共有


Visual Studio でのストア アプリのデバッグ セッションの開始 (JavaScript)

Windows と Windows Phone に適用されます

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

注意

XAML、Visual C#、Visual C++、または Visual Basic で記述されたアプリについては、「Visual Studio でのストア アプリのデバッグ セッションの開始 (VB、C#、C++、および XAML)」を参照してください。

このトピックの内容

このトピックの内容

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

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

  • プロジェクトのデバッグ プロパティ ページを開く

  • ビルド構成オプションを選択する

  • 配置ターゲットを選択する

  • 使用するデバッガーを選択する

  • (省略可能) デバッグ セッションでアプリの起動を遅らせる

  • (省略可能) ネットワーク ループバックを無効にする

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

  • デバッグを開始する (F5)

  • デバッグは開始する (F5 キー) がアプリの起動は遅らせる

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

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

  • デバッグ モードで実行するようにアプリを設定する

  • デバッガーをアタッチします。

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

Windows のみに適用されます

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

  2. Windows ストア アプリと Windows ストア Phone アプリの両方のプロジェクトがソリューションに含まれる場合、デバッグするプロジェクトがスタートアップ プロジェクトであることを確認します。 ソリューション エクスプローラーで、プロジェクトを選択し、コンテキスト メニューの [スタートアップ プロジェクトに設定] をクリックします。

  3. シミュレーター ウィンドウからシミュレーター ツール バーにフォーカスを切り替えるには、F5.

Windows Phone のみに適用されます

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

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

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

プロジェクトのデバッグ プロパティ ページを開く

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

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

ビルド構成オプションを選択する

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

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

配置ターゲットを選択する

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

Windows のみに適用されます

Windows ストア アプリの場合、[ターゲット デバイス] ボックスの一覧から次のオプションのいずれかを選択します。

ローカル コンピューター

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

シミュレーター

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

リモート コンピューター

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

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

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

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

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

    注意

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

Windows Phone のみに適用されます

Windows ストア Phone アプリの場合、[ターゲット デバイス] ボックスの一覧から [デバイス] またはいずれかのエミュレーターを選択します。

使用するデバッガーを選択する

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

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

スクリプトのみ

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

ネイティブのみ

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

スクリプトを利用したネイティブ コード

アプリのネイティブ C++ コードと JaveScript コードをデバッグします。

マネージのみ

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

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

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

(省略可能) デバッグ セッションでアプリの起動を遅らせる

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

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

  • アプリの起動を遅らせるには、[いいえ] を選択します。

  • アプリをすぐに起動するには、[はい] を選択します。

(省略可能) ネットワーク ループバックを無効にする

Windows のみに適用されます

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

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

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

デバッグを開始する (F5)

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

デバッグは開始する (F5 キー) がアプリの起動は遅らせる

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

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

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

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

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

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

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

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

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

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

注意

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

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

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

    ローカル コンピューター

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

    シミュレーター

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

    リモート コンピューター

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

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

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

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

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

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

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

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

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

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

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

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

デバッグ モードで実行するようにアプリを設定する

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

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

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

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

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

デバッガーをアタッチします。

ヒント

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

参照

概念

Windows ストア アプリ用の Visual Studio デバッグ セッションでの、ストア アプリの実行制御 (JavaScript)

クイック スタート: HTML および CSS のデバッグ

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

Visual Studio でのストア アプリのデバッグ