Firefox and Firebug with Foxkeh

Firefox × Firebug ~Firefox for Web Developers~Slides @ KDDI Web Communications on 2012/09/04 by Tomoya ASAI (dynamis) Last Update: 2012/09/06

about:

about:dynamis Mozilla Japan http://dynamis.jp @dynamitter facebook.com/ dynamis レッサーパンダが好き。 mailto: Tomoya ASAI <dynamis@mozilla-japan.org>

about:slides 下線なしリンクも使いますコードは要点だけの簡略版特に注意が必要なとき以外は -moz- 以外の接頭辞など割愛画像からも時々右下には補足やリンクしてます一次情報源 URL mailto: Tomoya ASAI <dynamis@mozilla-japan.org>

フォクすけの誕生日は 2006/09/01

Web Platform

フォクすけに教えて！

Multi Media Mouse, HTML5 Key ev. Forms W3C OﬄineHTML5 HTML5 SupportParser WAI- XHTML5 ARIA Semantic Elements

Canvas Web WHATWG Messag- ing Multi Web Media Mouse, Sockets HTML5 Key ev. Forms W3C Server- OﬄineHTML5 HTML5 Support Sent ev.Parser Web WAI- XHTML5 Storage ARIA Semantic Elements Web Workers Micro- HTML Data

Canvas Web WHATWG Messag- ing Multi Web Media Mouse, Sockets HTML5 Key ev. Forms W3C Server- OﬄineHTML5 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

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- Oﬄine 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

Khronos SMIL Vibra- MP3 WebCL Webm Opus tion WebGL Geo- SVG H.264 other location Orien- Web Audio Notiﬁ- 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 Oﬄine 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

Firefox DevTools ← このアイコンが続く ← 間は標準ツールの話

Firefox Developer Tools Firefox 4 から順次追加最初は Web コンソール専任のチームが開発してますシンプルなツール群初心者でも比較的使いやすいときどき無駄ツール作りたくて作っただけだろ…

ちょっと考えてみてね

標準搭載されている機能は？ソース表示 HTTP 通信の記録HTML エディタ開発ツールバーCSS エディタコンソールCSS リファレンスコマンドラインJavaScript エディタ JS デバッガインスペクタリモートデバッガレスポンシブ Web デページ毎のメモリ使用ザイン支援機能量確認

おこらないでください

Firebug いらない？タイムラインやデバッガ周りはまだ Firebug が圧倒複雑なアプリ開発には Firebug 細かな設定や拡張機能標準ツールを拡張する拡張機能は今のところほとんどないカスタマイズは Firebug が圧倒

標準ツールに向かないことパフォーマンス分析ネットワークタイムラインや JS プロファイリングなどはまだ jQuery アプリ開発 FireQuery が便利すぎる… ピクセル単位のデザイン Firebug × Pixel Perfect で完璧…

Page Source

ページのソースを表示ありますよね、当然。ショートカット: Ctrl+U Fx12 から行番号表示に対応 Validation point! 構文エラー部分は赤くなります選択部分のソースを表示範囲選択して右クリック

Inspector

https://developer.mozilla.org/ja/Tools/Page_Inspector

インスペクタ要素を調査するツールショートカット: Ctrl+Alt+I マウスオーバーで要素を選択 Fx14 でメニューを追加左: 対象要素の再選択右: innerHTML/outerHTML、 point! ノードの削除、クラスロック https://developer.mozilla.org/ja/Tools/Page_Inspector

HTML パネル HTML リアルタイムエディタ point! あちこちダブルクリックで編集右クリックから要素の削除、 InterHTML/OuterHTML コピーソースでなく現在の DOM を編集 Firefox 17 から TreeEditor 以前は属性などだけ編集できた https://developer.mozilla.org/ja/Tools/Page_Inspector/HTML_panel

スタイルパネル CSS リアルタイムエディタスタイルの編集、オンオフ計算値スタイルの確認プロパティヘルプは MDN スタイル変更もアニメーションして Foxy! な感じ。(・・). https://developer.mozilla.org/ja/Tools/Page_Inspector/Style_panel

レイアウトビュー CSS ボックスのサイズ確認 Fx15 から搭載 width x height と margin, border, padding を確認 point! 畳むと width x height だけ表示

3D インスペクタ (旧称Tilt) DOM 構造を３D可視化テクノロジーの無駄遣い開発時は無駄機能満載だった... point! 画面外要素の選択も簡単 3D 表示＆選択ツールです https://developer.mozilla.org/en/Tools/Page_Inspector/3D_view

Style Editor

https://developer.mozilla.org/ja/Tools/Style_Editor

スタイルエディタページの全 CSS 一括編集 point! 編集した CSS は保存可能新規 CSS 作成や読み込みも可能ファイル単位のオンオフも https://developer.mozilla.org/ja/Tools/Style_Editor

Responsive

レスポンシブデザインビュー任意解像度での表示を確認 point! 縦横サイズ入れ替え機能も実ウィンドウより大きな画面も

隠し設定プリセット画面サイズを about:conﬁg で変更可能 devtools.responsiveUI.presets = [{"width": 320, "height": 480}, {"width": 360, "height": 640}, {"width": 480, "height": 800}] など JSON 文字列で指定再起動後に反映されます

Web Console

https://developer.mozilla.org/ja/Tools/Web_Console

Web コンソール基本的なコンソールショートカット: Ctrl+Alt+K 表示位置: 上、下、別ウィンドウメッセージのフィルタ point! コンソール開く前のログメッセージも記録される https://developer.mozilla.org/ja/Tools/Web_Console

簡易 JavaScript 実行環境簡易 JS 実行環境コードの自動補完もあり注: Fx6 からロケーションバーの point! javascript: URL はページ権限なしソーシャルエンジニアリング対応困るなら InheritPrincipal アドオン https://addons.mozilla.org/ﬁrefox/ addon/inheritprincipal/ https://developer.mozilla.org/ja/Tools/Web_Console

ネットワーク応答要求の確認 HTTP ヘッダの確認コンソールの URL をクリック Request / Response ヘッダ通信時間や Cookie の確認 int! HTTP BODY も記録可能 po 右クリックメニューから「要求ボディと応答ボディを記録」 link_to_document

コンソール利用時の注意コンソールは Sandbox 環境 Web ページの要素には window 経 point! 由でアクセスする必要あり例えば、ページコンテキストにグローバル変数を定義するには: window.foo = "value"; point! Inspectorで選択している要素には $0 変数でアクセス可能 https://developer.mozilla.org/ja/Tools/Web_Console

ビルトイン関数＆変数関数や変数機能 DOMノードをIDで検索。document.getElementById() またはページに $() $ 関数があればそれが使われる。 $$() DOMノードリストをCSSセレクタで検索。document.querySlectorAll() $0 現在インスペクタで選択している要素 keys() 引数オブジェクトのプロパティ名リストを返す。object.keysvalues() 引数オブジェクトの値リストを返す。 clear() コンソールの出力をクリアinspect() 引数オブジェクトの調査ウィンドウを開くpprint() オブジェクトや配列を見やすい形でダンプ出力 help() ヘルプページを開く https://developer.mozilla.org/ja/Tools/Web_Console

Scratchpad

https://developer.mozilla.org/ja/Tools/Scratchpad

スクラッチパッド Eclipse Orion エディタ内蔵ショートカット: Shift+F4 コードを実行、調査、表示調査: インスペクタ画面を表示表示: 実行結果をコメントで挿入 point! 選択範囲だけを実行可能！ https://developer.mozilla.org/ja/Tools/Scratchpad

スクラッチパッドの注意点 Scratchpad も Sandbox 環境 Web ページの要素には window point! 経由でアクセスする必要あり例えば、ページコンテキストにグローバル変数を定義するには: window.foo = "value"; https://developer.mozilla.org/ja/Tools/Scratchpad

ショートカットキー機能キー機能キーすべて選択 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

Chrome にもスクラッチパッド oint! Content だけでなく Chrome p 環境でも利用可能 about:conﬁg で次の設定を: devtools.chrome.enabled=true 「実行環境」メニューが追加拡張機能や Firefox 本体を開発する時に便利です https://developer.mozilla.org/ja/Tools/Scratchpad

JS Debugger

スクリプトデバッガ JavaScript デバッガですショートカット: Ctrl+Alt+S Fx15 からの新ツール別ウィンドウでも起動可能監視点は現在未実装 point! Object.prototype.watch を使う

Toolbar & GCLI

https://developer.mozilla.org/en/Tools/GCLI

カスタムコマンドを定義 1. devtools.commands.dir 設定にカスタムコマンドディレクトリを指定する 2. *.mozcmd ファイルを作る 3. cmd refresh で読み込むScrachpad では: https://developer.mozilla.org/en/Tools/GCLI/Scratchpad

.mozcmd ファイルを作る http://incompleteness.me/blog/2012/06/25/hackathon-details/

もっとコマンドライン！ Vimperator https://addons.mozilla.org/ja/ ﬁrefox/addon/vimperator/ GCLI から Vimperator http://vimperator.g.hatena.ne.jp/ teramako/20120605/1338900442 こういう話は @teramako さんに振るときっと良い (笑)

about:memory

about:memory explict > window-objects でタブ毎の使用メモリ確認 Web ページだけでなくFirefox 内部の使用メモリも確認できる大規模アプリ開発時に長時間動作するアプリにも

オマケ: 開発中のもの…

RemoteDebugger

リモートデバッガ Android 版 Firefox に詳細手順こちらで解説: https://dev.mozilla.jp/2012/07/ ﬁrefox-remote-debugger/ 設定変えて有効化するので現状では隠し機能状態です

デバッガに追加予定の機能変数の変更時にブレークタイムトラベル(巻き戻し) リモートデバッガの強化 ...などなど

Event Timeline

https://github.com/scrapmac/Graphical-Timeline-of-Events/downloads

イベントタイムライン発生したイベントを可視化マウス、キーボード、描画、ページ遷移などのイベント複雑なイベントデバッグに開発中 (アドオン公開中) http://grssam.com/ http://grssam.com/

Marionette

Marionette (要独自ビルド) リモートテストドライバ Selenium 的なものです B2G 開発のため優先実装された JSON で命令をポートに流す Python クライアントあり Firefox 標準には入ってない独自ビルドの作成が必要

ドキュメントは 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/ ﬁrefox/addon/ﬁrequery/

Console - help コマンド独自関数の定義一覧を表示 Firebug 1.10 の新機能こんな関数知ってました？ dir(), dirxml(), table() monitor(), proﬁle() $(), $$(), $$x() $0, $1, $n() Firebug 1.10 の新機能

HTML パネルインスペクタのパネル HTML 編集できます変化したらブレークも

実体の表示方法変更 ex: "∫" シンボル表示: ∫ 名前表示: ∫ ユニコード表示: ∫ Firebug 1.10 の新機能

配色の調整も簡単

Firebug 用拡張機能: Firepicker カラーピッカーを追加 https://addons.mozilla.org/ ﬁrefox/addon/ﬁrepicker/

Firebug 用拡張機能: CSS Usage ページで使われてるルールの確認に

Script

Script (JavaScript デバッガ) いわゆるデバッガですブレークしてデバッグ変数の確認、書き換え XHR, DOM 変更, Cookie などにもブレークポイント設定可能右クリックで条件付ブレークポイントも設定可能

DOM パネル選択した要素や JS オブジェクトを確認するパネル普通にツリー展開表示編集・削除ウォッチの追加も

通信のタイムライン表示 HTTP 通信の確認 Back/Forward キャッシュ戻る・進む時の通信も確認 "持続" オプションリロードしてもクリアされない Firebug 1.11 から SPDY かどうかも一目で確認可能に

青線: DOMContentLoaded赤線: load イベント発生時灰色: ブロッキング水色: DNS lookup黄緑: 接続赤色: 送信紫色: 待機緑色: 受信

Cookie

Cookie Management Cookie 追加、編集、削除セッション Cookie 削除も Cookie のエクスポート Tab 区切りの CSV 出力 Cookie 書き換えでブレークデバッグにも使えます Firebug 1.10 の新機能

Options

Firebug Options キーボードショートカットカスタマイズできるの大事特に OS とのバッティング時… 外部エディタの設定文字サイズ個人的にコレ超大事

隠し？オプション about:config で設定可能 extensions.firebug.* ex: ログ保存行数 extensions.firebug.net.logLimit extensions.firebug.console.logLimit

FoxkehBug

http://userstyles.org/styles/72269/foxkehbug

Firebug のデザイン変更 1. Stylish をインストール https://addons.mozilla.org/ ﬁrefox/addon/stylish/ 2. Stylish 設定画面で「新しいスタイルを書く」 userChrome.css では一部パネルで効かなかったので Stylish 使用を推奨

パネルの背景を変える半透明の白を重ねて読みやすさ確保画像 URL は好きなもので置き換えてね

アイコンを変えるsee also: http://sub.g.hatena.ne.jp/Penpen/20120728/1343484192

開発者 Honza の Blog は情報満載http://www.softwareishard.com/blog/ category/firebug/ もちろん公式サイトも http://getfirebug.com/

http://www.atmarkit.co.jp	1181
https://twitter.com	267
http://seiichi.heterobrain.com	245
http://dai.tumblr.com	7
https://si0.twimg.com	5
http://cms.itmedia.co.jp	5
https://cms.itmedia.co.jp	5
http://preview.itmedia.co.jp	3
https://twimg0-a.akamaihd.net	2
http://fr.twitter.com	1
http://tweetedtimes.com	1

Firefox and Firebug with Foxkeh

by dynamis . on Sep 04, 2012

Accessibility

Categories

Upload Details

Usage Rights

11 Embeds 1,722

Statistics

Firefox and Firebug with Foxkeh Presentation Transcript