Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Firefox 開発ツールコレクション
神戸ITフェスティバル、2013/12/14

Mozilla Japan テクニカルマーケティング
清水智公 (nshimizu@mozilla-japan.org)
about:mozilla

2
3
4
5
今日の内容

•

Firefox が標準で持っている開発ツールの紹介

•

機能

•

アプリマネージャとFirefox OS シミュレータ

•

開発ツールの利用

•

インスペクタ / スタイルエディタ

•

デバッガ / プロ...
Mozillaの提供する開発ツール群

遊びながら
アプリ開発を体験

読み、書き、
コーディング

本格的な開発

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

10
アプリマネージャ

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

•

Firefox OSアプリ開発・管理ツール

•

標準で利用でき...
アプリマネージャ
https://developer.mozilla.org/docs/Mozilla/Firefox_OS/Using_the_App_Manager

13
Firefox OS シミュレータ:

アプリマネージャのアドオン

ADB Helper もインストールしておくと実機でのデバッグに便利

14
アプリパネル:アプリの管理画面

15
端末パネル:接続中の端末を制御

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

17
Firefox OS シミュレータの起動

クリック

クリック

18
Firefox OS シミュレータ

•

マウスカーソルが指

•
•
•

クリックでタップ

•
ホームボタン

ドラッグでスワイプ

長押しでロングタップ

ホームボタン長押しで、

アプリきりかえ&停止

19
アプリパネルでアプリを追加

クリックしてアプリのフォルダを選択

20
「更新」でアプリをインストール

クリックで端末にアプリがインストールされる

21
起動中のシミュレータは

端末パネルから制御できる

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

停止

デバッグ

23
アプリのリロード:停止→更新

2.更新

1. 停止

24
開発ツールの利用

25
デバッグ→開発ツール起動

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

26
インスペクタ

シミュレータの画面をクリックして要素を選択できる

27
スタイルエディタ:

確認しながらスタイルの修正

CSS への変更が反映される

28
Web コンソール
https://developer.mozilla.org/ja/docs/Tools/Web_Console

•

Firebug のコンソールに相当するツール

•

エラー、警告、ログの出力

•

JavaScri...
出力のフィルタ

出力項目の on / off が可能

30
console.log 以外のロギング機能
https://developer.mozilla.org/ja/docs/Web/API/console

•

スタックトレース:console.trace()

•

タイマーによる処理時間の計...
JavaScriptデバッガ

32
デバッガ:ブレークポイントの設定

処理を中断したい行をクリック

33
デバッガ:ウォッチ式の追加

•

変数ペインに式を追加できる

•

任意の式を記述できる

•

×ボタンで式を削除

•

ブレーク時の環境で評価

•

値を変数ペインに出力

34
デバッガ:停止と復帰

押し込まれているときは、プログラムが停止している

35
デバッガ:ステップオーバー

現在の行をステップ実行する

36
デバッガ:ステップイン

現在の行にある関数呼び出しにステップイン

37
デバッガ:ステップオーバー

現在の関数を抜けるまでプログラムを実行

38
プロファイラ:ボトルネックの発見

記録開始→処理の実行→記録停止→結果の分析

39
実機でのデバッグ

40
実機でもシミュレータと同様に

デバッグできる

•

端末側の条件

•
•
•

Firefox OS 1.2 以上であること
Geeksphone はイメージが公開されている

デスクトップ側の条件

•

ADB Helper Add-...
Firefox OS端末がなくても大丈夫

•

FirefoxのインストールされたAndroid端末で

実機同様のテストが可能

•
•
•

アプリのインストールができる
ほとんどのWeb APIは動作する

リモートデバッグ:

シミュ...
リモートデバッグ
https://developer.mozilla.org/docs/Tools/Remote_Debugging

開発ツールを使って、Android端末で動作するコードを
リアルタイムにデバッグできる

43
リモートデバッグ
https://developer.mozilla.org/docs/Tools/Remote_Debugging

•

リモートで実行しているコードのデバッグ

•

リモート

•

同一デバイス内の異なるプロセス

•...
リモートデバッグにはADBが必要

•

デスクトップ側にインストールする

•

インストール方法
1. Android SDK をインストールする
2. Android SDK から Android Platform Tools を
インス...
Android端末との接続
1. USBケーブルで接続する
2. Android端末側のFirefoxで、

リモートデバッグを有効にする
3. デスクトップ側の開発ツールから接続
!

詳しくはMDNを参照してください

46
まとめ

47
アプリマネージャ&開発ツール

•

これからはアプリマネージャ

•

Webサイトを作るようにデバッグができる

•

開発ツール

•

実機、シミュレータともに利用可能

•

リモートデバッグを利用すると、

Android 端末を利...
神戸ITフェスティバル2013「Firefox開発ツールコレクション」
神戸ITフェスティバル2013「Firefox開発ツールコレクション」
Upcoming SlideShare
Loading in …5
×

神戸ITフェスティバル2013「Firefox開発ツールコレクション」

1,223 views

Published on

  • Be the first to comment

神戸ITフェスティバル2013「Firefox開発ツールコレクション」

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

×