firefoxの開発ツール
TRANSCRIPT
この資料について
• JavaScript での開発を助けるツールの紹介 • 想定する読者 • これまで Firebug を利用して来た方 • JavaScript で開発をされて来た方 • デバッガを利用したことがある方
2
Firebug との対応
Firebugの機能 開発ツールで対応するツール
コンソール Web コンソール
HTML インスペクタ
CSS スタイルエディタ
スクリプト JavaScript デバッガ
ネットワーク ネットワークモニタ
クッキー ネットワークモニタ
3
Firefox が標準で持つ開発ツール
• Web コンソール • JavaScript デバッガ • インスペクタ • JavaScript プロファイラ • ネットワークモニタ • スタイルエディタ • レスポンシブデザインビュー
4
今回取り上げるツール
• Web コンソール • JavaScript デバッガ • インスペクタ • JavaScript プロファイラ • ネットワークモニタ • スタイルエディタ • レスポンシブデザインビュー
5
目次：開発ツールの紹介
• Web コンソール：p.10 • JavaScript デバッガ：p.22 • JavaScript プロファイラ：p.36 • ネットワークモニタ：p.41
6
目次：モバイル開発の支援
• レスポンシブデザインビュー：p.48 • Firefox OS シミュレータ：p.51 • App Manager：p.52 • リモートデバッグ：p. 53
7
詳細なドキュメントは
• Mozilla Developer Network を参照してください • MDN と略します • https://developer.mozilla.org/ • 開発ツールに関してはこちら：https://developer.mozilla.org/docs/Tools
8
メニューの「Web 開発」から起動
9
Webコンソール
10
Web コンソール
• Firebug のコンソールに相当するツール • エラー、警告、ログの出力 • JavaScriptの実行
https://developer.mozilla.org/ja/docs/Tools/Web_Console
11
出力のフィルタ
出力項目の on/off ができます
12
出力のフィルタ
ここに入力した文字列でフィルタできます
13
console.log 以外のロギング機能
• スタックトレース：console.trace() • タイマーによる処理時間の計測：console.time() / console.TimeEnd()
• オブジェクトプロパティの表示：console.dir()
https://developer.mozilla.org/ja/docs/Web/API/console
14
console.trace()https://developer.mozilla.org/ja/docs/Web/API/console
呼び出し時のコールスタックが参照できる
クリック
15
console.time() / console.timeEnd()
console.time("answer time");alert("Click to continue");console.timeEnd("answer time");
https://developer.mozilla.org/ja/docs/Web/API/console
警告ボックスが閉じられるまでの時間がログに出力される
16
console.dir()
• 引数に指定したオブジェクトの属性の、インタラクティブリストを表示
• 属性値の構造をドリルダウンできる
https://developer.mozilla.org/ja/docs/Web/API/console
17
オブジェクトインスペクタ
Objectのプロパティを閲覧できます
クリック
18
コマンドラインインタプリタ
JavaScript の文を実行できます
19
キーボードショートカット
20
キー 効果↑ コマンド履歴で前を表示↓ コマンド履歴で次を表示Ctrl-a カーソルを行の先頭へ移動Ctrl-e カーソルを行の末尾へ移動Return コマンドラインに入力したコマンドを実行
Shift-Return コマンドラインを1行増やすESC オートコンプリートのポップアップをキャンセルTAB オートコンプリートを実行して、最初の提案を採用
支援コマンド
21
キー 効果
＄document.querySelector()と等価
$が定義されている場合は$を呼ぶ$0 ページ内で選択されている要素keys 引数オブジェクトのプロパティ名を一覧を返すvalues 引数オブジェクトのプロパティ値を一覧を返すclear コンソールの出力をクリアinspect 引数オブジェクトのオブジェクトインスペクタを表示help ヘルプを表示
JavaScriptデバッガ
22
JavaScript デバッガ
• Firebug の “JavaScript” に対応するツール • 「デバッガ」から起動
https://developer.mozilla.org/ja/docs/Tools/Debugger
23
デバッガのUI
24
ツールバー
ソースリストペイン ソースコードペイン 変数ペイン
ソースリストペイン
• JSファイルの一覧 • 読み込みもとごとにグループ化されている
• ブレークポイントがファイルごとに表示されている
25
ブレークポイントの設定
設定したい行をクリック
26
ブレークポイント到達時
変数ペインが表示される
27
コールスタックの表示
ブレークした時点でのコールスタック
28
ウオッチ式：デバッグ用の式
• 変数ペインに式を追加できる • 任意の式を記述できる • ×ボタンで式を削除 • ブレーク時の環境で評価 • 値を変数ペインに出力
29
停止と復帰
押し込まれているときは、プログラムが停止している
30
ステップオーバー
現在の行をステップ実行する
31
ステップイン
現在の行にある関数呼び出しにステップイン
32
ステップオーバー
現在の関数を抜けるまでプログラムを実行
33
ブレークポイントの無効化
チェックを外すと無効になる
34
ブラックボックス化
目のアイコンをクリックするとファイル単位で ブレークポイントを無効化できる
35
ブレークポイントの削除
ブレークポイントのクリックで、削除
36
JavaScriptプロファイラ
37
JavaScript プロファイラ
• ボトルネックの発見に有用 • サンプリング型プロファイラ
https://developer.mozilla.org/docs/Tools/Profiler
「プロファイラ」から起動
38
タイムライン
• 横軸が時間、縦軸がコールスタックのサイズ
39
サンプリング結果の表示
• ドリルダウンでボトルネックを探索
40
タイムラインのズームイン
気になる範囲を選択してズーム
41
ネットワークモニタ
42
ネットワークモニタ
• Firebug のネットワークに対応するツール • 「ネットワーク」をクリックして表示
https://developer.mozilla.org/docs/Tools/Network_Monitor
43
通信の詳細
• 通信をクリックすると表示される • 「再送信」ボタンで同じ通信を再送信
44
Cookie の閲覧
• Cookie タブ • 送信した Cookie の詳細を表示
• 絞り込み可能
45
リクエストとレスポンスのタイミング
• 「タイミング」タブ • 通信時間を可視化 • リクエスト • レスポンス • レスポンス待ち
46
モバイル向けの開発支援
47
モバイル向け開発の支援ツール
• シミュレーション環境の提供 • レスポンシブデザインビュー • Firefox OS シミュレータ • App Manager (Firefox 26 以降) • リモートデバッグ機能
48
レスポンシブデザインビューhttps://developer.mozilla.org/docs/Tools/Responsive_Design_View
49
More Display Resolutions
• Firefox のアドオン • 様々なデバイスの解像度を、レスポンシブデザインビューのプリセットに追加
https://addons.mozilla.org/firefox/addon/more-display-resolutions/
50
タッチイベントのエミュレーション
• レスポンシブデザインビューでタッチイベントをエミュレートできる
• Firefox 26 以降
51
Firefox OS シミュレータ
• Firefox のアドオン • 開発ツールでのテスト、デバッグ • コンソール • デバッガの利用 • ネットワークモニタ • etc
https://addons.mozilla.org/firefox/addon/firefox-os-simulator/
52
App Manager
• Firefox OSアプリ開発・管理ツール • 標準で利用できるようになった • Firefox 26 以降 • 複数バージョンのシミュレータを利用可能 • 開発ツールを利用したテスト、デバッグ可能
https://developer.mozilla.org/docs/Mozilla/Firefox_OS/Using_the_App_Manager
53
リモートデバッグhttps://developer.mozilla.org/docs/Tools/Remote_Debugging
開発ツールを使って、Android端末で動作するコードを リアルタイムにデバッグできる
54
リモートデバッグ
• リモートで実行しているコードのデバッグ • リモート • 同一デバイス内の異なるプロセス • USB接続されているAndroid端末上のFirefox • USB接続されているFirefox OS端末
https://developer.mozilla.org/docs/Tools/Remote_Debugging
55
リモートデバッグにはADBが必要
• デスクトップ側にインストールする • インストール方法 1. Android SDK をインストールする
2. Android SDK から Android Platform Tools をインストール
3. platform-tools ディレクトリ内にadbを配置
56
Android端末との接続
1. USBケーブルで接続する
2. Android端末側のFirefoxで、 リモートデバッグを有効にする
3. デスクトップ側の開発ツールから接続
!
詳しくはMDNを参照してください
57
まとめ
58
Firebug と開発ツール
• Mozilla は両者ともサポートしてゆく • 開発ツールはDev-Toolsチームが開発 • Firebug はスタッフとコミュニティによる開発 • 開発ツールの優位点 • Firebug と比べて軽量 • Firefox OSやAndroid版Firefoxとの親和性 • Firebugの優位点：豊富なプラグイン
59
まとめ
• Firefox 標準の開発ツールはFirebugに劣らない • Firebug よりも軽量 • モバイル開発との親和性も高い • App Manager / Firefox OS シミュレータ • リモートデバッグ
60