神戸itフェスティバル2013「firefox開発ツールコレクション」
TRANSCRIPT
3
4
5
今日の内容
• Firefox が標準で持っている開発ツールの紹介 • 機能 • アプリマネージャとFirefox OS シミュレータ • 開発ツールの利用 • インスペクタ / スタイルエディタ • デバッガ / プロファイラ
8
Mozillaの提供する開発ツール群
9
遊びながら アプリ開発を体験
読み、書き、 コーディング 本格的な開発
アプリマネージャ
11
アプリマネージャ
• Firefox OSアプリ開発・管理ツール • 標準で利用できるようになった • Firefox 26 以降 • 複数バージョンのシミュレータを利用可能 • 開発ツールを利用したテスト、デバッグ可能
https://developer.mozilla.org/docs/Mozilla/Firefox_OS/Using_the_App_Manager
12
アプリマネージャhttps://developer.mozilla.org/docs/Mozilla/Firefox_OS/Using_the_App_Manager
13
Firefox OS シミュレータ：アプリマネージャのアドオン
14
ADB Helper もインストールしておくと実機でのデバッグに便利
アプリパネル：アプリの管理画面
15
端末パネル：接続中の端末を制御
16
許可設定で権限を確認できる
17
Firefox OS シミュレータの起動
18 18
クリック
クリック
Firefox OS シミュレータ
• マウスカーソルが指 • ドラッグでスワイプ • クリックでタップ • 長押しでロングタップ • ホームボタン長押しで、アプリきりかえ＆停止
19
ホームボタン
アプリパネルでアプリを追加
20
クリックしてアプリのフォルダを選択
「更新」でアプリをインストール
21
クリックで端末にアプリがインストールされる
起動中のシミュレータは 端末パネルから制御できる
22
アプリの起動、停止、デバッグ
23
起動
停止
デバッグ
アプリのリロード：停止→更新
24
1. 停止
2.更新
開発ツールの利用
25
デバッグ→開発ツール起動
26
クリックで開発ツールが起動し、そのアプリをデバッグできる
インスペクタ
27
シミュレータの画面をクリックして要素を選択できる
スタイルエディタ：確認しながらスタイルの修正
28
CSS への変更が反映される
Web コンソール
• Firebug のコンソールに相当するツール • エラー、警告、ログの出力 • JavaScriptの実行
https://developer.mozilla.org/ja/docs/Tools/Web_Console
29
出力のフィルタ
30
出力項目の on / off が可能
console.log 以外のロギング機能
• スタックトレース：console.trace() • タイマーによる処理時間の計測：console.time() / console.TimeEnd()
• オブジェクトプロパティの表示：console.dir()
https://developer.mozilla.org/ja/docs/Web/API/console
31
JavaScriptデバッガ
32
デバッガ：ブレークポイントの設定
33
処理を中断したい行をクリック
デバッガ：ウォッチ式の追加
• 変数ペインに式を追加できる • 任意の式を記述できる • ×ボタンで式を削除 • ブレーク時の環境で評価 • 値を変数ペインに出力
34
デバッガ：停止と復帰
押し込まれているときは、プログラムが停止している
35
デバッガ：ステップオーバー
現在の行をステップ実行する
36
デバッガ：ステップイン
現在の行にある関数呼び出しにステップイン
37
デバッガ：ステップオーバー
現在の関数を抜けるまでプログラムを実行
38
プロファイラ：ボトルネックの発見
39
記録開始→処理の実行→記録停止→結果の分析
実機でのデバッグ
40
実機でもシミュレータと同様に デバッグできる
• 端末側の条件 • Firefox OS 1.2 以上であること • Geeksphone はイメージが公開されている • デスクトップ側の条件 • ADB Helper Add-onのインストール • もしくはadbがインストールされていること
41
Firefox OS端末がなくても大丈夫
• FirefoxのインストールされたAndroid端末で実機同様のテストが可能
• アプリのインストールができる • ほとんどのWeb APIは動作する • リモートデバッグ：シミュレータと同様のデバッグが可能
42
リモートデバッグhttps://developer.mozilla.org/docs/Tools/Remote_Debugging
開発ツールを使って、Android端末で動作するコードを リアルタイムにデバッグできる
43
リモートデバッグ
• リモートで実行しているコードのデバッグ • リモート • 同一デバイス内の異なるプロセス • USB接続されているAndroid端末上のFirefox • USB接続されているFirefox OS端末
https://developer.mozilla.org/docs/Tools/Remote_Debugging
44
リモートデバッグにはADBが必要
• デスクトップ側にインストールする • インストール方法 1. Android SDK をインストールする
2. Android SDK から Android Platform Tools をインストール
3. platform-tools ディレクトリ内にadbを配置
45
Android端末との接続
1. USBケーブルで接続する
2. Android端末側のFirefoxで、 リモートデバッグを有効にする
3. デスクトップ側の開発ツールから接続
!
詳しくはMDNを参照してください
46
まとめ
47
アプリマネージャ＆開発ツール
• これからはアプリマネージャ • Webサイトを作るようにデバッグができる • 開発ツール • 実機、シミュレータともに利用可能 • リモートデバッグを利用すると、Android 端末を利用したデバッグも可能
48