アプリの実行とデバッグ

アプリを実行する

アプリを実行する準備ができたら、ランタイムサイドバーでランタイムを選択しなければなりません。使用できるランタイムがない場合は、ランタイムのセットアップで追加方法を確認してください。

WebIDE のツールバーの中央にある "インストールして実行" が使用可能になります。このボタンをクリックすると、選択した実行環境にアプリをインストールして実行します:

カスタムビルドステップを実行する

アプリをデバイスに送信する前に、独自のコマンドを実行しなければならない場合があります。例えば JavaScript の依存関係を満たしたり CSS のミニファイ処理を行ったりしたい場合、あるいは Gaia アプリや Cordova アプリの開発で WebIDE を使用する場合は、カスタムビルドステップが必要になります。

アプリのルートに "package.json" という名前のファイルを置くことによって、それを実現できます。このファイルは node.js ライブラリのパッケージ作成に使用するものと同じであり、すでにプロジェクトのルートに存在するでしょう。ファイルがない場合は、作成することもできます。

WebIDE は package.json 内の、"webide" という名前のプロパティを参照します。以下の表で、"webide" の構文をまとめています:

`webide`			WebIDE への指示を含むオブジェクト。これは、省略可能なプロパティを 2 つ持ちます: "`prepackage`" および "`packageDir`"。
	`prepackage`		アプリをランタイムに送信する前に実行する、WebIDE 向けのコマンドを指定します。文字列を指定すると、コマンドとしてそのまま実行します。または必須の "`command`" と任意で指定できる "`env`"、"`args`"、"`cwd`" を持つオブジェクトを指定します。
		`command`	コマンドシェルで実行するコマンドです。例: "`echo`"
		`env`	設定する環境変数です。 "NAME=value" という形式の文字列を、配列で指定します。例: `["NAME=world"]`
		`args`	コマンドに渡す引数です。これは、文字列の配列で指定します。
		`cwd`	コマンドを実行するディレクトリです。絶対パスか、カレントディレクトリに対する相対パスを指定できます。
	`packageDir`		WebIDE がアプリをランタイムに送信するために、参照すべきディレクトリです。 WebIDE のプロジェクトを、パッケージ型アプリをビルドするためのソースとしたい場合に、これを使用してください。`prepackage` で指定したビルドステップによって構築されたアプリが、出力先ディレクトリに置かれます。出力先ディレクトリは `packageDir` で指定すると、WebIDE がアプリをプロジェクトのディレクトリではなく、出力先ディレクトリからインストールします。このプロパティは省略可能であり、省略した場合は package.json が省略されているかのように、プロジェクトのルートディレクトリを参照してアプリを作成します。

Gaia アプリを構築するための "package.json":

{
  "webide": {
    "prepackage": {
      "command": "make",
      "env": ["APP=settings"],
      "cwd": "../.."
    },
    "packageDir": "../../build_stage/settings/"
  }
}

Cordova 用の "package.json":

{
  "webide": {
    "prepackage": "cordova prepare",
    "packageDir": "./platforms/firefoxos/www"
  }
}

WebIDE は自動的に Cordova アプリを検出します。また Cordova アプリであると判断した場合は、その内容から自動的に "package.json" ファイルを生成します。WebIDE で Cordova アプリを扱うをご覧ください。

アプリをデバッグする

アプリをデバッグする場合は、レンチのアイコンをクリックしてください。開発ツールのツールボックスが現れて、アプリに接続されます:

どのツールを使用できるかはランタイムに依存しますが、少なくとも基本的なツールであるインスペクタ、コンソール、JavaScript デバッガ、スタイルエディタ、プロファイラ、スクラッチパッドを使用できます。Web ページと同様に、ツール内で施した変更点は直ちにアプリへ反映されますが、それは一時的です。逆に、エディタペインで施した変更点はディスクに直接保存できますが、アプリを再起動しなければ反映されません。

アプリのパフォーマンスについて関心があるのでしたら、ランタイムでのアプリの影響を WebIDE で測定する方法がいくつかあります:

モニタパネルで、デバイスのパフォーマンスの概要を提供します。この情報は、アプリのメモリ消費が突然過度に増加 (メモリリーク) するなどの問題の検出に役立ちます。
プロファイラツールで、単一のアプリの経過を詳細に分析することができます。これは、既知のパフォーマンスの問題の調査で特に有用です。

無制限のアプリデバッグ (認定アプリ、メインプロセスなど)

シミュレータ、b2g デスクトップ、実機に対してデバッガを実行することができます。

ランタイムとしてシミュレータを選択しているときは、自分のアプリだけでなく認定アプリを含むランタイム内の全アプリが表示され、またデバッグも可能です:

ただし、実機に接続する場合に適用されるセキュリティポリシーがあります:

バージョン 2.1 までの Firefox OS を実行するデバイスでは、認定アプリを除くすべてのインストール済みアプリ (すなわち特権アプリ、Web/通常のアプリ) が、デフォルトで "ランタイムアプリ" に表示されます。
Firefox OS 2.1 以降では、アプリの種類にかかわらず開発ツールや WebIDE を使用してインストールしたアプリだけが、"ランタイムアプリ" に表示されるよう変更しました。この変更は、アプリが作成する可能性がある、潜在的な機微データを保護するために行いました。

この制限を取り除く方法:

デバイスで Firefox OS 1.2 以上の開発ビルドを実行していなければなりません
開発ツールの制限された権限設定を無効化しなければなりません

開発ツールの制限された権限を無効化するにはランタイムに接続して、ランタイムサイドバーの "ランタイム情報" を選択してください。この後の手順は、デバッグ対象のランタイムにより異なります:

実機
- デバイスが Rooted 状態であるなら、"request higher privileges" をクリックすると認定アプリのデバッグが可能になります (Firefox OS が再起動します)。'ランタイムを選択' ドロップダウンメニューでデバイスを再度選択することが必要になるでしょう。
- Rooted 状態にできない場合は、Firefox OS 2.2 以降の開発者設定に Reset and enable full DevTools という項目があります。これを有効にするとどのデバイスでも (セキュリティ上の理由から) すべてのユーザデータを削除して、デバイスをリセットした上で無制限の権限が有効になります。
シミュレータ
- シミュレータは、無制限のアプリデバッグがデフォルトで有効です。
B2G デスクトップ
- 無制限のアプリデバッグを有効にするため、接続する前に B2G デスクトップクライアントの設定を手動で変更してください。

以上で (または B2G デスクトップクライアントの再起動後に)、WebIDE でデバイス上の全認定アプリを確認できます。

アドオンのデバッグ

バグ 1185464 のため、現在は WebIDE でアドオンのデバッグを行うことができません。