MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

テストとデバッグ

この翻訳は不完全です。英語から この記事を翻訳 してください。

この段階で、Ember CLI が生成した基本的なアプリに新しい機能を追加する事ができてワクワクしているでしょう。しかし、それをするにあたり、アプリケーションの表示・テスト・デバッグをする事ができるツールを熟知する事が重要です。アプリは異なるプラットフォームで動作する必要があり、そうでなければ勝利を得る事ができません!kの記事では利用できるツールの基本的な事を説明します。

ブラウザ上でのデバッグ

もしローカル上で Ember CLI アプリケーションが動作していないのであれば、コマンドラインまたはターミナル上からプロジェクトのディレクトリに移動し、ember serve を実行してください。

モダンなブラウザの大半(我々はFirefox Nightly を推奨します) にはアプリの表示と操作を可能にする開発ツールが含まれています。その開発ツールの利用方法についてはブラウザのドキュメントを参照してください。Firefox Developer Tools (モバイル仕様も含む)についての膨大なドキュメントは MDN から見つける事ができ、Discover browser developer tools のビギナーガイドからも見る事ができます。

注意:Firefox Developer Tools は柔軟に作られていて、他の多くのブラウザとも接続できるので、Firefox for Android・Android 上の Chrome や iOS 上の Safari などでアプリケーションをテストする事が可能になります。他のブラウザに接続するための更なる情報は MDN のリモートでバッグを参照してください。

WebIDE からアプリケーションを表示する

Firefox(version 34 以上)から追加された WebIDE ツールは Firefox OS シミュレータ上でアプリケーションを実行でき、アプリケーションのコードや構築するファイルの表示・編集を行う事ができます。
 This makes it easy to monitor your application as you make changes and fix any bugs that pop up along the way, as you try to get it working just right on Firefox OS.

WebIDE を利用するには

  1. Firefox のメニューバーから、ツール > Web 開発 > WebIDE(もしなければ最新バージョンの Firefox で動かす必要があります) を選択します。
  2. WebIDE 画面の左上にある アプリを開く > ホスト型アプリ をクリックします。アプリケーションのマニフェストの URL を入力するポップアップが表示されます。アプリケーションは 4200 番のポートで動作していると思われるので、マニフェストの URL には http://localhost:4200/manifest.webapp と入力します。
  3. OK をクリックすると、WebIDE の画面にアプリケーションの詳細な情報が表示されます。

App Manager Home Screen

シミュレータを起動する

  1. WebIDE 画面の右上にある ランタイムを選択 をクリックします。これはシミュレータの実行・インストールまたは、USB 経由でデバイスに接続する事ができます。シミュレータをインストールをクリックして Firefox OS の特定のバージョンをインストールします。一度インストールすると、すぐにデバッグするためのランタイムが入手できます。
  2. ランタイムを選択の下に表示されるドロップダウンメニューから動作させたいシミュレータを選択します。
  3. 新しいシミュレータが開き、 Firefox OS 端末のホームスクリーンが現れます。
    Firefox OS Simulator home screen
  4. WebIDE の裏の、真ん中上部にアクティブな「再生」ボタンが表示されます。このボタンを押したとき、シミュレータにアプリケーションがインストールされ起動します。

  5. アプリケーションのコードを表示・デバッグするためには、WebIDE 画面の「中断」ボタンをクリックします。Firefox Developer Tools に 現在の Firefox OS シミュレータで実行されているコードが表示されます。もしこのコードを変更すると、シミュレータ上にも反映されます。

アプリを実機で動かす

実機でアプリを動かすために、シミュレータと基本的には同じステップです。例外として以下の事をする必要があります。

  1. Firefox OS 1.2 以上が動作する実機の場合
  2. Windows を利用している場合は、実機の製造元から提供されているドライバーをインストールします。
  3. 実機のロックスクリーンを無効にします。( 環境設定 > 画面ロック > ロック画面 )
  4. 実機の開発者メニューを表示させます。( 環境設定 > 端末情報 > その他の情報 > 開発者メニュー)
  5. 実機のリモートでバッグを有効にします。( 環境設定 > 開発者 > USB経由のデバッグ > ADBと開発ツール)
  6. デスクトップ版 Firefox 上にADB Helper アドオンをインストールします。
  7. 実機と開発マシンを USB ケーブルで接続します。
  8. WebIDE 画面のランタイムを選択メニューの下のドロップダウンに表示される実機の名前をクリックします。

次のステップ

Web アプリをデバッグするために使う開発ツール類について熟知しました。では、World Clock アプリを作ってみましょう。

ドキュメントのタグと貢献者

 このページの貢献者: mantaroh
 最終更新者: mantaroh,