Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Firefox × Firebug     ~Firefox for Web Developers~Slides @ KDDI Web Communications on 2012/09/04            by Tomoya ASAI...
about:
about:dynamis                   Mozilla Japan               http://dynamis.jp                @dynamitter            facebo...
about:slides           下線なしリンクも使います           コードは要点だけの簡略版               特に注意が必要なとき以外は               -moz- 以外の接頭辞など割愛   画像...
フォクすけの誕生日は 2006/09/01
Web Platform
フォクすけに教えて!
Multi           Media      Mouse,  HTML5               Key ev.  Forms            W3C                            OfflineHTML5...
Canvas                                 Web         WHATWG                 Messag-                                  ing    ...
Canvas                                 Web         WHATWG                 Messag-                                  ing    ...
Khronos              SMIL              Vibra-                                                   tion                 WebGL...
Khronos              SMIL              Vibra-                  MP3  WebCL                                                 ...
Firefox DevTools          ← このアイコンが続く          ← 間は標準ツールの話
Firefox Developer Tools          Firefox 4 から順次追加            最初は Web コンソール            専任のチームが開発してます          シンプルなツール群    ...
ちょっと考えてみてね
標準搭載されている機能は?ソース表示             HTTP 通信の記録HTML エディタ         開発ツールバーCSS エディタ          コンソールCSS リファレンス        コマンドラインJavaScri...
おこらないでください
Firebug いらない?       タイムラインやデバッガ       周りはまだ Firebug が圧倒        複雑なアプリ開発には Firebug       細かな設定や拡張機能        標準ツールを拡張する拡張機能  ...
標準ツールに向かないこと    パフォーマンス分析     ネットワークタイムラインや JS     プロファイリングなどはまだ    jQuery アプリ開発     FireQuery が便利すぎる…    ピクセル単位のデザイン     ...
Page Source
ページのソースを表示            ありますよね、当然。             ショートカット: Ctrl+U             Fx12 から行番号表示に対応            Validation   point!   ...
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!   縦横サイズ入れ替え機能も            実ウィンドウより大きな画面も
隠し設定       プリセット画面サイズを       about:config で変更可能        devtools.responsiveUI.presets =        [{"width": 320, "height": 480...
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 ファイルを作る  http://incompleteness.me/blog/2012/06/25/hackathon-details/
もっとコマンドライン!     Vimperator       https://addons.mozilla.org/ja/       firefox/addon/vimperator/     GCLI から Vimperator     ...
about:memory
about:memory         explict > window-objects で         タブ毎の使用メモリ確認          Web ページだけでなくFirefox          内部の使用メモリも確認できる  ...
オマケ: 開発中のもの…
RemoteDebugger
リモートデバッガ    Android 版 Firefox に    詳細手順こちらで解説:     https://dev.mozilla.jp/2012/07/     firefox-remote-debugger/            ...
デバッガに追加予定の機能    変数の変更時にブレーク    タイムトラベル(巻き戻し)    リモートデバッガの強化     ...などなど
Event Timeline
https://github.com/scrapmac/Graphical-Timeline-of-Events/downloads
イベントタイムライン    発生したイベントを可視化     マウス、キーボード、描画、     ページ遷移などのイベント    複雑なイベントデバッグに    開発中 (アドオン公開中)     http://grssam.com/     ...
Marionette
Marionette (要独自ビルド)       リモートテストドライバ        Selenium 的なものです        B2G 開発のため優先実装された       JSON で命令をポートに流す        Python ク...
ドキュメントは MDN にあります:https://developer.mozilla.org/ja/Tools     最新情報は公式ブログで:  http://blog.mozilla.org/devtools/
Firebug          以後 Firebug の話
Firebug               伝統と信頼の開発者ツール               情報量も結構豊富?               アメリカの方言で蛍のこと      point!   間違ってもゴキさんじゃない
Inspector
クイック情報ボックス便利
クイック情報ボックス便利
Web Font も簡単に確認
Console
Console & Log         複数行表示モードオススメ          Ctrl+Enter で実行         XHR や Cookie も確認          別のパネルを開かなくて OK
FireQuery            jQuery 利用時にオススメ            https://addons.mozilla.org/            firefox/addon/firequery/
help
Console - help コマンド        独自関数の定義一覧を表示         Firebug 1.10 の新機能        こんな関数知ってました?         dir(), dirxml(), table()    ...
HTML
HTML パネル      インスペクタのパネル      HTML 編集できます      変化したらブレークも
実体の表示方法変更     ex: "∫"    シンボル表示: ∫    名前表示: ∫    ユニコード表示: ∫     Firebug 1.10 の新機能
CSS
配色の調整も簡単
Firebug 用拡張機能: Firepicker        カラーピッカーを追加         https://addons.mozilla.org/         firefox/addon/firepicker/
Firebug 用拡張機能: CSS Usage           ページで使われてる           ルールの確認に
Script
Script (JavaScript デバッガ)         いわゆるデバッガです         ブレークしてデバッグ          変数の確認、書き換え          XHR, DOM 変更, Cookie などにも      ...
DOM
DOM パネル      選択した要素や JS オブ      ジェクトを確認するパネル      普通にツリー展開表示      編集・削除      ウォッチの追加も
Net
通信のタイムライン表示    HTTP 通信の確認    Back/Forward キャッシュ     戻る・進む時の通信も確認    "持続" オプション     リロードしてもクリアされない    Firebug 1.11 から SPDY ...
青線: DOMContentLoaded赤線: load イベント発生時灰色:   ブロッキング水色:   DNS lookup黄緑:   接続赤色:   送信紫色:   待機緑色:   受信
Cookie
Cookie Management         Cookie 追加、編集、削除          セッション Cookie 削除も         Cookie のエクスポート          Tab 区切りの CSV 出力       ...
Options
Firebug Options          キーボードショートカット           カスタマイズできるの大事           特に OS とのバッティング時…          外部エディタの設定          文字サイズ ...
隠し?オプション    about:config で設定可能     extensions.firebug.*    ex: ログ保存行数     extensions.firebug.net.logLimit     extensions.fireb...
FoxkehBug
http://userstyles.org/styles/72269/foxkehbug
http://userstyles.org/styles/72269/foxkehbug
Firebug のデザイン変更      1. Stylish をインストール       https://addons.mozilla.org/       firefox/addon/stylish/      2. Stylish 設定画面...
パネルの背景を変える        半透明の白を重ねて読みやすさ確保       画像 URL は好きなもので置き換えてね
アイコンを変えるsee also: http://sub.g.hatena.ne.jp/Penpen/20120728/1343484192
開発者 Honza の Blog は情報満載http://www.softwareishard.com/blog/         category/firebug/      もちろん公式サイトも      http://getfirebug...
Firefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
Upcoming SlideShare
Loading in …5
×

Firefox and Firebug with Foxkeh

13,685 views

Published on

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

Published in: Technology
  • Be the first to comment

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/

×