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: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

フォクすけに教えて！

Multi
Media Mouse,
HTML5 Key ev.
Forms
W3C
Oﬄine
HTML5 HTML5 Support
Parser

WAI-
XHTML5 ARIA
Semantic
Elements

Canvas
Web
WHATWG Messag-
ing
Multi Web
Media Mouse, Sockets
HTML5 Key ev.
Forms
W3C Server-
Oﬄine
HTML5 HTML5 Support
Sent ev.

Parser
Web
WAI-
XHTML5 Storage
ARIA
Semantic
Elements Web
Workers
Micro-
HTML Data

Canvas
Web
WHATWG Messag-
ing
Multi Web
HTML5 Key ev.
Forms
W3C Server-
Oﬄine
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

Khronos SMIL Vibra-
tion
WebGL Geo-
SVG
other location
Orien-
tation
Canvas
WHATWG Web IETF
Messag-
ing Web
Multi SPDY
Web Sockets DNT
HTML5 Key ev. XHR2
FileAPI CSP
Forms
W3C Server-
Oﬄine ECMA
HTML5 HTML5 Support
Sent ev. ECMA
Script
Parser
Indexed
Web
WAI- DB
XHTML5 Storage
ARIA
Semantic
Elements Web Media
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
HTML5 Key ev. XHR2 Radio
FileAPI CSP
Forms Net
W3C Server- Info
Oﬄine 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
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

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 で完璧…

ページのソースを表示

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

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

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

スタイルエディタ

ページの全 CSS 一括編集
point! 編集した CSS は保存可能
新規 CSS 作成や読み込みも可能
ファイル単位のオンオフも

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

レスポンシブデザインビュー

任意解像度での表示を確認
point! 縦横サイズ入れ替え機能も
実ウィンドウより大きな画面も

隠し設定

プリセット画面サイズを
about:conﬁg で変更可能
devtools.responsiveUI.presets =
[{"width": 320, "height": 480},
{"width": 360, "height": 640},
{"width": 480, "height": 800}]
など JSON 文字列で指定

再起動後に反映されます

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

Web コンソール

基本的なコンソール
ショートカット: Ctrl+Alt+K
表示位置: 上、下、別ウィンドウ
メッセージのフィルタ

point! コンソール開く前のログ
メッセージも記録される


簡易 JavaScript 実行環境

簡易 JS 実行環境
コードの自動補完もあり
注: Fx6 からロケーションバーの
point! javascript: URL はページ権限なし

ソーシャルエンジニアリング対応
困るなら InheritPrincipal アドオン
https://addons.mozilla.org/ﬁrefox/
addon/inheritprincipal/


ネットワーク応答要求の確認

HTTP ヘッダの確認
コンソールの URL をクリック
Request / Response ヘッダ
通信時間や Cookie の確認

int!
HTTP BODY も記録可能
po
右クリックメニューから「要求ボ
ディと応答ボディを記録」

link_to_document

コンソール利用時の注意

コンソールは Sandbox 環境
Web ページの要素には window 経
point! 由でアクセスする必要あり
例えば、ページコンテキストにグ
ローバル変数を定義するには:
window.foo = "value";

point! Inspectorで選択している要素
には $0 変数でアクセス可能


ビルトイン関数＆変数
関数や変数機能
DOMノードをIDで検索。document.getElementById() またはページに
$()
$ 関数があればそれが使われる。
$$() DOMノードリストをCSSセレクタで検索。document.querySlectorAll()

$0 現在インスペクタで選択している要素

keys() 引数オブジェクトのプロパティ名リストを返す。object.keys

values() 引数オブジェクトの値リストを返す。

clear() コンソールの出力をクリア

inspect() 引数オブジェクトの調査ウィンドウを開く

pprint() オブジェクトや配列を見やすい形でダンプ出力

help() ヘルプページを開く


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

スクラッチパッド

Eclipse Orion エディタ内蔵
ショートカット: Shift+F4
コードを実行、調査、表示
調査: インスペクタ画面を表示
表示: 実行結果をコメントで挿入

point! 選択範囲だけを実行可能！


スクラッチパッドの注意点

Scratchpad も Sandbox 環境
Web ページの要素には window
point!
経由でアクセスする必要あり
例えば、ページコンテキストにグ
ローバル変数を定義するには:
window.foo = "value";


ショートカットキー
機能キー機能キー

すべて選択 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 本体を開発す
る時に便利です


スクリプトデバッガ

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

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

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

オマケ: 開発中のもの…

リモートデバッガ

Android 版 Firefox に
詳細手順こちらで解説:
https://dev.mozilla.jp/2012/07/
ﬁrefox-remote-debugger/

設定変えて有効化するので
現状では隠し機能状態です

デバッガに追加予定の機能

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

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

イベントタイムライン

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

http://grssam.com/

Marionette (要独自ビルド)

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

ドキュメントは MDN にあります:
https://developer.mozilla.org/ja/Tools

最新情報は公式ブログで:
http://blog.mozilla.org/devtools/

Firebug

以後 Firebug の話

Firebug

伝統と信頼の開発者ツール
情報量も結構豊富？
アメリカの方言で蛍のこと
point! 間違ってもゴキさんじゃない

クイック情報ボックス便利

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()


HTML パネル

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

実体の表示方法変更

ex: "∫"
シンボル表示: ∫
名前表示: ∫
ユニコード表示: ∫

Firebug 用拡張機能: Firepicker

カラーピッカーを追加
ﬁrefox/addon/ﬁrepicker/

Firebug 用拡張機能: CSS Usage

ページで使われてる
ルールの確認に

Script (JavaScript デバッガ)

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

DOM パネル

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

通信のタイムライン表示

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

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

Cookie Management

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


Firebug Options

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

隠し？オプション

about:config で設定可能
extensions.firebug.*
ex: ログ保存行数
extensions.firebug.net.logLimit
extensions.firebug.console.logLimit

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

Firebug のデザイン変更

1. Stylish をインストール
ﬁ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/

Firefox and Firebug with Foxkeh

Recommandé

Recommandé

Contenu connexe

Similaire à Firefox and Firebug with Foxkeh

Similaire à Firefox and Firebug with Foxkeh (20)

Plus de dynamis

Plus de dynamis (20)

Dernier

Dernier (7)

Firefox and Firebug with Foxkeh