1. Firefox 開発ツールコレクション
神戸ITフェスティバル、2013/12/14
Mozilla Japan テクニカルマーケティング
清水智公 (nshimizu@mozilla-japan.org)

2. about:mozilla
2

3. 3

4. 4

5. 5

8. 今日の内容
•
Firefox が標準で持っている開発ツールの紹介
•
機能
•
アプリマネージャとFirefox OS シミュレータ
•
開発ツールの利用
•
インスペクタ / スタイルエディタ
•
デバッガ / プロファイラ
8

9. Mozillaの提供する開発ツール群
遊びながら
アプリ開発を体験
読み、書き、
コーディング
本格的な開発
9

10. Mozilla Developer Network
https://developer.mozilla.org/
10

11. アプリマネージャ
11

12. アプリマネージャ
https://developer.mozilla.org/docs/Mozilla/Firefox_OS/Using_the_App_Manager
•
Firefox OSアプリ開発・管理ツール
•
標準で利用できるようになった
•
Firefox 26 以降
•
複数バージョンのシミュレータを利用可能
•
開発ツールを利用したテスト、デバッグ可能
12

13. アプリマネージャ
https://developer.mozilla.org/docs/Mozilla/Firefox_OS/Using_the_App_Manager
13

14. Firefox OS シミュレータ：
アプリマネージャのアドオン
ADB Helper もインストールしておくと実機でのデバッグに便利
14

15. アプリパネル：アプリの管理画面
15

16. 端末パネル：接続中の端末を制御
16

17. 許可設定で権限を確認できる
17

18. Firefox OS シミュレータの起動
クリック
クリック
18

19. Firefox OS シミュレータ
•
マウスカーソルが指
•
•
•
クリックでタップ
•
ホームボタン
ドラッグでスワイプ
長押しでロングタップ
ホームボタン長押しで、
アプリきりかえ＆停止
19

20. アプリパネルでアプリを追加
クリックしてアプリのフォルダを選択
20

21. 「更新」でアプリをインストール
クリックで端末にアプリがインストールされる
21

22. 起動中のシミュレータは
端末パネルから制御できる
22

23. アプリの起動、停止、デバッグ
起動
停止
デバッグ
23

24. アプリのリロード：停止→更新
2.更新
1. 停止
24

25. 開発ツールの利用
25

26. デバッグ→開発ツール起動
クリックで開発ツールが起動し、そのアプリをデバッグできる
26

27. インスペクタ
シミュレータの画面をクリックして要素を選択できる
27

28. スタイルエディタ：
確認しながらスタイルの修正
CSS への変更が反映される
28

29. Web コンソール
https://developer.mozilla.org/ja/docs/Tools/Web_Console
•
Firebug のコンソールに相当するツール
•
エラー、警告、ログの出力
•
JavaScriptの実行
29

30. 出力のフィルタ
出力項目の on / off が可能
30

31. console.log 以外のロギング機能
https://developer.mozilla.org/ja/docs/Web/API/console
•
スタックトレース：console.trace()
•
タイマーによる処理時間の計測：
console.time() / console.TimeEnd()
•
オブジェクトプロパティの表示：console.dir()
31

32. JavaScriptデバッガ
32

33. デバッガ：ブレークポイントの設定
処理を中断したい行をクリック
33

34. デバッガ：ウォッチ式の追加
•
変数ペインに式を追加できる
•
任意の式を記述できる
•
×ボタンで式を削除
•
ブレーク時の環境で評価
•
値を変数ペインに出力
34

35. デバッガ：停止と復帰
押し込まれているときは、プログラムが停止している
35

36. デバッガ：ステップオーバー
現在の行をステップ実行する
36

37. デバッガ：ステップイン
現在の行にある関数呼び出しにステップイン
37

38. デバッガ：ステップオーバー
現在の関数を抜けるまでプログラムを実行
38

39. プロファイラ：ボトルネックの発見
記録開始→処理の実行→記録停止→結果の分析
39

40. 実機でのデバッグ
40

41. 実機でもシミュレータと同様に
デバッグできる
•
端末側の条件
•
•
•
Firefox OS 1.2 以上であること
Geeksphone はイメージが公開されている
デスクトップ側の条件
•
ADB Helper Add-onのインストール
•
もしくはadbがインストールされていること
41

42. Firefox OS端末がなくても大丈夫
•
FirefoxのインストールされたAndroid端末で
実機同様のテストが可能
•
•
•
アプリのインストールができる
ほとんどのWeb APIは動作する
リモートデバッグ：
シミュレータと同様のデバッグが可能
42

43. リモートデバッグ
https://developer.mozilla.org/docs/Tools/Remote_Debugging
開発ツールを使って、Android端末で動作するコードを
リアルタイムにデバッグできる
43

44. リモートデバッグ
https://developer.mozilla.org/docs/Tools/Remote_Debugging
•
リモートで実行しているコードのデバッグ
•
リモート
•
同一デバイス内の異なるプロセス
•
USB接続されているAndroid端末上のFirefox
•
USB接続されているFirefox OS端末
44

45. リモートデバッグにはADBが必要
•
デスクトップ側にインストールする
•
インストール方法
1. Android SDK をインストールする
2. Android SDK から Android Platform Tools を
インストール
3. platform-tools ディレクトリ内にadbを配置
45

46. Android端末との接続
1. USBケーブルで接続する
2. Android端末側のFirefoxで、
リモートデバッグを有効にする
3. デスクトップ側の開発ツールから接続
!
詳しくはMDNを参照してください
46

47. まとめ
47

48. アプリマネージャ＆開発ツール
•
これからはアプリマネージャ
•
Webサイトを作るようにデバッグができる
•
開発ツール
•
実機、シミュレータともに利用可能
•
リモートデバッグを利用すると、
Android 端末を利用したデバッグも可能
48