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

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

2. about:

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>

5. Page Source

7. ページのソースを表示
ありますよね、当然。
ショートカット: Ctrl+U
Fx12 から行番号表示に対応
選択部分のソースを表示
範囲選択して右クリック

8. Inspector

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

10. インスペクタ
要素を調査するツール
ショートカット: Ctrl+Alt+I
マウスオーバーで要素を選択
Fx14 でメニューを追加
左: 対象要素の再選択
右: innerHTML/outerHTML、
ノードの削除、クラスロック
https://developer.mozilla.org/ja/Tools/Page_Inspector

11. HTML パネル
HTML リアルタイムエディタ
point! 属性はダブルクリックで編集可
右クリックから要素の削除、
InterHTML/OuterHTML コピー
より強力なエディタ
(TreeEditor) も現在開発中...
https://developer.mozilla.org/ja/Tools/Page_Inspector/HTML_panel

12. スタイルパネル
CSS リアルタイムエディタ
スタイルの編集、オンオフ
計算値スタイルの確認
プロパティヘルプは MDN
スタイル変更もアニメーショ
ンして Foxy! な感じ。(・・).
https://developer.mozilla.org/ja/Tools/Page_Inspector/Style_panel

13. レイアウトビュー
CSS ボックスのサイズ確認
Fx15 から搭載
width x height と
margin, border, padding を確認
point! 畳むと width x height だけ表示

14. 3D インスペクタ (旧称Tilt)
DOM 構造を３D可視化
テクノロジーの無駄遣い
開発時は無駄機能満載だった...
point! 画面外要素の選択も簡単
3D 表示＆選択ツールです
https://developer.mozilla.org/en/Tools/Page_Inspector/3D_view

15. Style Editor

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

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

18. Responsive

20. レスポンシブデザインビュー
任意解像度での表示を確認
point! 縦横サイズ入れ替え機能も
実ウィンドウより大きな画面も

21. Web Console

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

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

24. Web コンソール
基本的なコンソール
ショートカット: Ctrl+Alt+K
表示位置: 上、下、別ウィンドウ
メッセージのフィルタ
point! コンソール開く前のログ
メッセージも記録される
https://developer.mozilla.org/ja/Tools/Web_Console

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

26. ネットワーク応答要求の確認
HTTP ヘッダの確認
コンソールの URL をクリック
Request / Response ヘッダ
通信時間や Cookie の確認
int!
HTTP BODY も記録可能
po
右クリックメニューから「要求ボ
ディと応答ボディを記録」
link_to_document

27. コンソール利用時の注意
コンソールは Sandbox 環境
Web ページの要素には window 経
point! 由でアクセスする必要あり
例えば、ページコンテキストにグ
ローバル変数を定義するには:
window.foo = "value";
point! Inspectorで選択している要素
には $0 変数でアクセス可能
https://developer.mozilla.org/ja/Tools/Web_Console

28. ビルトイン関数＆変数
関数や変数 機能
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

29. Scratchpad

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

31. スクラッチパッド
Eclipse Orion エディタ内蔵
ショートカット: Shift+F4
コードを実行、調査、表示
調査: インスペクタ画面を表示
表示: 実行結果をコメントで挿入
point! 選択範囲だけを実行可能！
https://developer.mozilla.org/ja/Tools/Scratchpad

32. スクラッチパッドの注意点
Scratchpad も Sandbox 環境
Web ページの要素には window
point!
経由でアクセスする必要あり
例えば、ページコンテキストにグ
ローバル変数を定義するには:
window.foo = "value";
https://developer.mozilla.org/ja/Tools/Scratchpad

33. ショートカットキー
機能 キー 機能 キー
すべて選択 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

34. Chrome にもスクラッチパッド
oint! Content
だけでなく Chrome
p
環境でも利用可能
about:config で次の設定を:
devtools.chrome.enabled=true
「実行環境」メニューが追加
拡張機能や Firefox 本体を開発す
る時に便利です
https://developer.mozilla.org/ja/Tools/Scratchpad

35. JS Debugger

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

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

40. Toolbar & GCLI

41. https://developer.mozilla.org/en/Tools/GCLI

42. カスタムコマンドを定義
1. devtools.commands.dir 設定
にカスタムコマンドディレ
クトリを指定する
2. *.mozcmd ファイルを作る
3. cmd refresh で読み込む
Scrachpad では: https://developer.mozilla.org/en/Tools/GCLI/Scratchpad

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

44. もっとコマンドライン！
Vimperator
https://addons.mozilla.org/ja/
firefox/addon/vimperator/
GCLI から Vimperator
http://vimperator.g.hatena.ne.jp/
teramako/20120605/1338900442
こういう話は @teramako さんに振るときっと良い (笑)

45. 全部まとめて...

48. 更にその後は…

49. Event Timeline

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

51. イベントタイムライン
発生したイベントを可視化
マウス、キーボード、描画、
ページ遷移などのイベント
複雑なイベントデバッグに
http://grssam.com/

52. ドキュメントは MDN にあります:
https://developer.mozilla.org/ja/Tools
最新情報は公式ブログで:
http://blog.mozilla.org/devtools/