Download as PDF, PPTX
Firefoxの開発ツール
- 1. Firefox 開発ツール Mozilla Japan 清水智公([email protected]) 2013/11/11
- 2. この資料について • JavaScript での開発を助けるツールの紹介 • 想定する読者 • これまで Firebugを利用して来た方 • JavaScript で開発をされて来た方 • デバッガを利用したことがある方 2
- 3. Firebug との対応 Firebugの機能 開発ツールで対応するツール コンソール Web コンソール HTML インスペクタ CSS スタイルエディタ スクリプト JavaScriptデバッガ ネットワーク ネットワークモニタ クッキー ネットワークモニタ 3
- 4. Firefox が標準で持つ開発ツール • Web コンソール • JavaScriptデバッガ • インスペクタ • JavaScript プロファイラ • ネットワークモニタ • スタイルエディタ • レスポンシブデザインビュー 4
- 5. 今回取り上げるツール • Web コンソール • JavaScript デバッガ • インスペクタ • JavaScriptプロファイラ • ネットワークモニタ • スタイルエディタ • レスポンシブデザインビュー 5
- 6. 目次：開発ツールの紹介 • Web コンソール：p.10 • JavaScript デバッガ：p.22 • JavaScriptプロファイラ：p.36 • ネットワークモニタ：p.41 6
- 7. 目次：モバイル開発の支援 • レスポンシブデザインビュー：p.48 • Firefox OS シミュレータ：p.51 • AppManager：p.52 • リモートデバッグ：p. 53 7
- 8. 詳細なドキュメントは • Mozilla Developer Networkを参照してください • • • MDN と略します https://developer.mozilla.org/ 開発ツールに関してはこちら： https://developer.mozilla.org/docs/Tools 8
- 9.
- 10.
- 11.
- 12.
- 13.
- 14. console.log 以外のロギング機能 https://developer.mozilla.org/ja/docs/Web/API/console • スタックトレース：console.trace() • タイマーによる処理時間の計測： console.time() /console.TimeEnd() • オブジェクトプロパティの表示：console.dir() 14
- 15.
- 16. console.time() / console.timeEnd() https://developer.mozilla.org/ja/docs/Web/API/console console.time("answertime"); alert("Click to continue"); console.timeEnd("answer time"); 警告ボックスが閉じられるまでの時間がログに出力される 16
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23. JavaScript デバッガ https://developer.mozilla.org/ja/docs/Tools/Debugger • Firebug のJavaScript に対応するツール • 「デバッガ」から起動 23
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45. Cookie の閲覧 • Cookie タブ • 送信したCookie の 詳細を表示 • 絞り込み可能 45
- 46.
- 47.
- 48. モバイル向け開発の支援ツール • シミュレーション環境の提供 • • Firefox OS シミュレータ • • レスポンシブデザインビュー AppManager (Firefox 26 以降) リモートデバッグ機能 48
- 49.
- 50. More Display Resolutions https://addons.mozilla.org/firefox/addon/more-display-resolutions/ • Firefoxのアドオン • 様々なデバイスの解像度を、レスポンシブデザ インビューのプリセットに追加 50
- 51.
- 52. Firefox OS シミュレータ https://addons.mozilla.org/firefox/addon/firefox-os-simulator/ • Firefoxのアドオン • 開発ツールでのテスト、デバッグ • コンソール • デバッガの利用 • ネットワークモニタ • etc 52
- 53. App Manager https://developer.mozilla.org/docs/Mozilla/Firefox_OS/Using_the_App_Manager • Firefox OSアプリ開発・管理ツール • 標準で利用できるようになった • Firefox26 以降 • 複数バージョンのシミュレータを利用可能 • 開発ツールを利用したテスト、デバッグ可能 53
- 54.
- 55.
- 56. リモートデバッグにはADBが必要 • デスクトップ側にインストールする • インストール方法 1. Android SDKをインストールする 2. Android SDK から Android Platform Tools を インストール 3. platform-tools ディレクトリ内にadbを配置 56
- 57. Android端末との接続 1. USBケーブルで接続する 2. Android端末側のFirefoxで、 リモートデバッグを有効にする 3.デスクトップ側の開発ツールから接続 ! 詳しくはMDNを参照してください 57
- 58.
- 59. Firebug と開発ツール • Mozilla は両者ともサポートしてゆく • • • 開発ツールはDev-Toolsチームが開発 Firebugはスタッフとコミュニティによる開発 開発ツールの優位点 • • • Firebug と比べて軽量 Firefox OSやAndroid版Firefoxとの親和性 Firebugの優位点：豊富なプラグイン 59
- 60. まとめ • Firefox 標準の開発ツールはFirebugに劣らない • Firebug よりも軽量 • モバイル開発との親和性も高い • AppManager / Firefox OS シミュレータ • リモートデバッグ 60