52
Developer Tools ~Try Firefox Developer Tools~ Slides @ CSS Nite in Osaka vol.31 on 2012/06/29 by Tomoya ASAI (dynamis) Last Update: 2012/07/05

Firefox DevTools

  • Upload
    dynamis-

  • View
    3.298

  • Download
    11

Embed Size (px)

DESCRIPTION

CSS Nite in Osaka vol.31 で使用したスライド(に若干加筆したもの)

Citation preview

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

Page 2: Firefox DevTools

about:

Page 3: Firefox DevTools

about:dynamisMozilla Japan

http://dynamis.jp@dynamitter

facebook.com/dynamisレッサーパンダが好き。

mailto: Tomoya ASAI <dynamis mozilla-japan.org>@

Page 4: Firefox DevTools

about:slides

下線なしリンクも使いますコードは要点だけの簡略版特に注意が必要なとき以外は-moz- 以外の接頭辞など割愛

右下には補足や一次情報源 URL

画像からも時々リンクしてます

mailto: Tomoya ASAI <dynamis mozilla-japan.org>@

Page 5: Firefox DevTools

Page Source

Page 6: Firefox DevTools
Page 7: Firefox DevTools

ページのソースを表示

ありますよね、当然。ショートカット: Ctrl+UFx12 から行番号表示に対応

選択部分のソースを表示範囲選択して右クリック

Page 8: Firefox DevTools

Inspector

Page 10: Firefox DevTools

インスペクタ

要素を調査するツールショートカット: Ctrl+Alt+Iマウスオーバーで要素を選択

Fx14 でメニューを追加左: 対象要素の再選択右: innerHTML/outerHTML、 ノードの削除、クラスロック

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

Page 11: Firefox DevTools

HTML パネル

HTML リアルタイムエディタ属性はダブルクリックで編集可右クリックから要素の削除、InterHTML/OuterHTML コピー

より強力なエディタ (TreeEditor) も現在開発中...

point!

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

Page 12: Firefox DevTools

スタイルパネル

CSS リアルタイムエディタスタイルの編集、オンオフ計算値スタイルの確認プロパティヘルプは MDN

スタイル変更もアニメーションして Foxy! な感じ。(・・).

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

Page 13: Firefox DevTools

レイアウトビュー

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

Page 14: Firefox DevTools

3D インスペクタ (旧称Tilt)

DOM 構造を3D可視化テクノロジーの無駄遣い開発時は無駄機能満載だった...

画面外要素の選択も簡単3D 表示&選択ツールです

point!

https://developer.mozilla.org/en/Tools/Page_Inspector/3D_view

Page 15: Firefox DevTools

Style Editor

Page 17: Firefox DevTools

スタイルエディタ

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

point!

link_to_document

Page 18: Firefox DevTools

Responsive

Page 19: Firefox DevTools
Page 20: Firefox DevTools

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

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

point!

Page 21: Firefox DevTools

Web Console

Page 24: Firefox DevTools

Web コンソール

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

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

point!

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

Page 25: Firefox DevTools

簡易 JavaScript 実行環境

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

point!

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

Page 26: Firefox DevTools

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

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

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

point!

link_to_document

Page 27: Firefox DevTools

コンソール利用時の注意

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

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

point!

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

Page 28: Firefox DevTools

ビルトイン関数&変数

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() ヘルプページを開く

Page 29: Firefox DevTools

Scratchpad

Page 31: Firefox DevTools

スクラッチパッド

Eclipse Orion エディタ内蔵ショートカット: Shift+F4

コードを実行、調査、表示調査: インスペクタ画面を表示表示: 実行結果をコメントで挿入

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

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

Page 32: Firefox DevTools

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

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

point!

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

Page 33: Firefox DevTools

ショートカットキー

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~

Page 34: Firefox DevTools

Chrome にもスクラッチパッド

Content だけでなく Chrome 環境でも利用可能about:config で次の設定を:devtools.chrome.enabled=true「実行環境」メニューが追加拡張機能や Firefox 本体を開発する時に便利です

point!

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

Page 35: Firefox DevTools

JS Debugger

Page 36: Firefox DevTools
Page 37: Firefox DevTools
Page 38: Firefox DevTools

スクリプトデバッガ

JavaScript デバッガですショートカット: Ctrl+Alt+SFx15 からの新ツール別ウィンドウでも起動可能

監視点は現在未実装Object.prototype.watch を使うpoint!

Page 39: Firefox DevTools

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

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

Page 40: Firefox DevTools

Toolbar & GCLI

Page 42: Firefox DevTools

カスタムコマンドを定義

1. devtools.commands.dir 設定にカスタムコマンドディレクトリを指定する2. *.mozcmd ファイルを作る3. cmd refresh で読み込む

Scrachpad では: https://developer.mozilla.org/en/Tools/GCLI/Scratchpad

Page 43: Firefox DevTools

.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/

Page 45: Firefox DevTools

全部まとめて...

Page 46: Firefox DevTools
Page 47: Firefox DevTools
Page 48: Firefox DevTools

更にその後は…

Page 49: Firefox DevTools

Event Timeline

Page 51: Firefox DevTools

イベントタイムライン

発生したイベントを可視化マウス、キーボード、描画、ページ遷移などのイベント

複雑なイベントデバッグに

http://grssam.com/

Page 52: Firefox DevTools

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

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