Firefox DevTools
-
Upload
dynamis- -
Category
Technology
-
view
3.297 -
download
11
description
Transcript of Firefox DevTools
Developer Tools~Try Firefox Developer Tools~
Slides @ CSS Nite in Osaka vol.31 on 2012/06/29by Tomoya ASAI (dynamis)
Last Update: 2012/07/05
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>@
Page Source
ページのソースを表示
ありますよね、当然。ショートカット: Ctrl+UFx12 から行番号表示に対応
選択部分のソースを表示範囲選択して右クリック
Inspector
https://developer.mozilla.org/ja/Tools/Page_Inspector
インスペクタ
要素を調査するツールショートカット: Ctrl+Alt+Iマウスオーバーで要素を選択
Fx14 でメニューを追加左: 対象要素の再選択右: innerHTML/outerHTML、 ノードの削除、クラスロック
https://developer.mozilla.org/ja/Tools/Page_Inspector
HTML パネル
HTML リアルタイムエディタ属性はダブルクリックで編集可右クリックから要素の削除、InterHTML/OuterHTML コピー
より強力なエディタ (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 構造を3D可視化テクノロジーの無駄遣い開発時は無駄機能満載だった...
画面外要素の選択も簡単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!
link_to_document
Responsive
レスポンシブデザインビュー
任意解像度での表示を確認縦横サイズ入れ替え機能も実ウィンドウより大きな画面も
point!
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 ファイルを作る[ { name: 'hello', description: 'Show a message', params: [ { name: 'name', type: 'string', description: 'Who to say hello to', } ], exec: function(args, context) { return 'Good evening, ' + args.name; } }]
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 さんに振るときっと良い (笑)
全部まとめて...
更にその後は…
Event Timeline
https://github.com/scrapmac/Graphical-Timeline-of-Events/downloads
イベントタイムライン
発生したイベントを可視化マウス、キーボード、描画、ページ遷移などのイベント
複雑なイベントデバッグに
http://grssam.com/
ドキュメントは MDN にあります:https://developer.mozilla.org/ja/Tools
最新情報は公式ブログで:http://blog.mozilla.org/devtools/