firefox and firebug with foxkeh
DESCRIPTION
KDDI Web Communications での勉強会で使用したスライド (当日スキップしたor後で追加したページあり)TRANSCRIPT
Firefox × Firebug~Firefox for Web Developers~
Slides @ KDDI Web Communications on 2012/09/04by Tomoya ASAI (dynamis)
Last Update: 2012/09/06
about:
about:dynamisMozilla 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
� &���'�, �,��
フォクすけに教えて！
SemanticElements
MultiMedia
HTML5Forms
OfflineSupportHTML5HTML5
Parser
Mouse,Key ev.
XHTML5WAI-ARIA
W3C
SemanticElements
MultiMedia
Canvas
HTML5Forms
OfflineSupport
Micro-Data
Server-Sent ev.
WebSockets
WebStorage
HTML5HTML5Parser
Mouse,Key ev.
XHTML5
WebWorkers
WebMessag-
ing
WAI-ARIA
W3C
WHATWG
HTML
SemanticElements
MultiMedia
Canvas
HTML5Forms
OfflineSupport
Micro-Data
Server-Sent ev.
WebSockets
WebStorage
LayoutMedia
Queries
HTML5
CSS3~Transform
Animation Regions
FlexBox
HTML5Parser
Mouse,Key ev.
XHTML5
WebWorkers
WebMessag-
ing
WAI-ARIA
W3C
WHATWG
HTML
SemanticElements
MultiMedia
Canvas
HTML5Forms
OfflineSupport
Micro-Data
WebGL
IndexedDB
SVG
Server-Sent ev.
WebSockets
WebSockets
Geo-location
FileAPI
WebStorage
XHR2
MathML
LayoutMedia
Queries
HTML5
CSS3~Transform
Animation Regions
FlexBox
HTML5Parser
Mouse,Key ev.
ECMAScript
CSP
SPDY
XHTML5
Orien-tation
WebWorkers
WebMessag-
ing
DOM4
SMIL Vibra-tion
XPathRSS
OGP
WAI-ARIA
W3C
WHATWG
other
Khronos
ECMA
IETF
WOFF
HTML
DNT
SemanticElements
MultiMedia
Canvas
HTML5Forms
OfflineSupport
Webm
H.264
Micro-Data
WebGL
WebSQL
IndexedDB
SVG
Server-Sent ev.
WebSockets
WebSockets
Geo-location
FileAPI
WebStorage
XHR2
MathML
WebAudio
LayoutMedia
Queries
HTML5
CSS3~Transform
Animation Regions
FlexBox
HTML5Parser
Mouse,Key ev.
Opus
ECMAScript ECMA
6th
USB
CSP
SPDY
WebCL
WebRTC
NetInfo
MP3
DeviceStorage
TCPSocket
NFC
File Sys
Notifi-cation
XHTML5
Orien-tation
WebWorkers
WebMessag-
ing
DOM4
SMIL Vibra-tion
Proxi-mity
XPathRSS
RDF
OGPSchema
.org
WAI-ARIA
W3C
WHATWG
other
Khronos
ECMA
IETF
WOFF
BatteryStatus
Radio
Tel
HTML
DNT
�����13./0-�2�
�����������
����4765�
Firefox DevTools
← このアイコンが続く← 間は標準ツールの話
Firefox Developer Tools
Firefox 4 から順次追加最初は Web コンソール専任のチームが開発してます
シンプルなツール群初心者でも比較的使いやすい
ときどき無駄ツール作りたくて作っただけだろ…
!���+"�
ちょっと考えてみてね
標準搭載されている機能は？ソース表示HTML エディタCSS エディタCSS リファレンスJavaScript エディタインスペクタレスポンシブ Web デザイン支援機能
HTTP 通信の記録開発ツールバーコンソールコマンドラインJS デバッガリモートデバッガページ毎のメモリ使用量確認
�,&+*�
おこらないでください
Firebug いらない？
タイムラインやデバッガ周りはまだ Firebug が圧倒複雑なアプリ開発には Firebug
細かな設定や拡張機能標準ツールを拡張する拡張機能は今のところほとんどないカスタマイズは Firebug が圧倒
標準ツールに向かないこと
パフォーマンス分析ネットワークタイムラインや JS プロファイリングなどはまだ
jQuery アプリ開発FireQuery が便利すぎる…
ピクセル単位のデザインFirebug × Pixel Perfect で完璧…
Page Source
ページのソースを表示
ありますよね、当然。ショートカット: Ctrl+UFx12 から行番号表示に対応
Validation構文エラー部分は赤くなります
選択部分のソースを表示範囲選択して右クリック
point!
Inspector
https://developer.mozilla.org/ja/Tools/Page_Inspector
インスペクタ
要素を調査するツールショートカット: Ctrl+Alt+Iマウスオーバーで要素を選択
Fx14 でメニューを追加左: 対象要素の再選択右: innerHTML/outerHTML、 ノードの削除、クラスロック
https://developer.mozilla.org/ja/Tools/Page_Inspector
point!
HTML パネル
HTML リアルタイムエディタあちこちダブルクリックで編集右クリックから要素の削除、InterHTML/OuterHTML コピーソースでなく現在の DOM を編集
Firefox 17 から TreeEditor以前は属性などだけ編集できた
point!
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 を確認畳むと width x height だけ表示point!
3D インスペクタ (旧称Tilt)
DOM 構造を３D可視化テクノロジーの無駄遣い開発時は無駄機能満載だった...
画面外要素の選択も簡単3D 表示＆選択ツールです
point!
https://developer.mozilla.org/en/Tools/Page_Inspector/3D_view
Style Editor
https://developer.mozilla.org/ja/Tools/Style_Editor
スタイルエディタ
ページの全 CSS 一括編集編集した CSS は保存可能新規 CSS 作成や読み込みも可能ファイル単位のオンオフも
point!
https://developer.mozilla.org/ja/Tools/Style_Editor
Responsive
レスポンシブデザインビュー
任意解像度での表示を確認縦横サイズ入れ替え機能も実ウィンドウより大きな画面も
point!
隠し設定
プリセット画面サイズをabout:config で変更可能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
https://developer.mozilla.org/ja/Tools/Web_Console
Web コンソール
基本的なコンソールショートカット: Ctrl+Alt+K表示位置: 上、下、別ウィンドウメッセージのフィルタ
コンソール開く前のログメッセージも記録される
point!
https://developer.mozilla.org/ja/Tools/Web_Console
簡易 JavaScript 実行環境
簡易 JS 実行環境コードの自動補完もあり注: Fx6 からロケーションバーのjavascript: URL はページ権限なしソーシャルエンジニアリング対応困るなら InheritPrincipal アドオンhttps://addons.mozilla.org/firefox/addon/inheritprincipal/
point!
https://developer.mozilla.org/ja/Tools/Web_Console
ネットワーク応答要求の確認
HTTP ヘッダの確認コンソールの URL をクリックRequest / Response ヘッダ通信時間や Cookie の確認
HTTP BODY も記録可能右クリックメニューから「要求ボディと応答ボディを記録」
point!
link_to_document
コンソール利用時の注意
コンソールは Sandbox 環境Web ページの要素には window 経由でアクセスする必要あり例えば、ページコンテキストにグローバル変数を定義するには:window.foo = "value";Inspector で選択している要素には $0 変数でアクセス可能point!
point!
https://developer.mozilla.org/ja/Tools/Web_Console
ビルトイン関数＆変数
https://developer.mozilla.org/ja/Tools/Web_Console
関数や変数 機能
$() DOMノードをIDで検索。document.getElementById() またはページに $ 関数があればそれが使われる。
$$() DOMノードリストをCSSセレクタで検索。document.querySlectorAll()
$0 現在インスペクタで選択している要素
keys() 引数オブジェクトのプロパティ名リストを返す。object.keys
values() 引数オブジェクトの値リストを返す。
clear() コンソールの出力をクリア
inspect() 引数オブジェクトの調査ウィンドウを開く
pprint() オブジェクトや配列を見やすい形でダンプ出力
help() ヘルプページを開く
Scratchpad
https://developer.mozilla.org/ja/Tools/Scratchpad
スクラッチパッド
Eclipse Orion エディタ内蔵ショートカット: Shift+F4
コードを実行、調査、表示調査: インスペクタ画面を表示表示: 実行結果をコメントで挿入
選択範囲だけを実行可能！point!
https://developer.mozilla.org/ja/Tools/Scratchpad
スクラッチパッドの注意点
Scratchpad も Sandbox 環境Web ページの要素には window 経由でアクセスする必要あり例えば、ページコンテキストにグローバル変数を定義するには:window.foo = "value";
point!
https://developer.mozilla.org/ja/Tools/Scratchpad
ショートカットキー
https://developer.mozilla.org/en/Tools/Using_the_Source_Editor
機能 キー 機能 キー
すべて選択 Ctrl-A 取り消し Ctrl-Z
コピー Ctrl-C インデント Tab
検索 Ctrl-F 逆インデント Shift-Tab
次を検索 Ctrl-G 行を上に移動 Alt-↑ @winCtrl-Option-↑ @mac
指定行に移動 Ctrl-L 行を下に移動 Alt-↓ @winCtrl-Option-↓ @mac
やり直し Ctrl-Shift-Z コメントオンオフ Ctrl-/ @Fx14~
貼り付け Ctrl-V 開き括弧に移動 Ctrl-[ @Fx14~
切り取り Ctrl-X 閉じ括弧に移動 Ctrl-] @Fx14~
Chrome にもスクラッチパッド
Content だけでなく Chrome 環境でも利用可能about:config で次の設定を:devtools.chrome.enabled=true「実行環境」メニューが追加拡張機能や Firefox 本体を開発する時に便利です
point!
https://developer.mozilla.org/ja/Tools/Scratchpad
JS Debugger
スクリプトデバッガ
JavaScript デバッガですショートカット: Ctrl+Alt+SFx15 からの新ツール別ウィンドウでも起動可能
監視点は現在未実装Object.prototype.watch を使うpoint!
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 ファイルを作る ]]<]]]]0#/'�]�*'..1��]]]]&'4%3+25+10�]��*18]#]/'44#)'��]]]]2#3#/4�] ]]]]]]<]]]]]]]]0#/'�]�0#/'��]]]]]]]]5:2'�]�453+0)��]]]]]]]]&'4%3+25+10�]��*1]51]4#:]*'..1]51��]]]]]]>]]]]!�]]]]'9'%�](60%5+10�#3)4�]%105'95�]<]]]]]]]]3'5630]��11&]'7'0+0)�]�]�]#3)40#/'�]]]]>]]>!
http://incompleteness.me/blog/2012/06/25/hackathon-details/
もっとコマンドライン！
Vimperator https://addons.mozilla.org/ja/firefox/addon/vimperator/
GCLI から Vimperatorhttp://vimperator.g.hatena.ne.jp/teramako/20120605/1338900442
こういう話は @teramako さんに振るときっと良い (笑)
about:memory
about:memory
explict > window-objects でタブ毎の使用メモリ確認Web ページだけでなくFirefox内部の使用メモリも確認できる
大規模アプリ開発時に長時間動作するアプリにも
オマケ: 開発中のもの…
Remote Debugger
リモートデバッガ
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/
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/firefox/addon/firequery/
help
Console - help コマンド
独自関数の定義一覧を表示Firebug 1.10 の新機能
こんな関数知ってました？dir(), dirxml(), table()monitor(), profile()$(), $$(), $$x()$0, $1, $n()
Firebug 1.10 の新機能
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 出力
Cookie 書き換えでブレークデバッグにも使えます
Firebug 1.10 の新機能
Options
Firebug Options
キーボードショートカットカスタマイズできるの大事特に OS とのバッティング時…
外部エディタの設定文字サイズ個人的にコレ超大事
隠し？オプション
about:config で設定可能extensions.firebug.*
ex: ログ保存行数extensions.firebug.net.logLimitextensions.firebug.console.logLimit
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 設定画面で 「新しいスタイルを書く」
userChrome.css では一部パネルで効かなかったので Stylish 使用を推奨
パネルの背景を変える��]�+3'(19] �]QVEH].+0'#3)3#&+'05]EFB]/1;.+0'#3)3#&+'05]���0#/'42#%']*5/.]63.�*552���8888�13)� ����9*5/.���/1;&1%6/'05]63.�%*31/'���(+3'$6)�%105'05�2#0'.*5/.�<]]*5/.=�2#0'.�1&']<]]]]$#%-)3160&�]��]ZX\GY?UAFSW?Y]��]]]]]].+0'#3)3#&+'05�51]$1551/�]3)$#�����������������]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]3)$#������������������]]]]]]63.�*552���3&:0#/+4,2�(19-'*20)��]8*+5']�+/2135#05�]]>]]*5/.=�&+4#$.'&�#0'.�19]<]��][TRCD@INMO]��]]]]$#%-)3160&�]��]UAFJKLP?ZX\GY?UAFSW]��]]]]]]63.�*552���3&:0#/+4,2�(19-'*+%10��20)�]013'2'#5]��29]��29�]]]]]].+0'#3)3#&+'05�51]$1551/�]3)$#�����������������]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]3)$#������������������]]]]]]63.�*552���3&:0#/+4,2�(19-'*20)�]�+/2135#05�]]>>
半透明の白を重ねて読みやすさ確保画像 URL は好きなもので置き換えてね
アイコンを変える�0#/'42#%']63.�*552���888/1;+..#13)�-':/#45'3�)#5'-''2'3�5*'3'+410.:96.���/1;&1%6/'05]]]63.�%*31/'���$3184'3�%105'05�$3184'396.��]]63.�%*31/'���(+3'$6)�%105'05�(+3'(19�(+3'$6)�3#/'96.�<]]�(+3'$6)$65510�]]�/'06"(+3'$6)�]�#22/'06"(+3'$6)�]�/'06"8'$�'7'.12'3"(+3'$6)]<]]]].+4545:.'+/#)'�]63.�*552���(19-'*,2�(#7+%10+%1�]�+/2135#05�]]>]]�($�+3'$6)�'06]�]+/#)']<]]]]8+&5*���29�]]]]*'+)*5���29�]]]]2#&&+0).'(5���29�]]]]$#%-)3160&�]63.�*552���(19-'*,2�(#7+%10+%1�]013'2'#5]�+/2135#05�]]>>
see also: http://sub.g.hatena.ne.jp/Penpen/20120728/1343484192
開発者 Honza の Blog は情報満載http://www.softwareishard.com/blog/
category/firebug/
もちろん公式サイトもhttp://getfirebug.com/