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

  • 558 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
558
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
1
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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