1. Firefox 開発ツール
Mozilla Japan
清水智公 (nshimizu@mozilla-japan.org)
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
•
App Manager：p.52
•
リモートデバッグ：p. 53
7

8. 詳細なドキュメントは
•
Mozilla Developer Network を参照してください
•
•
•
MDN と略します
https://developer.mozilla.org/
開発ツールに関してはこちら：
https://developer.mozilla.org/docs/Tools
8

9. メニューの「Web 開発」から起動
9

10. Webコンソール
10

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

12. 出力のフィルタ
出力項目の on/off ができます
12

13. 出力のフィルタ
ここに入力した文字列でフィルタできます
13

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

15. console.trace()
https://developer.mozilla.org/ja/docs/Web/API/console
クリック
呼び出し時のコールスタックが参照できる
15

16. console.time() / console.timeEnd()
https://developer.mozilla.org/ja/docs/Web/API/console
console.time("answer time");
alert("Click to continue");
console.timeEnd("answer time");
警告ボックスが閉じられるまでの時間がログに出力される
16

17. console.dir()
https://developer.mozilla.org/ja/docs/Web/API/console
•
引数に指定したオブジェクトの属性の、
インタラクティブリストを表示
•
属性値の構造をドリルダウンできる
17

18. オブジェクトインスペクタ
Objectのプロパティを閲覧できます
クリック
18

19. コマンドラインインタプリタ
JavaScript の文を実行できます
19

20. キーボードショートカット
キー
効果
↑
コマンド履歴で前を表示
↓
コマンド履歴で次を表示
Ctrl-a
カーソルを行の先頭へ移動
Ctrl-e
カーソルを行の末尾へ移動
Return
コマンドラインに入力したコマンドを実行
Shift-Return
コマンドラインを1行増やす
ESC
オートコンプリートのポップアップをキャンセル
TAB
オートコンプリートを実行して、最初の提案を採用
20

21. 支援コマンド
キー
＄
効果
document.querySelector()と等価
$が定義されている場合は$を呼ぶ
$0
ページ内で選択されている要素
keys
引数オブジェクトのプロパティ名を一覧を返す
values
引数オブジェクトのプロパティ値を一覧を返す
clear
コンソールの出力をクリア
inspect
引数オブジェクトのオブジェクトインスペクタを表示
help
ヘルプを表示
21

22. JavaScriptデバッガ
22

23. JavaScript デバッガ
https://developer.mozilla.org/ja/docs/Tools/Debugger
•
Firebug の JavaScript に対応するツール
•
「デバッガ」から起動
23

24. デバッガのUI
ツールバー
ソースリストペイン
ソースコードペイン
変数ペイン
24

25. ソースリストペイン
•
JSファイルの一覧
•
読み込みもとごとに
グループ化されている
•
ブレークポイントが
ファイルごとに表示されている
25

26. ブレークポイントの設定
設定したい行をクリック
26

27. ブレークポイント到達時
変数ペインが表示される
27

28. コールスタックの表示
ブレークした時点でのコールスタック
28

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

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

31. ステップオーバー
現在の行をステップ実行する
31

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

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

34. ブレークポイントの無効化
チェックを外すと無効になる
34

35. ブラックボックス化
目のアイコンをクリックするとファイル単位で
ブレークポイントを無効化できる
35

36. ブレークポイントの削除
ブレークポイントのクリックで、削除
36

37. JavaScriptプロファイラ
37

38. JavaScript プロファイラ
https://developer.mozilla.org/docs/Tools/Profiler
「プロファイラ」から起動
•
ボトルネックの発見に有用
•
サンプリング型プロファイラ
38

39. タイムライン
•
横軸が時間、縦軸がコールスタックのサイズ
39

40. サンプリング結果の表示
•
ドリルダウンでボトルネックを探索
40

41. タイムラインのズームイン
気になる範囲を選択してズーム
41

42. ネットワークモニタ
42

43. ネットワークモニタ
https://developer.mozilla.org/docs/Tools/Network_Monitor
•
Firebug のネットワークに対応するツール
•
「ネットワーク」をクリックして表示
43

44. 通信の詳細
•
通信をクリックすると表示される
•
「再送信」ボタンで同じ通信を再送信
44

45. Cookie の閲覧
•
Cookie タブ
•
送信した Cookie の
詳細を表示
•
絞り込み可能
45

46. リクエストとレスポンスのタイミング
•
「タイミング」タブ
•
通信時間を可視化
•
リクエスト
•
レスポンス
•
レスポンス待ち
46

47. モバイル向けの開発支援
47

48. モバイル向け開発の支援ツール
•
シミュレーション環境の提供
•
•
Firefox OS シミュレータ
•
•
レスポンシブデザインビュー
App Manager (Firefox 26 以降)
リモートデバッグ機能
48

49. レスポンシブデザインビュー
https://developer.mozilla.org/docs/Tools/Responsive_Design_View
49

50. More Display Resolutions
https://addons.mozilla.org/firefox/addon/more-display-resolutions/
•
Firefox のアドオン
•
様々なデバイスの解像度を、レスポンシブデザ
インビューのプリセットに追加
50

51. タッチイベントのエミュレーション
•
レスポンシブデザインビューで
タッチイベントを
エミュレートできる
•
Firefox 26 以降
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アプリ開発・管理ツール
•
標準で利用できるようになった
•
Firefox 26 以降
•
複数バージョンのシミュレータを利用可能
•
開発ツールを利用したテスト、デバッグ可能
53

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

55. リモートデバッグ
https://developer.mozilla.org/docs/Tools/Remote_Debugging
•
リモートで実行しているコードのデバッグ
•
リモート
•
同一デバイス内の異なるプロセス
•
USB接続されているAndroid端末上のFirefox
•
USB接続されているFirefox OS端末
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. まとめ
58

59. Firebug と開発ツール
•
Mozilla は両者ともサポートしてゆく
•
•
•
開発ツールはDev-Toolsチームが開発
Firebug はスタッフとコミュニティによる開発
開発ツールの優位点
•
•
•
Firebug と比べて軽量
Firefox OSやAndroid版Firefoxとの親和性
Firebugの優位点：豊富なプラグイン
59

60. まとめ
•
Firefox 標準の開発ツールはFirebugに劣らない
•
Firebug よりも軽量
•
モバイル開発との親和性も高い
•
App Manager / Firefox OS シミュレータ
•
リモートデバッグ
60