• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Firefox DevTools
 

Firefox DevTools

on

  • 3,850 views

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

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

Statistics

Views

Total Views
3,850
Views on SlideShare
3,569
Embed Views
281

Actions

Likes
8
Downloads
14
Comments
0

5 Embeds 281

http://osaka.cssnite.jp 267
https://si0.twimg.com 6
http://us-w1.rockmelt.com 4
https://twitter.com 3
https://web.tweetdeck.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Firefox DevTools Firefox DevTools Presentation Transcript

    • 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
    • about:
    • 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>
    • Page Source
    • ページのソースを表示 ありますよね、当然。 ショートカット: Ctrl+U Fx12 から行番号表示に対応 選択部分のソースを表示 範囲選択して右クリック
    • 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 リアルタイムエディタ point! 属性はダブルクリックで編集可 右クリックから要素の削除、 InterHTML/OuterHTML コピー より強力なエディタ (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 構造を3D可視化 テクノロジーの無駄遣い 開発時は無駄機能満載だった... point! 画面外要素の選択も簡単 3D 表示&選択ツールです https://developer.mozilla.org/en/Tools/Page_Inspector/3D_view
    • Style Editor
    • https://developer.mozilla.org/ja/Tools/Style_Editor
    • スタイルエディタ ページの全 CSS 一括編集 point! 編集した CSS は保存可能 新規 CSS 作成や読み込みも可能 ファイル単位のオンオフも 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 からロケーションバーの point! javascript: URL はページ権限なし ソーシャルエンジニアリング対応 困るなら InheritPrincipal アドオン https://addons.mozilla.org/firefox/ addon/inheritprincipal/ https://developer.mozilla.org/ja/Tools/Web_Console
    • ネットワーク応答要求の確認 HTTP ヘッダの確認 コンソールの URL をクリック Request / Response ヘッダ 通信時間や Cookie の確認 int! HTTP BODY も記録可能 po 右クリックメニューから「要求ボ ディと応答ボディを記録」 link_to_document
    • コンソール利用時の注意 コンソールは Sandbox 環境 Web ページの要素には window 経 point! 由でアクセスする必要あり 例えば、ページコンテキストにグ ローバル変数を定義するには: window.foo = "value"; point! Inspectorで選択している要素 には $0 変数でアクセス可能 https://developer.mozilla.org/ja/Tools/Web_Console
    • ビルトイン関数&変数関数や変数 機能 DOMノードをIDで検索。document.getElementById() またはページに $() $ 関数があればそれが使われる。 $$() DOMノードリストをCSSセレクタで検索。document.querySlectorAll() $0 現在インスペクタで選択している要素 keys() 引数オブジェクトのプロパティ名リストを返す。object.keysvalues() 引数オブジェクトの値リストを返す。 clear() コンソールの出力をクリアinspect() 引数オブジェクトの調査ウィンドウを開くpprint() オブジェクトや配列を見やすい形でダンプ出力 help() ヘルプページを開く https://developer.mozilla.org/ja/Tools/Web_Console
    • Scratchpad
    • https://developer.mozilla.org/ja/Tools/Scratchpad
    • スクラッチパッド Eclipse Orion エディタ内蔵 ショートカット: Shift+F4 コードを実行、調査、表示 調査: インスペクタ画面を表示 表示: 実行結果をコメントで挿入 point! 選択範囲だけを実行可能! https://developer.mozilla.org/ja/Tools/Scratchpad
    • スクラッチパッドの注意点 Scratchpad も Sandbox 環境 Web ページの要素には window point! 経由でアクセスする必要あり 例えば、ページコンテキストにグ ローバル変数を定義するには: window.foo = "value"; https://developer.mozilla.org/ja/Tools/Scratchpad
    • ショートカットキー 機能 キー 機能 キーすべて選択 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:config で次の設定を: devtools.chrome.enabled=true 「実行環境」メニューが追加 拡張機能や Firefox 本体を開発す る時に便利です https://developer.mozilla.org/ja/Tools/Scratchpad
    • JS Debugger
    • スクリプトデバッガ JavaScript デバッガです ショートカット: Ctrl+Alt+S Fx15 からの新ツール 別ウィンドウでも起動可能 監視点は現在未実装 point! Object.prototype.watch を使う
    • デバッガに追加予定の機能 監視点の設定 変数の変更時にブレーク タイムトラベル(巻き戻し) リモートデバッガの強化 ...などなど
    • 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 から Vimperator http://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/