firefox developer tools
DESCRIPTION
Mozilla 勉強会@東京 6th 前半の開発者ツール紹介スライドTRANSCRIPT
![Page 1: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/1.jpg)
Developer ToolsSlides @ Mozilla Workshop @ Tokyo 6th
by Tomoya ASAI (dynamis)
last update on 2011.10.01see also: http://dynamis.jp/r
![Page 2: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/2.jpg)
Firefox 標準搭載(?)開発者ツールを紹介
コンソールからマジだったのかそれ…まで
![Page 3: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/3.jpg)
Firebug は?今日は扱いません。既に知ってますよね?情報もいっぱいあるよね?
![Page 4: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/4.jpg)
about:me Tomoya ASAI (dynamis) Mozilla Japan - Technical mktg. http://dynamis.jp/ http://facebook.com/dynamis http://twitter.com/dynamitter dynamis mozilla-japan.org@
dynamis (古代ギリシャ語 dunamis) は「でゅなみす」と読みます
![Page 5: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/5.jpg)
Introduction Web Console Inspector (Highlighter) Style Editor CSS Doctor Scratchpad GCLI (Graphical CLI) Source Map ...
Agenda
![Page 6: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/6.jpg)
このスライドの見方 こんなスライドが基本スタイル 可読性のため下線なしリンクも コードは要点だけ残した簡略版
-moz- 以外の接頭辞など割愛
右下には補足や一次情報源 URL
何かあれば遠慮無く Facebook や Twitter でコンタクトしてください
画像からも時々リンクしてます
![Page 7: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/7.jpg)
はじめに。
![Page 8: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/8.jpg)
![Page 9: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/9.jpg)
…ということです。
発行/オライリー・ジャパン 発売/オーム社 定価(本体3,400円+税) オライリー・ジャパンFirefox Hacks Rebooted
ISBN978-4-87311-497-2
Mozilla Japan
推薦書!
Mozilla Japan代表理事 瀧田佐登子
ウェブを使い倒すテクニック満載! ●新しいユーザーインタフェース ●タブグループ ●アプリタブ●Firefox Syncを使ってブラウザ情報の同期を取ろう ●テキスト領域のリサイズ ●Personasで実現する着せ替えブラウザ ●ユーザープロファイルの基本 ●Vimperator ●KeySnail ●VimperatorとKeySnailの設計の違いからくる設計手法 ●Firefox Home ●FirefoxとTwitter ●Facebook関連 ●Add-on SDKとは何か ●Add-on SDKのセットアップ ●拡張機能の開発(基礎編) ●addon-kitライブラリ●api-utilsライブラリ ●拡張機能の開発(応用編) ●拡張機能のローカライズ ●拡張機能の自動テスト●再起動不要な拡張機能「Bootstrapped Extensions」の作り方 ●Bootstrapped Extensionsの制限●
外部スクリプトをBootstrapped Extensionsで読み込む ●FirefoxのUIをBootstrapped Exten-sionsで変更する ●Bootstrapped Extensionsの設定UI ●Bootstrapped ExtensionsでのResource URLの登録 ●Bootstrapped Extensionsと非同期な初期化処理や終了処理 ●XPCOMコンポーネントをBootstrapped Extensionsに組み込む ●Bootstrapped Extensionsでのchrome.manifestの利用 ●Bootstrapped ExtensionsのFirefox 3.6対応 ●e10sにおけるプロセス間通信の基本 ●メッセージマネージャのAPI詳説 ●コンテントスクリプト用のAPI詳説 ●Chromeスクリプトからコンテントスクリプトへ同期的にメッセージを送る ●Bootstrapped Extensionsでコンテントスクリプトを使う ●非同期処理のすすめ ●MozStorageの非同期API ●アドオンマネージャの非同期API●ワーカーによるマルチスレッド処理 ●JSDeferredで非同期処理をスッキリ書く ●Firefoxの非同期処理をDeferred化する ●HTML5再入門 ●ECMAScript5 ●ECMAScript for XML ●E4X 応用●CSS3時代のデザイン ●Webフォント徹底活用 ●テキスト領域のリサイズ ●Canvas入門 ●SVGとSMILによるアニメーション ●新しいアニメーション技術比較 ●コンテンツセキュリティポリシー ●イマドキのセキュリティ機能を活用する ●AndroidでもFirefox ●デバイスセンサーを活用する ●プラグインプロセスの分離 ●js-ctypesとXPConnectの違いを理解する ●js-ctypesの基本的な使い方 ●js-ctypesで自力でメモリを管理する ●Firefox.Future
最新のWeb技術、新世代Add-on SDKはもちろん、FirefoxとWebの未来がこの一冊に集約!日本のMozillaドリームチームが綴ったこの本がバイブルになることは間違いない!次はあなたがHackにチャレンジする番です。
![Page 10: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/10.jpg)
![Page 11: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/11.jpg)
![Page 12: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/12.jpg)
今月中に発売します。買ってね。読んでね。
本日のお仕事完了。後は気楽に...
![Page 13: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/13.jpg)
Web Console
Firefox 4 からの基本ツール
![Page 14: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/14.jpg)
![Page 15: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/15.jpg)
![Page 16: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/16.jpg)
![Page 17: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/17.jpg)
![Page 18: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/18.jpg)
Web Consoleエラーコンソールの強化版上、下、別ウィンドウで表示メッセージの絞り込み、検索
HTTP ヘッダの確認Request, Cookie, Response
簡易 JS 実行環境コードは自動補完
![Page 19: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/19.jpg)
Inspector
Highlighter 基本部分は実装済みHighlighter + Style Inspector + etc.
![Page 20: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/20.jpg)
![Page 21: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/21.jpg)
Chrome URL も大丈夫
![Page 22: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/22.jpg)
Inspector の基本デザイン
![Page 23: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/23.jpg)
折りたたまれた状態
![Page 24: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/24.jpg)
![Page 25: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/25.jpg)
http://dynamis.jp/video/devtools/Style%20Inspector.webm
![Page 26: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/26.jpg)
Inspector要素を調査するツールスタイル、ID を即座に確認
Style Inspector (開発中)パンくずリストMDN ドキュメント参照も
![Page 27: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/27.jpg)
Style Editor
現在開発途中スタイル編集も標準機能に
![Page 28: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/28.jpg)
![Page 29: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/29.jpg)
Style Editorスタイル編集機能スタイル変化は Transitions で滑らかに変化するが楽しい
編集後の CSS を保存可能
プロトタイプの拡張機能あり
https://github.com/neonux/StyleEditor
![Page 30: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/30.jpg)
CSS Doctor
何故スタイルが適用されない?など Web Designer のお悩み解決
![Page 31: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/31.jpg)
![Page 32: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/32.jpg)
CSS Doctor何故スタイルが適用されない?そんな疑問にお答えします。…的なツール。
https://github.com/joewalker/csstools
![Page 33: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/33.jpg)
Scratchpad
基本的な機能は実装済みEclipse Orion 内蔵の JS 実行環境
![Page 34: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/34.jpg)
![Page 35: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/35.jpg)
ScratchpadEclipse Orion をエディタに搭載美しい構文強調 (Firefox 9~)
コードを実行、調査、表示調査: インスペクタ画面を表示表示: 実行結果をコメントで挿入
選択範囲だけを実行可能!Content/Chrome 両対応
![Page 36: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/36.jpg)
Graphical CommandLine Interface (GCLI)
搭載時期はまだ未定GUI×CUI の強化版コンソール
![Page 37: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/37.jpg)
http://dynamis.jp/video/devtools/Graphical%20Command%20Line.webm
![Page 38: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/38.jpg)
GCLIGUI × CUI のコンソールある意味 Ubiquity と似ている
標準搭載時期はまだ未定
https://github.com/mozilla/gcli
![Page 39: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/39.jpg)
Source Map
Coffee Script ユーザ待望
![Page 40: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/40.jpg)
http://dynamis.jp/video/devtools/Graphical%20Command%20Line.webm
![Page 41: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/41.jpg)
![Page 42: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/42.jpg)
Source Map変換前のソースにもリンク最小化前のソースを表示変換前の言語で表示Coffee Script など
標準搭載時期はまだ未定
https://wiki.mozilla.org/DevTools/Features/SourceMap
![Page 43: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/43.jpg)
いろいろな開発計画...http://mozilla.github.com/devtools/status/Developer ToolbarHighlighter の強化レイアウト情報の表示親要素の強調表示、ボックスレイアウト ...
複数同時 HighlightAnnotations選択ノードの情報をポップアップ表示
querySelector 検索ボックス
![Page 44: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/44.jpg)
and ...
![Page 45: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/45.jpg)
Tilt
ギャグだと思ってた...
![Page 46: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/46.jpg)
Tilt
ギャグだと思ってた...
![Page 47: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/47.jpg)
![Page 48: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/48.jpg)
![Page 49: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/49.jpg)
![Page 50: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/50.jpg)
TiltDOM 構造を3D可視化Mozilla こういうの大好きテクノロジーの無駄遣い無駄に高機能
真面目に開発されてます
現状拡張機能として開発中https://github.com/victorporof/Tilt/
![Page 51: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/51.jpg)
![Page 52: Firefox Developer Tools](https://reader033.vdocument.in/reader033/viewer/2022061212/54954961b47959b4448b4577/html5/thumbnails/52.jpg)
Any Question ?