Developer Tools    ~Try Firefox Developer Tools~Slides @ CSS Nite in Osaka vol.31 on 2012/06/29           by Tomoya ASAI (...
about:
about:dynamis                   Mozilla Japan               http://dynamis.jp                @dynamitter            facebo...
about:slides           下線なしリンクも使います           コードは要点だけの簡略版               特に注意が必要なとき以外は               -moz- 以外の接頭辞など割愛   画像...
Page Source
ページのソースを表示    ありますよね、当然。     ショートカット: Ctrl+U     Fx12 から行番号表示に対応    選択部分のソースを表示     範囲選択して右クリック
Inspector
https://developer.mozilla.org/ja/Tools/Page_Inspector
インスペクタ       要素を調査するツール         ショートカット: Ctrl+Alt+I         マウスオーバーで要素を選択       Fx14 でメニューを追加         左: 対象要素の再選択         ...
HTML パネル                  HTML リアルタイムエディタ         point!    属性はダブルクリックで編集可                   右クリックから要素の削除、                ...
スタイルパネル                CSS リアルタイムエディタ                  スタイルの編集、オンオフ                  計算値スタイルの確認                  プロパティヘルプは...
レイアウトビュー            CSS ボックスのサイズ確認            Fx15 から搭載            width x height と            margin, border, padding を確認...
3D インスペクタ (旧称Tilt)              DOM 構造を3D可視化                 テクノロジーの無駄遣い                 開発時は無駄機能満載だった...       point! 画面外...
Style Editor
https://developer.mozilla.org/ja/Tools/Style_Editor
スタイルエディタ            ページの全 CSS 一括編集   point!   編集した CSS は保存可能            新規 CSS 作成や読み込みも可能            ファイル単位のオンオフも         ...
Responsive
レスポンシブデザインビュー            任意解像度での表示を確認   point!   縦横サイズ入れ替え機能も            実ウィンドウより大きな画面も
Web Console
https://developer.mozilla.org/ja/Tools/Web_Console
https://developer.mozilla.org/ja/Tools/Web_Console
Web コンソール      基本的なコンソール         ショートカット: Ctrl+Alt+K         表示位置: 上、下、別ウィンドウ         メッセージのフィルタ   point! コンソール開く前のログ     ...
簡易 JavaScript 実行環境        簡易 JS 実行環境           コードの自動補完もあり           注: Fx6 からロケーションバーの    point! javascript: URL はページ権限なし...
ネットワーク応答要求の確認        HTTP ヘッダの確認        コンソールの URL をクリック        Request / Response ヘッダ        通信時間や Cookie の確認    int!    ...
コンソール利用時の注意            コンソールは Sandbox 環境            Web ページの要素には window 経   point!   由でアクセスする必要あり            例えば、ページコンテキスト...
ビルトイン関数&変数関数や変数                              機能           DOMノードをIDで検索。document.getElementById() またはページに  $()           $ ...
Scratchpad
https://developer.mozilla.org/ja/Tools/Scratchpad
スクラッチパッド     Eclipse Orion エディタ内蔵      ショートカット: Shift+F4     コードを実行、調査、表示      調査: インスペクタ画面を表示      表示: 実行結果をコメントで挿入   poi...
スクラッチパッドの注意点            Scratchpad も Sandbox 環境             Web ページの要素には window   point!             経由でアクセスする必要あり        ...
ショートカットキー  機能               キー                機能                キーすべて選択             Ctrl-A           取り消し               Ct...
Chrome にもスクラッチパッド    oint! Content            だけでなく Chrome   p        環境でも利用可能         about:config で次の設定を:         devtool...
JS Debugger
スクリプトデバッガ            JavaScript デバッガです             ショートカット: Ctrl+Alt+S             Fx15 からの新ツール             別ウィンドウでも起動可能  ...
デバッガに追加予定の機能    監視点の設定    変数の変更時にブレーク    タイムトラベル(巻き戻し)    リモートデバッガの強化     ...などなど
Toolbar & GCLI
https://developer.mozilla.org/en/Tools/GCLI
カスタムコマンドを定義                  1. devtools.commands.dir 設定                     にカスタムコマンドディレ                     クトリを指定する    ...
.mozcmd ファイルを作る[	 	 {	 	 	 	 name:	 hello,	 	 	 	 description:	 Show	 a	 message,	 	 	 	 params:	 [	 	 	 	 	 	 {	 	 	 	 	 ...
もっとコマンドライン!     Vimperator       https://addons.mozilla.org/ja/       firefox/addon/vimperator/     GCLI から Vimperator     ...
全部まとめて...
更にその後は…
Event Timeline
https://github.com/scrapmac/Graphical-Timeline-of-Events/downloads
イベントタイムライン    発生したイベントを可視化     マウス、キーボード、描画、     ページ遷移などのイベント    複雑なイベントデバッグに              http://grssam.com/
ドキュメントは MDN にあります:https://developer.mozilla.org/ja/Tools     最新情報は公式ブログで:  http://blog.mozilla.org/devtools/
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Upcoming SlideShare
Loading in …5
×

Firefox DevTools

4,167 views

Published on

CSS Nite in Osaka vol.31 で使用したスライド(に若干加筆したもの)

Published in: Technology

Firefox DevTools

  1. 1. Developer Tools ~Try Firefox Developer Tools~Slides @ CSS Nite in Osaka vol.31 on 2012/06/29 by Tomoya ASAI (dynamis) Last Update: 2012/07/05
  2. 2. about:
  3. 3. about:dynamis Mozilla Japan http://dynamis.jp @dynamitter facebook.com/ dynamis レッサーパンダが好き。 mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
  4. 4. about:slides 下線なしリンクも使います コードは要点だけの簡略版 特に注意が必要なとき以外は -moz- 以外の接頭辞など割愛 画像からも時々 右下には補足や リンクしてます 一次情報源 URL mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
  5. 5. Page Source
  6. 6. ページのソースを表示 ありますよね、当然。 ショートカット: Ctrl+U Fx12 から行番号表示に対応 選択部分のソースを表示 範囲選択して右クリック
  7. 7. Inspector
  8. 8. https://developer.mozilla.org/ja/Tools/Page_Inspector
  9. 9. インスペクタ 要素を調査するツール ショートカット: Ctrl+Alt+I マウスオーバーで要素を選択 Fx14 でメニューを追加 左: 対象要素の再選択 右: innerHTML/outerHTML、 ノードの削除、クラスロック https://developer.mozilla.org/ja/Tools/Page_Inspector
  10. 10. HTML パネル HTML リアルタイムエディタ point! 属性はダブルクリックで編集可 右クリックから要素の削除、 InterHTML/OuterHTML コピー より強力なエディタ (TreeEditor) も現在開発中... https://developer.mozilla.org/ja/Tools/Page_Inspector/HTML_panel
  11. 11. スタイルパネル CSS リアルタイムエディタ スタイルの編集、オンオフ 計算値スタイルの確認 プロパティヘルプは MDN スタイル変更もアニメーショ ンして Foxy! な感じ。(・・). https://developer.mozilla.org/ja/Tools/Page_Inspector/Style_panel
  12. 12. レイアウトビュー CSS ボックスのサイズ確認 Fx15 から搭載 width x height と margin, border, padding を確認 point! 畳むと width x height だけ表示
  13. 13. 3D インスペクタ (旧称Tilt) DOM 構造を3D可視化 テクノロジーの無駄遣い 開発時は無駄機能満載だった... point! 画面外要素の選択も簡単 3D 表示&選択ツールです https://developer.mozilla.org/en/Tools/Page_Inspector/3D_view
  14. 14. Style Editor
  15. 15. https://developer.mozilla.org/ja/Tools/Style_Editor
  16. 16. スタイルエディタ ページの全 CSS 一括編集 point! 編集した CSS は保存可能 新規 CSS 作成や読み込みも可能 ファイル単位のオンオフも link_to_document
  17. 17. Responsive
  18. 18. レスポンシブデザインビュー 任意解像度での表示を確認 point! 縦横サイズ入れ替え機能も 実ウィンドウより大きな画面も
  19. 19. Web Console
  20. 20. https://developer.mozilla.org/ja/Tools/Web_Console
  21. 21. https://developer.mozilla.org/ja/Tools/Web_Console
  22. 22. Web コンソール 基本的なコンソール ショートカット: Ctrl+Alt+K 表示位置: 上、下、別ウィンドウ メッセージのフィルタ point! コンソール開く前のログ メッセージも記録される https://developer.mozilla.org/ja/Tools/Web_Console
  23. 23. 簡易 JavaScript 実行環境 簡易 JS 実行環境 コードの自動補完もあり 注: Fx6 からロケーションバーの point! javascript: URL はページ権限なし ソーシャルエンジニアリング対応 困るなら InheritPrincipal アドオン https://addons.mozilla.org/firefox/ addon/inheritprincipal/ https://developer.mozilla.org/ja/Tools/Web_Console
  24. 24. ネットワーク応答要求の確認 HTTP ヘッダの確認 コンソールの URL をクリック Request / Response ヘッダ 通信時間や Cookie の確認 int! HTTP BODY も記録可能 po 右クリックメニューから「要求ボ ディと応答ボディを記録」 link_to_document
  25. 25. コンソール利用時の注意 コンソールは Sandbox 環境 Web ページの要素には window 経 point! 由でアクセスする必要あり 例えば、ページコンテキストにグ ローバル変数を定義するには: window.foo = "value"; point! Inspectorで選択している要素 には $0 変数でアクセス可能 https://developer.mozilla.org/ja/Tools/Web_Console
  26. 26. ビルトイン関数&変数関数や変数 機能 DOMノードをIDで検索。document.getElementById() またはページに $() $ 関数があればそれが使われる。 $$() DOMノードリストをCSSセレクタで検索。document.querySlectorAll() $0 現在インスペクタで選択している要素 keys() 引数オブジェクトのプロパティ名リストを返す。object.keysvalues() 引数オブジェクトの値リストを返す。 clear() コンソールの出力をクリアinspect() 引数オブジェクトの調査ウィンドウを開くpprint() オブジェクトや配列を見やすい形でダンプ出力 help() ヘルプページを開く https://developer.mozilla.org/ja/Tools/Web_Console
  27. 27. Scratchpad
  28. 28. https://developer.mozilla.org/ja/Tools/Scratchpad
  29. 29. スクラッチパッド Eclipse Orion エディタ内蔵 ショートカット: Shift+F4 コードを実行、調査、表示 調査: インスペクタ画面を表示 表示: 実行結果をコメントで挿入 point! 選択範囲だけを実行可能! https://developer.mozilla.org/ja/Tools/Scratchpad
  30. 30. スクラッチパッドの注意点 Scratchpad も Sandbox 環境 Web ページの要素には window point! 経由でアクセスする必要あり 例えば、ページコンテキストにグ ローバル変数を定義するには: window.foo = "value"; https://developer.mozilla.org/ja/Tools/Scratchpad
  31. 31. ショートカットキー 機能 キー 機能 キーすべて選択 Ctrl-A 取り消し Ctrl-Z コピー Ctrl-C インデント Tab 検索 Ctrl-F 逆インデント Shift-Tab Alt-↑ @win 次を検索 Ctrl-G 行を上に移動 Ctrl-Option-↑ @mac Ctrl-L Alt-↓ @win指定行に移動 行を下に移動 Ctrl-Option-↓ @mac やり直し Ctrl-Shift-Z コメントオンオフ Ctrl-/ @Fx14 貼り付け Ctrl-V 開き括弧に移動 Ctrl-[ @Fx14 切り取り Ctrl-X 閉じ括弧に移動 Ctrl-] @Fx14 https://developer.mozilla.org/en/Tools/Using_the_Source_Editor
  32. 32. Chrome にもスクラッチパッド oint! Content だけでなく Chrome p 環境でも利用可能 about:config で次の設定を: devtools.chrome.enabled=true 「実行環境」メニューが追加 拡張機能や Firefox 本体を開発す る時に便利です https://developer.mozilla.org/ja/Tools/Scratchpad
  33. 33. JS Debugger
  34. 34. スクリプトデバッガ JavaScript デバッガです ショートカット: Ctrl+Alt+S Fx15 からの新ツール 別ウィンドウでも起動可能 監視点は現在未実装 point! Object.prototype.watch を使う
  35. 35. デバッガに追加予定の機能 監視点の設定 変数の変更時にブレーク タイムトラベル(巻き戻し) リモートデバッガの強化 ...などなど
  36. 36. Toolbar & GCLI
  37. 37. https://developer.mozilla.org/en/Tools/GCLI
  38. 38. カスタムコマンドを定義 1. devtools.commands.dir 設定 にカスタムコマンドディレ クトリを指定する 2. *.mozcmd ファイルを作る 3. cmd refresh で読み込むScrachpad では: https://developer.mozilla.org/en/Tools/GCLI/Scratchpad
  39. 39. .mozcmd ファイルを作る[ { name: hello, description: Show a message, params: [ { name: name, type: string, description: Who to say hello to, } ], exec: function(args, context) { return Good evening, + args.name; } }] http://incompleteness.me/blog/2012/06/25/hackathon-details/
  40. 40. もっとコマンドライン! Vimperator https://addons.mozilla.org/ja/ firefox/addon/vimperator/ GCLI から Vimperator http://vimperator.g.hatena.ne.jp/ teramako/20120605/1338900442 こういう話は @teramako さんに振るときっと良い (笑)
  41. 41. 全部まとめて...
  42. 42. 更にその後は…
  43. 43. Event Timeline
  44. 44. https://github.com/scrapmac/Graphical-Timeline-of-Events/downloads
  45. 45. イベントタイムライン 発生したイベントを可視化 マウス、キーボード、描画、 ページ遷移などのイベント 複雑なイベントデバッグに http://grssam.com/
  46. 46. ドキュメントは MDN にあります:https://developer.mozilla.org/ja/Tools 最新情報は公式ブログで: http://blog.mozilla.org/devtools/

×