Firefox and Firebug with Foxkeh

13,250 views

Published on

KDDI Web Communications での勉強会で使用したスライド (当日スキップしたor後で追加したページあり)

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

No Downloads
Views
Total views
13,250
On SlideShare
0
From Embeds
0
Number of Embeds
4,594
Actions
Shares
0
Downloads
54
Comments
0
Likes
34
Embeds 0
No embeds

No notes for slide

Firefox and Firebug with Foxkeh

  1. 1. Firefox × Firebug ~Firefox for Web Developers~Slides @ KDDI Web Communications on 2012/09/04 by Tomoya ASAI (dynamis) Last Update: 2012/09/06
  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. フォクすけの誕生日は 2006/09/01
  6. 6. Web Platform
  7. 7. フォクすけに教えて!
  8. 8. Multi Media Mouse, HTML5 Key ev. Forms W3C OfflineHTML5 HTML5 SupportParser WAI- XHTML5 ARIA Semantic Elements
  9. 9. Canvas Web WHATWG Messag- ing Multi Web Media Mouse, Sockets HTML5 Key ev. Forms W3C Server- OfflineHTML5 HTML5 Support Sent ev.Parser Web WAI- XHTML5 Storage ARIA Semantic Elements Web Workers Micro- HTML Data
  10. 10. Canvas Web WHATWG Messag- ing Multi Web Media Mouse, Sockets HTML5 Key ev. Forms W3C Server- OfflineHTML5 HTML5 Support Sent ev.Parser Web WAI- XHTML5 Storage ARIA Semantic Elements Web Media Workers Layout Queries Micro- HTML Data Trans CSS3~ Flex Box form Anim Regions ation
  11. 11. Khronos SMIL Vibra- tion WebGL Geo- SVG other location Orien- tation Canvas WHATWG Web IETF Messag- ing Web Multi SPDY Web Sockets DNT Media Mouse, Sockets HTML5 Key ev. XHR2 FileAPI CSP Forms W3C Server- Offline ECMAHTML5 HTML5 Support Sent ev. ECMA ScriptParser Indexed Web WAI- DB XHTML5 Storage ARIA Semantic Elements Web Media Workers Layout Queries Micro- HTML Data Trans CSS3~ Flex Box OGP XPath form RSS Anim Math Regions ation ML WOFF DOM4
  12. 12. Khronos SMIL Vibra- MP3 WebCL Webm Opus tion WebGL Geo- SVG H.264 other location Orien- Web Audio Notifi- tation Web Canvas cation WHATWG Web IETF RTC Messag- ing Web TCP Tel Multi SPDY Web Sockets DNT Socket Media Mouse, Sockets HTML5 Key ev. XHR2 Radio FileAPI CSP Forms Net W3C Server- Info Offline ECMAHTML5 HTML5 Support Sent ev. ECMA Script ECMA NFCParser 6th Indexed Web Device WAI- DB Storage Storage XHTML5 ARIA Semantic Web Elements Web SQL Media USB Workers Layout Queries File Micro- Sys HTML Data Trans CSS3~ Flex Battery Status Box OGP XPath form Proxi- Anim mitySchema RSS Math Regions .org ation ML WOFF RDF DOM4
  13. 13. Firefox DevTools ← このアイコンが続く ← 間は標準ツールの話
  14. 14. Firefox Developer Tools Firefox 4 から順次追加 最初は Web コンソール 専任のチームが開発してます シンプルなツール群 初心者でも比較的使いやすい ときどき無駄ツール 作りたくて作っただけだろ…
  15. 15. ちょっと考えてみてね
  16. 16. 標準搭載されている機能は?ソース表示 HTTP 通信の記録HTML エディタ 開発ツールバーCSS エディタ コンソールCSS リファレンス コマンドラインJavaScript エディタ JS デバッガインスペクタ リモートデバッガレスポンシブ Web デ ページ毎のメモリ使用ザイン支援機能 量確認
  17. 17. おこらないでください
  18. 18. Firebug いらない? タイムラインやデバッガ 周りはまだ Firebug が圧倒 複雑なアプリ開発には Firebug 細かな設定や拡張機能 標準ツールを拡張する拡張機能 は今のところほとんどない カスタマイズは Firebug が圧倒
  19. 19. 標準ツールに向かないこと パフォーマンス分析 ネットワークタイムラインや JS プロファイリングなどはまだ jQuery アプリ開発 FireQuery が便利すぎる… ピクセル単位のデザイン Firebug × Pixel Perfect で完璧…
  20. 20. Page Source
  21. 21. ページのソースを表示 ありますよね、当然。 ショートカット: Ctrl+U Fx12 から行番号表示に対応 Validation point! 構文エラー部分は赤くなります 選択部分のソースを表示 範囲選択して右クリック
  22. 22. Inspector
  23. 23. https://developer.mozilla.org/ja/Tools/Page_Inspector
  24. 24. インスペクタ 要素を調査するツール ショートカット: Ctrl+Alt+I マウスオーバーで要素を選択 Fx14 でメニューを追加 左: 対象要素の再選択 右: innerHTML/outerHTML、 point! ノードの削除、クラスロック https://developer.mozilla.org/ja/Tools/Page_Inspector
  25. 25. HTML パネル HTML リアルタイムエディタ point! あちこちダブルクリックで編集 右クリックから要素の削除、 InterHTML/OuterHTML コピー ソースでなく現在の DOM を編集 Firefox 17 から TreeEditor 以前は属性などだけ編集できた https://developer.mozilla.org/ja/Tools/Page_Inspector/HTML_panel
  26. 26. スタイルパネル CSS リアルタイムエディタ スタイルの編集、オンオフ 計算値スタイルの確認 プロパティヘルプは MDN スタイル変更もアニメーショ ンして Foxy! な感じ。(・・). https://developer.mozilla.org/ja/Tools/Page_Inspector/Style_panel
  27. 27. レイアウトビュー CSS ボックスのサイズ確認 Fx15 から搭載 width x height と margin, border, padding を確認 point! 畳むと width x height だけ表示
  28. 28. 3D インスペクタ (旧称Tilt) DOM 構造を3D可視化 テクノロジーの無駄遣い 開発時は無駄機能満載だった... point! 画面外要素の選択も簡単 3D 表示&選択ツールです https://developer.mozilla.org/en/Tools/Page_Inspector/3D_view
  29. 29. Style Editor
  30. 30. https://developer.mozilla.org/ja/Tools/Style_Editor
  31. 31. スタイルエディタ ページの全 CSS 一括編集 point! 編集した CSS は保存可能 新規 CSS 作成や読み込みも可能 ファイル単位のオンオフも https://developer.mozilla.org/ja/Tools/Style_Editor
  32. 32. Responsive
  33. 33. レスポンシブデザインビュー 任意解像度での表示を確認 point! 縦横サイズ入れ替え機能も 実ウィンドウより大きな画面も
  34. 34. 隠し設定 プリセット画面サイズを about:config で変更可能 devtools.responsiveUI.presets = [{"width": 320, "height": 480}, {"width": 360, "height": 640}, {"width": 480, "height": 800}] など JSON 文字列で指定 再起動後に反映されます
  35. 35. Web Console
  36. 36. https://developer.mozilla.org/ja/Tools/Web_Console
  37. 37. https://developer.mozilla.org/ja/Tools/Web_Console
  38. 38. Web コンソール 基本的なコンソール ショートカット: Ctrl+Alt+K 表示位置: 上、下、別ウィンドウ メッセージのフィルタ point! コンソール開く前のログ メッセージも記録される https://developer.mozilla.org/ja/Tools/Web_Console
  39. 39. 簡易 JavaScript 実行環境 簡易 JS 実行環境 コードの自動補完もあり 注: Fx6 からロケーションバーの point! javascript: URL はページ権限なし ソーシャルエンジニアリング対応 困るなら InheritPrincipal アドオン https://addons.mozilla.org/firefox/ addon/inheritprincipal/ https://developer.mozilla.org/ja/Tools/Web_Console
  40. 40. ネットワーク応答要求の確認 HTTP ヘッダの確認 コンソールの URL をクリック Request / Response ヘッダ 通信時間や Cookie の確認 int! HTTP BODY も記録可能 po 右クリックメニューから「要求ボ ディと応答ボディを記録」 link_to_document
  41. 41. コンソール利用時の注意 コンソールは Sandbox 環境 Web ページの要素には window 経 point! 由でアクセスする必要あり 例えば、ページコンテキストにグ ローバル変数を定義するには: window.foo = "value"; point! Inspectorで選択している要素 には $0 変数でアクセス可能 https://developer.mozilla.org/ja/Tools/Web_Console
  42. 42. ビルトイン関数&変数関数や変数 機能 DOMノードをIDで検索。document.getElementById() またはページに $() $ 関数があればそれが使われる。 $$() DOMノードリストをCSSセレクタで検索。document.querySlectorAll() $0 現在インスペクタで選択している要素 keys() 引数オブジェクトのプロパティ名リストを返す。object.keysvalues() 引数オブジェクトの値リストを返す。 clear() コンソールの出力をクリアinspect() 引数オブジェクトの調査ウィンドウを開くpprint() オブジェクトや配列を見やすい形でダンプ出力 help() ヘルプページを開く https://developer.mozilla.org/ja/Tools/Web_Console
  43. 43. Scratchpad
  44. 44. https://developer.mozilla.org/ja/Tools/Scratchpad
  45. 45. スクラッチパッド Eclipse Orion エディタ内蔵 ショートカット: Shift+F4 コードを実行、調査、表示 調査: インスペクタ画面を表示 表示: 実行結果をコメントで挿入 point! 選択範囲だけを実行可能! https://developer.mozilla.org/ja/Tools/Scratchpad
  46. 46. スクラッチパッドの注意点 Scratchpad も Sandbox 環境 Web ページの要素には window point! 経由でアクセスする必要あり 例えば、ページコンテキストにグ ローバル変数を定義するには: window.foo = "value"; https://developer.mozilla.org/ja/Tools/Scratchpad
  47. 47. ショートカットキー 機能 キー 機能 キーすべて選択 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
  48. 48. Chrome にもスクラッチパッド oint! Content だけでなく Chrome p 環境でも利用可能 about:config で次の設定を: devtools.chrome.enabled=true 「実行環境」メニューが追加 拡張機能や Firefox 本体を開発す る時に便利です https://developer.mozilla.org/ja/Tools/Scratchpad
  49. 49. JS Debugger
  50. 50. スクリプトデバッガ JavaScript デバッガです ショートカット: Ctrl+Alt+S Fx15 からの新ツール 別ウィンドウでも起動可能 監視点は現在未実装 point! Object.prototype.watch を使う
  51. 51. Toolbar & GCLI
  52. 52. https://developer.mozilla.org/en/Tools/GCLI
  53. 53. カスタムコマンドを定義 1. devtools.commands.dir 設定 にカスタムコマンドディレ クトリを指定する 2. *.mozcmd ファイルを作る 3. cmd refresh で読み込むScrachpad では: https://developer.mozilla.org/en/Tools/GCLI/Scratchpad
  54. 54. .mozcmd ファイルを作る http://incompleteness.me/blog/2012/06/25/hackathon-details/
  55. 55. もっとコマンドライン! Vimperator https://addons.mozilla.org/ja/ firefox/addon/vimperator/ GCLI から Vimperator http://vimperator.g.hatena.ne.jp/ teramako/20120605/1338900442 こういう話は @teramako さんに振るときっと良い (笑)
  56. 56. about:memory
  57. 57. about:memory explict > window-objects で タブ毎の使用メモリ確認 Web ページだけでなくFirefox 内部の使用メモリも確認できる 大規模アプリ開発時に 長時間動作するアプリにも
  58. 58. オマケ: 開発中のもの…
  59. 59. RemoteDebugger
  60. 60. リモートデバッガ Android 版 Firefox に 詳細手順こちらで解説: https://dev.mozilla.jp/2012/07/ firefox-remote-debugger/ 設定変えて有効化するので 現状では隠し機能状態です
  61. 61. デバッガに追加予定の機能 変数の変更時にブレーク タイムトラベル(巻き戻し) リモートデバッガの強化 ...などなど
  62. 62. Event Timeline
  63. 63. https://github.com/scrapmac/Graphical-Timeline-of-Events/downloads
  64. 64. イベントタイムライン 発生したイベントを可視化 マウス、キーボード、描画、 ページ遷移などのイベント 複雑なイベントデバッグに 開発中 (アドオン公開中) http://grssam.com/ http://grssam.com/
  65. 65. Marionette
  66. 66. Marionette (要独自ビルド) リモートテストドライバ Selenium 的なものです B2G 開発のため優先実装された JSON で命令をポートに流す Python クライアントあり Firefox 標準には入ってない 独自ビルドの作成が必要
  67. 67. ドキュメントは MDN にあります:https://developer.mozilla.org/ja/Tools 最新情報は公式ブログで: http://blog.mozilla.org/devtools/
  68. 68. Firebug 以後 Firebug の話
  69. 69. Firebug 伝統と信頼の開発者ツール 情報量も結構豊富? アメリカの方言で蛍のこと point! 間違ってもゴキさんじゃない
  70. 70. Inspector
  71. 71. クイック情報ボックス便利
  72. 72. クイック情報ボックス便利
  73. 73. Web Font も簡単に確認
  74. 74. Console
  75. 75. Console & Log 複数行表示モードオススメ Ctrl+Enter で実行 XHR や Cookie も確認 別のパネルを開かなくて OK
  76. 76. FireQuery jQuery 利用時にオススメ https://addons.mozilla.org/ firefox/addon/firequery/
  77. 77. help
  78. 78. Console - help コマンド 独自関数の定義一覧を表示 Firebug 1.10 の新機能 こんな関数知ってました? dir(), dirxml(), table() monitor(), profile() $(), $$(), $$x() $0, $1, $n() Firebug 1.10 の新機能
  79. 79. HTML
  80. 80. HTML パネル インスペクタのパネル HTML 編集できます 変化したらブレークも
  81. 81. 実体の表示方法変更 ex: "∫" シンボル表示: ∫ 名前表示: &int; ユニコード表示: ∫ Firebug 1.10 の新機能
  82. 82. CSS
  83. 83. 配色の調整も簡単
  84. 84. Firebug 用拡張機能: Firepicker カラーピッカーを追加 https://addons.mozilla.org/ firefox/addon/firepicker/
  85. 85. Firebug 用拡張機能: CSS Usage ページで使われてる ルールの確認に
  86. 86. Script
  87. 87. Script (JavaScript デバッガ) いわゆるデバッガです ブレークしてデバッグ 変数の確認、書き換え XHR, DOM 変更, Cookie などにも ブレークポイント設定可能 右クリックで条件付ブレー クポイントも設定可能
  88. 88. DOM
  89. 89. DOM パネル 選択した要素や JS オブ ジェクトを確認するパネル 普通にツリー展開表示 編集・削除 ウォッチの追加も
  90. 90. Net
  91. 91. 通信のタイムライン表示 HTTP 通信の確認 Back/Forward キャッシュ 戻る・進む時の通信も確認 "持続" オプション リロードしてもクリアされない Firebug 1.11 から SPDY か どうかも一目で確認可能に
  92. 92. 青線: DOMContentLoaded赤線: load イベント発生時灰色: ブロッキング水色: DNS lookup黄緑: 接続赤色: 送信紫色: 待機緑色: 受信
  93. 93. Cookie
  94. 94. Cookie Management Cookie 追加、編集、削除 セッション Cookie 削除も Cookie のエクスポート Tab 区切りの CSV 出力 Cookie 書き換えでブレーク デバッグにも使えます Firebug 1.10 の新機能
  95. 95. Options
  96. 96. Firebug Options キーボードショートカット カスタマイズできるの大事 特に OS とのバッティング時… 外部エディタの設定 文字サイズ 個人的にコレ超大事
  97. 97. 隠し?オプション about:config で設定可能 extensions.firebug.* ex: ログ保存行数 extensions.firebug.net.logLimit extensions.firebug.console.logLimit
  98. 98. FoxkehBug
  99. 99. http://userstyles.org/styles/72269/foxkehbug
  100. 100. http://userstyles.org/styles/72269/foxkehbug
  101. 101. Firebug のデザイン変更 1. Stylish をインストール https://addons.mozilla.org/ firefox/addon/stylish/ 2. Stylish 設定画面で 「新しいスタイルを書く」 userChrome.css では一部パネルで 効かなかったので Stylish 使用を推奨
  102. 102. パネルの背景を変える 半透明の白を重ねて読みやすさ確保 画像 URL は好きなもので置き換えてね
  103. 103. アイコンを変えるsee also: http://sub.g.hatena.ne.jp/Penpen/20120728/1343484192
  104. 104. 開発者 Honza の Blog は情報満載http://www.softwareishard.com/blog/ category/firebug/ もちろん公式サイトも http://getfirebug.com/

×