Firefox and Firebug with Foxkeh
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Firefox and Firebug with Foxkeh

  • 11,738 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
11,738
On Slideshare
8,110
From Embeds
3,628
Number of Embeds
18

Actions

Shares
Downloads
49
Comments
0
Likes
34

Embeds 3,628

http://www.atmarkit.co.jp 2,618
http://seiichi.heterobrain.com 625
https://twitter.com 344
http://dai.tumblr.com 7
http://s.deeeki.com 5
https://si0.twimg.com 5
https://cms.itmedia.co.jp 5
http://cms.itmedia.co.jp 5
http://preview.itmedia.co.jp 3
http://translate.googleusercontent.com 2
https://twimg0-a.akamaihd.net 2
http://indexcheck.investincorby.com 1
http://tweetedtimes.com 1
http://pinterest.com 1
http://www.pinterest.com 1
http://webcache.googleusercontent.com 1
http://fr.twitter.com 1
http://cache.yahoofs.jp 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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