Your SlideShare is downloading. ×
0
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Firefox DevTools
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Firefox DevTools

3,373

Published on

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

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

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,373
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 6. ページのソースを表示 ありますよね、当然。 ショートカット: Ctrl+U Fx12 から行番号表示に対応 選択部分のソースを表示 範囲選択して右クリック
  • 7. Inspector
  • 8. https://developer.mozilla.org/ja/Tools/Page_Inspector
  • 9. インスペクタ 要素を調査するツール ショートカット: Ctrl+Alt+I マウスオーバーで要素を選択 Fx14 でメニューを追加 左: 対象要素の再選択 右: innerHTML/outerHTML、 ノードの削除、クラスロック https://developer.mozilla.org/ja/Tools/Page_Inspector
  • 10. HTML パネル HTML リアルタイムエディタ point! 属性はダブルクリックで編集可 右クリックから要素の削除、 InterHTML/OuterHTML コピー より強力なエディタ (TreeEditor) も現在開発中... https://developer.mozilla.org/ja/Tools/Page_Inspector/HTML_panel
  • 11. スタイルパネル CSS リアルタイムエディタ スタイルの編集、オンオフ 計算値スタイルの確認 プロパティヘルプは MDN スタイル変更もアニメーショ ンして Foxy! な感じ。(・・). https://developer.mozilla.org/ja/Tools/Page_Inspector/Style_panel
  • 12. レイアウトビュー CSS ボックスのサイズ確認 Fx15 から搭載 width x height と margin, border, padding を確認 point! 畳むと width x height だけ表示
  • 13. 3D インスペクタ (旧称Tilt) DOM 構造を3D可視化 テクノロジーの無駄遣い 開発時は無駄機能満載だった... point! 画面外要素の選択も簡単 3D 表示&選択ツールです https://developer.mozilla.org/en/Tools/Page_Inspector/3D_view
  • 14. Style Editor
  • 15. https://developer.mozilla.org/ja/Tools/Style_Editor
  • 16. スタイルエディタ ページの全 CSS 一括編集 point! 編集した CSS は保存可能 新規 CSS 作成や読み込みも可能 ファイル単位のオンオフも link_to_document
  • 17. Responsive
  • 18. レスポンシブデザインビュー 任意解像度での表示を確認 point! 縦横サイズ入れ替え機能も 実ウィンドウより大きな画面も
  • 19. Web Console
  • 20. https://developer.mozilla.org/ja/Tools/Web_Console
  • 21. https://developer.mozilla.org/ja/Tools/Web_Console
  • 22. Web コンソール 基本的なコンソール ショートカット: Ctrl+Alt+K 表示位置: 上、下、別ウィンドウ メッセージのフィルタ point! コンソール開く前のログ メッセージも記録される https://developer.mozilla.org/ja/Tools/Web_Console
  • 23. 簡易 JavaScript 実行環境 簡易 JS 実行環境 コードの自動補完もあり 注: Fx6 からロケーションバーの point! javascript: URL はページ権限なし ソーシャルエンジニアリング対応 困るなら InheritPrincipal アドオン https://addons.mozilla.org/firefox/ addon/inheritprincipal/ https://developer.mozilla.org/ja/Tools/Web_Console
  • 24. ネットワーク応答要求の確認 HTTP ヘッダの確認 コンソールの URL をクリック Request / Response ヘッダ 通信時間や Cookie の確認 int! HTTP BODY も記録可能 po 右クリックメニューから「要求ボ ディと応答ボディを記録」 link_to_document
  • 25. コンソール利用時の注意 コンソールは Sandbox 環境 Web ページの要素には window 経 point! 由でアクセスする必要あり 例えば、ページコンテキストにグ ローバル変数を定義するには: window.foo = "value"; point! Inspectorで選択している要素 には $0 変数でアクセス可能 https://developer.mozilla.org/ja/Tools/Web_Console
  • 26. ビルトイン関数&変数関数や変数 機能 DOMノードをIDで検索。document.getElementById() またはページに $() $ 関数があればそれが使われる。 $$() DOMノードリストをCSSセレクタで検索。document.querySlectorAll() $0 現在インスペクタで選択している要素 keys() 引数オブジェクトのプロパティ名リストを返す。object.keysvalues() 引数オブジェクトの値リストを返す。 clear() コンソールの出力をクリアinspect() 引数オブジェクトの調査ウィンドウを開くpprint() オブジェクトや配列を見やすい形でダンプ出力 help() ヘルプページを開く https://developer.mozilla.org/ja/Tools/Web_Console
  • 27. Scratchpad
  • 28. https://developer.mozilla.org/ja/Tools/Scratchpad
  • 29. スクラッチパッド Eclipse Orion エディタ内蔵 ショートカット: Shift+F4 コードを実行、調査、表示 調査: インスペクタ画面を表示 表示: 実行結果をコメントで挿入 point! 選択範囲だけを実行可能! https://developer.mozilla.org/ja/Tools/Scratchpad
  • 30. スクラッチパッドの注意点 Scratchpad も Sandbox 環境 Web ページの要素には window point! 経由でアクセスする必要あり 例えば、ページコンテキストにグ ローバル変数を定義するには: window.foo = "value"; https://developer.mozilla.org/ja/Tools/Scratchpad
  • 31. ショートカットキー 機能 キー 機能 キーすべて選択 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
  • 32. Chrome にもスクラッチパッド oint! Content だけでなく Chrome p 環境でも利用可能 about:config で次の設定を: devtools.chrome.enabled=true 「実行環境」メニューが追加 拡張機能や Firefox 本体を開発す る時に便利です https://developer.mozilla.org/ja/Tools/Scratchpad
  • 33. JS Debugger
  • 34. スクリプトデバッガ JavaScript デバッガです ショートカット: Ctrl+Alt+S Fx15 からの新ツール 別ウィンドウでも起動可能 監視点は現在未実装 point! Object.prototype.watch を使う
  • 35. デバッガに追加予定の機能 監視点の設定 変数の変更時にブレーク タイムトラベル(巻き戻し) リモートデバッガの強化 ...などなど
  • 36. Toolbar & GCLI
  • 37. https://developer.mozilla.org/en/Tools/GCLI
  • 38. カスタムコマンドを定義 1. devtools.commands.dir 設定 にカスタムコマンドディレ クトリを指定する 2. *.mozcmd ファイルを作る 3. cmd refresh で読み込むScrachpad では: https://developer.mozilla.org/en/Tools/GCLI/Scratchpad
  • 39. .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/
  • 40. もっとコマンドライン! Vimperator https://addons.mozilla.org/ja/ firefox/addon/vimperator/ GCLI から Vimperator http://vimperator.g.hatena.ne.jp/ teramako/20120605/1338900442 こういう話は @teramako さんに振るときっと良い (笑)
  • 41. 全部まとめて...
  • 42. 更にその後は…
  • 43. Event Timeline
  • 44. https://github.com/scrapmac/Graphical-Timeline-of-Events/downloads
  • 45. イベントタイムライン 発生したイベントを可視化 マウス、キーボード、描画、 ページ遷移などのイベント 複雑なイベントデバッグに http://grssam.com/
  • 46. ドキュメントは MDN にあります:https://developer.mozilla.org/ja/Tools 最新情報は公式ブログで: http://blog.mozilla.org/devtools/

×