次の方法で共有

Visual Studio Tools for Apache Cordova でビルドされたアプリのデバッグ

  • [アーティクル]

この記事では、プレリリース ソフトウェアである Visual Studio Tools for Apache Cordova について述べています。説明されている機能はプレビュー中のため、変更される可能性があります。プレビュー版は、Microsoft ダウンロード センターからダウンロードできます。

Visual Studio では、アプリの種類とデバイス プラットフォームの境界を越えて Cordova アプリを開発するためのシームレスで一般的なツールを体験できます。 ただし、この初期のリリースでは、次の表に示すように、すべてのデバイス プラットフォームですべての Visual Studio のデバッガーと診断機能がサポートされるわけではありません。

デバイスまたはオペレーティング システム

Visual Studio デバッガーがサポートされているか。

コンソール メッセージがサポートされているか。

回避策

Android 4.4

はい

はい

-

Android バージョン 2.3.3 ～ 4.3

いいえ (この記事で後述する「jsHybugger に関する情報」を参照してください)

はい

-

iOS 6、7、8

はい

はい

-

Windows 8、8.1 (ストア)

はい

はい

-

Windows Phone 8、8.1

Ｘ

Ｘ (コンソール プラグインを使用)

Web Inspector Remote (weinre) またはコンソール プラグインを使用します。 この記事で後述する「Windows 8 および Windows Phone 8 のデバッグ」を参照してください。

Windows Server 2012 R2

はい

はい

Windows Server 2012 R2 上のアプリを実行するには、[デスクトップ エクスペリエンス] オプションを有効にする必要があります。

注意

Windows 7 を使用している場合、Android と iOS のアプリは開発できますが、Windows や Windows Phone のアプリは開発できません。

この記事の内容:

  • Apache Ripple での Android および iOS のデバッグ

  • エミュレーターまたはデバイスでの Android のデバッグ

  • エミュレーターまたはデバイスでの iOS のデバッグ

  • Windows 8 および Windows Phone 8 のデバッグ

Apache Ripple での Android および iOS のデバッグ

Apache Ripple エミュレーターで実行されているアプリに Visual Studio デバッガーをアタッチできます。

Ripple でデバッグするには

  • Visual Studio でアプリを開いた状態で F5 キーを押します。

    コード内に設定されたブレークポイントに到達し、DOM Explorer を使用するか、JavaScript コンソールに送信されたメッセージを表示できます。

    コード エディターで設定されたブレークポイントを次に示します。

    Ripple を使用したデバッグでのブレークポイントの設定

    ここで、Visual Studio デバッガーは Ripple エミュレーターでのデバッグ中にブレークポイントにヒットします。

    Visual Studio デバッガーでキャッチされたブレークポイント

重要

Visual Studio デバッガーは、Ripple で最初のページが読み込まれる前にヒットしたブレークポイントでは停止しません。ただし、ブラウザーを更新した後は、デバッガーはこれらのブレークポイントで停止します。

次の JavaScript コンソール コマンドが現在 Ripple でサポートされています。

  • console.assert
    console.clear
    console.count
    console.debug
    console.dir
    console.dirxml
    console.error
    console.info
    console.log
    console.time
    console.timeEnd
    console.warn

注意

他のコンソール コマンドや JavaScript コンソールの他のコマンドは、現在サポートされていません。console.dirxml は、Webkit ベースのブラウザーで console.dir と同じ動作になります。

DOM Explorer を使用すると、HTML および CSS をデバッグできます。 DOM Explorer の [スタイル]、[計算済み]、および [レイアウト] タブで使用可能な機能が Ripple でサポートされています。

注意

デバッグのサポートに関する詳細については、「既知の問題」を参照してください。

エミュレーターまたはデバイスでの Android のデバッグ

Visual Studio デバッガーを Android エミュレーターまたは Android デバイスにアタッチして、Android 4.4 上のアプリをデバッグできます。

2.3.3 から 4.3 までの Android バージョンを使用している場合は、jsHybugger プラグインをインストールして、Android の診断 (DOM Explorer、コンソール、およびデバッグ) を有効にできます。 このプラグインは、コードをローカルにインストルメント化して Android デバイスやエミュレーターでのリモート デバッグを有効にし、Android 2.3.3 以降のバージョンをサポートします。

Android 4.4 でデバッグするには

  • Visual Studio でアプリを開いた状態で F5 キーを押します。

    Android 4.4 を使用している場合は、コード内に設定されたブレークポイントに到達し、JavaScript コンソールに送信されたメッセージを表示し、DOM Explorer を使用できます。

    重要

    Visual Studio デバッガーは、Android 4.4 エミュレーターまたは Android デバイスで最初のページが読み込まれる前にヒットしたブレークポイントでは停止しません。ただし、JavaScript コンソールから次のコマンドを実行した後は、デバッガーはこれらのブレークポイントで停止します。window.location.reload()

jsHybugger プラグインで Android バージョン 2.3.3 ～ 4.3 をデバッグするには

  1. Visual Studio で Cordova を開きます。

  2. プロジェクトに plugins フォルダーがまだ存在しない場合は、作成します (フォルダーを追加するには、ソリューション エクスプローラーでプロジェクトのショートカット メニューを開き、[追加]、[新しいフォルダー] を選択し、フォルダー名を plugins に設定します)。

  3. jsHybugger プラグインをダウンロードし、その内容を抽出します。

    注意

    このプラグインの詳細については、jsHybugger Web サイトを参照してください。このプラグインはライセンスなしで使用できますが、デバッグ セッションは 2 分間に制限されます。制限なしにデバッグを行うには、jshybugger のライセンスを購入する必要があります。次の手順は、ライセンスを購入し、jshybugger_license.xml としてライセンス ファイルをダウンロードしたことを前提としています。

  4. 解凍した jshybugger-plugin-x.x.x フォルダーをプロジェクトの plugins フォルダーに配置します。

  5. jshybugger_license.xml ファイルをプロジェクトのルートに配置します。

    ソリューション エクスプローラーでプロジェクトは次のように表示されます。

    jsHybugger インストール後のプロジェクト構造

  6. F5 キーを押して、Android エミュレーターまたはデバイスに対してデバッグを開始します。

    JavaScript コンソールに送信されたメッセージを表示し、DOM Explorer を使用できます。

重要

アプリを発行する前に、jsHybugger プラグインとライセンス ファイルをプロジェクトから削除する必要があります。

このプラグインは、Apache Ripple エミュレーターの使用中や Android 4.4 エミュレーターおよびデバイスでのデバッグ中は影響を及ぼさないため、テスト中に異なる Android の対象に切り替える際に削除する必要はありません。

次の JavaScript コンソール コマンドが現在 Android でサポートされています。

  • console.assert
    console.clear
    console.count
    console.debug
    console.dir
    console.dirxml
    console.error
    console.info
    console.log
    console.time
    console.timeEnd
    console.warn

注意

他のコンソール コマンドや JavaScript コンソールの他のコマンドは、現在サポートされていません。console.dirxml は、Webkit ベースのブラウザーで console.dir と同じ動作になります。

DOM Explorer の [スタイル]、[計算済み]、および [レイアウト] タブで使用可能な機能が Android でサポートされています。

注意

Windows で使用可能な他のデバッグ ツールと診断ツールは、現在 Android では使用できません。Android のデバッグ サポートは、以降のリリースで継続的に改善される予定です。デバッグのサポートに関する詳細については、「既知の問題」を参照してください。

エミュレーターまたはデバイスでの iOS のデバッグ

Visual Studio デバッガーを iOS シミュレーターまたは iOS デバイスにアタッチできます。 iOS 6、7、8 に対応しています。

注意

現在、プラグイン InAppBrowser を使用する iOS アプリへのデバッガーのアタッチはサポートしていません。Azure Mobile Services プラグインは、プラグイン InAppBrowser を使用しているため、この制限の影響を受けます。

iOS でデバッグするには

  • Mac で vs-mda-remote エージェントをインストールし、エージェントを起動し、エージェントと接続するよう Visual Studio を構成したことを確認します。

  • 実際のデバイスでデバッグを実行している場合は、ご使用のデバイスで、[設定]、[Safari]、[詳細] の順にクリックしてから、Web インスペクターを有効にします。

    こうすることで、ご使用のデバイスでのリモート デバッグが可能になります。 (この手順は、iOS シミュレーターでのデバッグには必要ありません。)

  • アプリが Visual Studio で開かれ、iOS が配置ターゲットとして選択された状態で、F5 キーを押します。

    コード内に設定されたブレークポイントに到達し、JavaScript コンソールに送信されたメッセージを表示するとともに、DOM Explorer を使用することができます。

    重要

    Visual Studio デバッガーは、iOS シミュレーターまたは iOS デバイスで最初のページが読み込まれる前にヒットしたブレークポイントでは停止しません。ただし、JavaScript コンソールから次のコマンドを実行した後は、デバッガーはこれらのブレークポイントで停止します。window.location.reload()

次の JavaScript コンソール コマンドが現在 iOS でサポートされています。

  • console.assert
    console.clear
    console.count
    console.debug
    console.dir
    console.dirxml
    console.error
    console.info
    console.log
    console.time
    console.timeEnd
    console.warn

注意

他のコンソール コマンドや JavaScript コンソールの他のコマンドは、現在サポートされていません。console.dirxml は、Webkit ベースのブラウザーで console.dir と同じ動作になります。

DOM Explorer の [スタイル]、[計算済み]、および [レイアウト] タブで使用可能な機能が iOS でサポートされています。

注意

デバッグ サポートは、以降のリリースで継続的に改善される予定です。デバッグのサポートに関する詳細については、「既知の問題」を参照してください。

Windows 8 および Windows Phone 8 のデバッグ

Windows アプリでは、HTML および JavaScript を使用してビルドされた Windows ストア アプリに使用するものと同じ Visual Studio デバッグ ツールを使用できます。 詳細については、Windows デベロッパー センターの「Visual Studio での Windows ストア アプリのデバッグ」を参照してください。

Windows Phone アプリについては、この初期のリリースは、Visual Studio デバッガーのアタッチをサポートしていません。 代わりに、Web Inspector Remote (weinre) を使用できます。詳細については、Microsoft Open Technologies ブログの投稿を参照してください。

ヒント

Visual Studio デバッガーの Windows Phone 8.1 プロジェクトへのアタッチは、次期リリースの Visual Studio Tools for Apache Cordova でサポートされます。

Windows Phone のデバッグに weinre を使用する代わりに、アプリにコンソール プラグインを追加してアプリをビルドし、生成されたネイティブ Windows Phone 8 プロジェクトを Visual Studio で開くことができます。 ネイティブ プロジェクトは、\bld\Debug\platforms\wp8 フォルダーにあります。 ネイティブ プロジェクトを開いた状態で、出力ウィンドウを使用してコンソールの出力を表示できます。 ネイティブ プロジェクトへのアクセスの詳細については、「ネイティブ Cordova プロジェクトへのアクセス」を参照してください。

注意

ネイティブ プロジェクトに加えた変更は、Cordova アプリをリビルドすると上書きされます。

参照

概念

Visual Studio Tools for Apache Cordova の使用を開始する

その他の技術情報

FAQ

既知の問題