Weitere ähnliche Inhalte Ähnlich wie Firefox and Firebug with Foxkeh (20) Kürzlich hochgeladen (10) Firefox and Firebug with Foxkeh1. Firefox × Firebug
~Firefox for Web Developers~
Slides @ KDDI Web Communications on 2012/09/04
by Tomoya ASAI (dynamis)
Last Update: 2012/09/06
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>
12. Multi
Media Mouse,
HTML5 Key ev.
Forms
W3C
Offline
HTML5 HTML5 Support
Parser
WAI-
XHTML5 ARIA
Semantic
Elements
13. Canvas
Web
WHATWG Messag-
ing
Multi Web
Media Mouse, Sockets
HTML5 Key ev.
Forms
W3C Server-
Offline
HTML5 HTML5 Support
Sent ev.
Parser
Web
WAI-
XHTML5 Storage
ARIA
Semantic
Elements Web
Workers
Micro-
HTML Data
14. Canvas
Web
WHATWG Messag-
ing
Multi Web
Media Mouse, Sockets
HTML5 Key ev.
Forms
W3C Server-
Offline
HTML5 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
15. 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 ECMA
HTML5 HTML5 Support
Sent ev. ECMA
Script
Parser
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
16. 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 ECMA
HTML5 HTML5 Support
Sent ev. ECMA
Script ECMA
NFC
Parser 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 mity
Schema RSS Math Regions
.org ation
ML WOFF
RDF DOM4
21. Firefox Developer Tools
Firefox 4 から順次追加
最初は Web コンソール
専任のチームが開発してます
シンプルなツール群
初心者でも比較的使いやすい
ときどき無駄ツール
作りたくて作っただけだろ…
23. 標準搭載されている機能は?
ソース表示 HTTP 通信の記録
HTML エディタ 開発ツールバー
CSS エディタ コンソール
CSS リファレンス コマンドライン
JavaScript エディタ JS デバッガ
インスペクタ リモートデバッガ
レスポンシブ Web デ ページ毎のメモリ使用
ザイン支援機能 量確認
25. Firebug いらない?
タイムラインやデバッガ
周りはまだ Firebug が圧倒
複雑なアプリ開発には Firebug
細かな設定や拡張機能
標準ツールを拡張する拡張機能
は今のところほとんどない
カスタマイズは Firebug が圧倒
26. 標準ツールに向かないこと
パフォーマンス分析
ネットワークタイムラインや JS
プロファイリングなどはまだ
jQuery アプリ開発
FireQuery が便利すぎる…
ピクセル単位のデザイン
Firebug × Pixel Perfect で完璧…
29. ページのソースを表示
ありますよね、当然。
ショートカット: Ctrl+U
Fx12 から行番号表示に対応
Validation
point! 構文エラー部分は赤くなります
選択部分のソースを表示
範囲選択して右クリック
32. インスペクタ
要素を調査するツール
ショートカット: Ctrl+Alt+I
マウスオーバーで要素を選択
Fx14 でメニューを追加
左: 対象要素の再選択
右: innerHTML/outerHTML、
point!
ノードの削除、クラスロック
https://developer.mozilla.org/ja/Tools/Page_Inspector
33. HTML パネル
HTML リアルタイムエディタ
point! あちこちダブルクリックで編集
右クリックから要素の削除、
InterHTML/OuterHTML コピー
ソースでなく現在の DOM を編集
Firefox 17 から TreeEditor
以前は属性などだけ編集できた
https://developer.mozilla.org/ja/Tools/Page_Inspector/HTML_panel
34. スタイルパネル
CSS リアルタイムエディタ
スタイルの編集、オンオフ
計算値スタイルの確認
プロパティヘルプは MDN
スタイル変更もアニメーショ
ンして Foxy! な感じ。(・・).
https://developer.mozilla.org/ja/Tools/Page_Inspector/Style_panel
35. レイアウトビュー
CSS ボックスのサイズ確認
Fx15 から搭載
width x height と
margin, border, padding を確認
point! 畳むと width x height だけ表示
36. 3D インスペクタ (旧称Tilt)
DOM 構造を3D可視化
テクノロジーの無駄遣い
開発時は無駄機能満載だった...
point! 画面外要素の選択も簡単
3D 表示&選択ツールです
https://developer.mozilla.org/en/Tools/Page_Inspector/3D_view
39. スタイルエディタ
ページの全 CSS 一括編集
point! 編集した CSS は保存可能
新規 CSS 作成や読み込みも可能
ファイル単位のオンオフも
https://developer.mozilla.org/ja/Tools/Style_Editor
42. レスポンシブデザインビュー
任意解像度での表示を確認
point! 縦横サイズ入れ替え機能も
実ウィンドウより大きな画面も
43. 隠し設定
プリセット画面サイズを
about:config で変更可能
devtools.responsiveUI.presets =
[{"width": 320, "height": 480},
{"width": 360, "height": 640},
{"width": 480, "height": 800}]
など JSON 文字列で指定
再起動後に反映されます
47. Web コンソール
基本的なコンソール
ショートカット: Ctrl+Alt+K
表示位置: 上、下、別ウィンドウ
メッセージのフィルタ
point! コンソール開く前のログ
メッセージも記録される
https://developer.mozilla.org/ja/Tools/Web_Console
48. 簡易 JavaScript 実行環境
簡易 JS 実行環境
コードの自動補完もあり
注: Fx6 からロケーションバーの
point! javascript: URL はページ権限なし
ソーシャルエンジニアリング対応
困るなら InheritPrincipal アドオン
https://addons.mozilla.org/firefox/
addon/inheritprincipal/
https://developer.mozilla.org/ja/Tools/Web_Console
49. ネットワーク応答要求の確認
HTTP ヘッダの確認
コンソールの URL をクリック
Request / Response ヘッダ
通信時間や Cookie の確認
int!
HTTP BODY も記録可能
po
右クリックメニューから「要求ボ
ディと応答ボディを記録」
link_to_document
50. コンソール利用時の注意
コンソールは Sandbox 環境
Web ページの要素には window 経
point! 由でアクセスする必要あり
例えば、ページコンテキストにグ
ローバル変数を定義するには:
window.foo = "value";
point! Inspectorで選択している要素
には $0 変数でアクセス可能
https://developer.mozilla.org/ja/Tools/Web_Console
51. ビルトイン関数&変数
関数や変数 機能
DOMノードをIDで検索。document.getElementById() またはページに
$()
$ 関数があればそれが使われる。
$$() DOMノードリストをCSSセレクタで検索。document.querySlectorAll()
$0 現在インスペクタで選択している要素
keys() 引数オブジェクトのプロパティ名リストを返す。object.keys
values() 引数オブジェクトの値リストを返す。
clear() コンソールの出力をクリア
inspect() 引数オブジェクトの調査ウィンドウを開く
pprint() オブジェクトや配列を見やすい形でダンプ出力
help() ヘルプページを開く
https://developer.mozilla.org/ja/Tools/Web_Console
54. スクラッチパッド
Eclipse Orion エディタ内蔵
ショートカット: Shift+F4
コードを実行、調査、表示
調査: インスペクタ画面を表示
表示: 実行結果をコメントで挿入
point! 選択範囲だけを実行可能!
https://developer.mozilla.org/ja/Tools/Scratchpad
55. スクラッチパッドの注意点
Scratchpad も Sandbox 環境
Web ページの要素には window
point!
経由でアクセスする必要あり
例えば、ページコンテキストにグ
ローバル変数を定義するには:
window.foo = "value";
https://developer.mozilla.org/ja/Tools/Scratchpad
56. ショートカットキー
機能 キー 機能 キー
すべて選択 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
57. Chrome にもスクラッチパッド
oint! Content
だけでなく Chrome
p
環境でも利用可能
about:config で次の設定を:
devtools.chrome.enabled=true
「実行環境」メニューが追加
拡張機能や Firefox 本体を開発す
る時に便利です
https://developer.mozilla.org/ja/Tools/Scratchpad
61. スクリプトデバッガ
JavaScript デバッガです
ショートカット: Ctrl+Alt+S
Fx15 からの新ツール
別ウィンドウでも起動可能
監視点は現在未実装
point! Object.prototype.watch を使う
64. カスタムコマンドを定義
1. devtools.commands.dir 設定
にカスタムコマンドディレ
クトリを指定する
2. *.mozcmd ファイルを作る
3. cmd refresh で読み込む
Scrachpad では: https://developer.mozilla.org/en/Tools/GCLI/Scratchpad
65. .mozcmd ファイルを作る
http://incompleteness.me/blog/2012/06/25/hackathon-details/
66. もっとコマンドライン!
Vimperator
https://addons.mozilla.org/ja/
firefox/addon/vimperator/
GCLI から Vimperator
http://vimperator.g.hatena.ne.jp/
teramako/20120605/1338900442
こういう話は @teramako さんに振るときっと良い (笑)
69. about:memory
explict > window-objects で
タブ毎の使用メモリ確認
Web ページだけでなくFirefox
内部の使用メモリも確認できる
大規模アプリ開発時に
長時間動作するアプリにも
72. リモートデバッガ
Android 版 Firefox に
詳細手順こちらで解説:
https://dev.mozilla.jp/2012/07/
firefox-remote-debugger/
設定変えて有効化するので
現状では隠し機能状態です
73. デバッガに追加予定の機能
変数の変更時にブレーク
タイムトラベル(巻き戻し)
リモートデバッガの強化
...などなど
76. イベントタイムライン
発生したイベントを可視化
マウス、キーボード、描画、
ページ遷移などのイベント
複雑なイベントデバッグに
開発中 (アドオン公開中)
http://grssam.com/
http://grssam.com/
78. Marionette (要独自ビルド)
リモートテストドライバ
Selenium 的なものです
B2G 開発のため優先実装された
JSON で命令をポートに流す
Python クライアントあり
Firefox 標準には入ってない
独自ビルドの作成が必要
82. Firebug
伝統と信頼の開発者ツール
情報量も結構豊富?
アメリカの方言で蛍のこと
point! 間違ってもゴキさんじゃない
91. Console & Log
複数行表示モードオススメ
Ctrl+Enter で実行
XHR や Cookie も確認
別のパネルを開かなくて OK
92. FireQuery
jQuery 利用時にオススメ
https://addons.mozilla.org/
firefox/addon/firequery/
95. Console - help コマンド
独自関数の定義一覧を表示
Firebug 1.10 の新機能
こんな関数知ってました?
dir(), dirxml(), table()
monitor(), profile()
$(), $$(), $$x()
$0, $1, $n()
Firebug 1.10 の新機能
98. HTML パネル
インスペクタのパネル
HTML 編集できます
変化したらブレークも
99. 実体の表示方法変更
ex: "∫"
シンボル表示: ∫
名前表示: ∫
ユニコード表示: ∫
Firebug 1.10 の新機能
107. Script (JavaScript デバッガ)
いわゆるデバッガです
ブレークしてデバッグ
変数の確認、書き換え
XHR, DOM 変更, Cookie などにも
ブレークポイント設定可能
右クリックで条件付ブレー
クポイントも設定可能
110. DOM パネル
選択した要素や JS オブ
ジェクトを確認するパネル
普通にツリー展開表示
編集・削除
ウォッチの追加も
113. 通信のタイムライン表示
HTTP 通信の確認
Back/Forward キャッシュ
戻る・進む時の通信も確認
"持続" オプション
リロードしてもクリアされない
Firebug 1.11 から SPDY か
どうかも一目で確認可能に
117. Cookie Management
Cookie 追加、編集、削除
セッション Cookie 削除も
Cookie のエクスポート
Tab 区切りの CSV 出力
Cookie 書き換えでブレーク
デバッグにも使えます
Firebug 1.10 の新機能
119. Firebug Options
キーボードショートカット
カスタマイズできるの大事
特に OS とのバッティング時…
外部エディタの設定
文字サイズ
個人的にコレ超大事
120. 隠し?オプション
about:config で設定可能
extensions.firebug.*
ex: ログ保存行数
extensions.firebug.net.logLimit
extensions.firebug.console.logLimit
124. Firebug のデザイン変更
1. Stylish をインストール
https://addons.mozilla.org/
firefox/addon/stylish/
2. Stylish 設定画面で
「新しいスタイルを書く」
userChrome.css では一部パネルで
効かなかったので Stylish 使用を推奨
125. パネルの背景を変える
半透明の白を重ねて読みやすさ確保
画像 URL は好きなもので置き換えてね
127. 開発者 Honza の Blog は情報満載
http://www.softwareishard.com/blog/
category/firebug/
もちろん公式サイトも
http://getfirebug.com/