Firefox 開発ツール
Mozilla Japan

清水智公 (nshimizu@mozilla-japan.org)
2013/11/11
この資料について

•

JavaScript での開発を助けるツールの紹介

•

想定する読者

•

これまで Firebug を利用して来た方

•

JavaScript で開発をされて来た方

•

デバッガを利用したことがある方
...
Firebug との対応
Firebugの機能

開発ツールで対応するツール

コンソール

Web コンソール

HTML

インスペクタ

CSS

スタイルエディタ

スクリプト

JavaScript デバッガ

ネットワーク

ネット...
Firefox が標準で持つ開発ツール
•

Web コンソール

•

JavaScript デバッガ

•

インスペクタ

•

JavaScript プロファイラ

•

ネットワークモニタ

•

スタイルエディタ

•

レスポンシ...
今回取り上げるツール
•

Web コンソール

•

JavaScript デバッガ

•

インスペクタ

•

JavaScript プロファイラ

•

ネットワークモニタ

•

スタイルエディタ

•

レスポンシブデザインビュー
...
目次:開発ツールの紹介

•

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...
メニューの「Web 開発」から起動

9
Webコンソール

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

•

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

•

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

•

JavaScri...
出力のフィルタ

出力項目の on/off ができます

12
出力のフィルタ

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

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

•

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

•

タイマーによる処理時間の計...
console.trace()
https://developer.mozilla.org/ja/docs/Web/API/console

クリック

呼び出し時のコールスタックが参照できる

15
console.time() / console.timeEnd()
https://developer.mozilla.org/ja/docs/Web/API/console

console.time("answer time");	
al...
console.dir()
https://developer.mozilla.org/ja/docs/Web/API/console

•

引数に指定したオブジェクトの属性の、

インタラクティブリストを表示

•

属性値の構造をドリルダ...
オブジェクトインスペクタ
Objectのプロパティを閲覧できます

クリック

18
コマンドラインインタプリタ

JavaScript の文を実行できます

19
キーボードショートカット
キー

効果

↑

コマンド履歴で前を表示

↓

コマンド履歴で次を表示

Ctrl-a

カーソルを行の先頭へ移動

Ctrl-e

カーソルを行の末尾へ移動

Return

コマンドラインに入力したコマンドを...
支援コマンド
キー
$

効果
document.querySelector()と等価

$が定義されている場合は$を呼ぶ

$0

ページ内で選択されている要素

keys

引数オブジェクトのプロパティ名を一覧を返す

values

引数...
JavaScriptデバッガ

22
JavaScript デバッガ
https://developer.mozilla.org/ja/docs/Tools/Debugger

•

Firebug の JavaScript に対応するツール

•

「デバッガ」から起動

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
ネットワークモニタ
https://developer.mozilla.org/docs/Tools/Network_Monitor

•

Firebug のネットワークに対応するツール

•

「ネットワーク」をクリックして表示

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
https://addons.mozilla.org/firefox/addon/more-display-resolutions/

•

Firefox のアドオン

•

様々なデバイスの解...
タッチイベントのエミュレーション

•

レスポンシブデザインビューで
タッチイベントを

エミュレートできる

•

Firefox 26 以降

51
Firefox OS シミュレータ
https://addons.mozilla.org/firefox/addon/firefox-os-simulator/

•

Firefox のアドオン

•

開発ツールでのテスト、デバッグ

•

コ...
App Manager
https://developer.mozilla.org/docs/Mozilla/Firefox_OS/Using_the_App_Manager

•

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

•

標準で利...
リモートデバッグ
https://developer.mozilla.org/docs/Tools/Remote_Debugging

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

54
リモートデバッグ
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を参照してください

57
まとめ

58
Firebug と開発ツール
•

Mozilla は両者ともサポートしてゆく

•
•
•

開発ツールはDev-Toolsチームが開発
Firebug はスタッフとコミュニティによる開発

開発ツールの優位点

•
•
•

Firebug...
まとめ

•

Firefox 標準の開発ツールはFirebugに劣らない

•

Firebug よりも軽量

•

モバイル開発との親和性も高い

•

App Manager / Firefox OS シミュレータ

•

リモートデバッ...
Upcoming SlideShare
Loading in …5
×

Firefoxの開発ツール

8,769 views

Published on

Published in: Technology
0 Comments
28 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,769
On SlideShare
0
From Embeds
0
Number of Embeds
176
Actions
Shares
0
Downloads
44
Comments
0
Likes
28
Embeds 0
No embeds

No notes for slide

Firefoxの開発ツール

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

×