Developer ToolsSlides @ Mozilla Workshop @ Tokyo 6th

by Tomoya ASAI (dynamis)

last update on 2011.10.01see also: http://dynamis.jp/r

Firefox 標準搭載(？)開発者ツールを紹介

コンソールからマジだったのかそれ…まで

Firebug は？今日は扱いません。既に知ってますよね？情報もいっぱいあるよね？

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) は「でゅなみす」と読みます

Introduction Web Console Inspector (Highlighter) Style Editor CSS Doctor Scratchpad GCLI (Graphical CLI) Source Map ...

Agenda

このスライドの見方 こんなスライドが基本スタイル 可読性のため下線なしリンクも コードは要点だけ残した簡略版

-moz- 以外の接頭辞など割愛

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

何かあれば遠慮無く Facebook や Twitter でコンタクトしてください

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

はじめに。

…ということです。

発行／オライリー・ジャパン　発売／オーム社　定価（本体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にチャレンジする番です。

今月中に発売します。買ってね。読んでね。

本日のお仕事完了。後は気楽に...

Web Console

Firefox 4 からの基本ツール

Web Consoleエラーコンソールの強化版上、下、別ウィンドウで表示メッセージの絞り込み、検索

HTTP ヘッダの確認Request, Cookie, Response

簡易 JS 実行環境コードは自動補完

Inspector

Highlighter 基本部分は実装済みHighlighter + Style Inspector + etc.

Chrome URL も大丈夫

Inspector の基本デザイン

折りたたまれた状態

http://dynamis.jp/video/devtools/Style%20Inspector.webm

Inspector要素を調査するツールスタイル、ID を即座に確認

Style Inspector (開発中)パンくずリストMDN ドキュメント参照も

Style Editor

現在開発途中スタイル編集も標準機能に

Style Editorスタイル編集機能スタイル変化は Transitions で滑らかに変化するが楽しい

編集後の CSS を保存可能

プロトタイプの拡張機能あり

https://github.com/neonux/StyleEditor

CSS Doctor

何故スタイルが適用されない？など Web Designer のお悩み解決

CSS Doctor何故スタイルが適用されない？そんな疑問にお答えします。…的なツール。

https://github.com/joewalker/csstools

Scratchpad

基本的な機能は実装済みEclipse Orion 内蔵の JS 実行環境

ScratchpadEclipse Orion をエディタに搭載美しい構文強調 (Firefox 9～)

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

選択範囲だけを実行可能！Content/Chrome 両対応

Graphical CommandLine Interface (GCLI)

搭載時期はまだ未定GUI×CUI の強化版コンソール

http://dynamis.jp/video/devtools/Graphical%20Command%20Line.webm

GCLIGUI × CUI のコンソールある意味 Ubiquity と似ている

標準搭載時期はまだ未定

https://github.com/mozilla/gcli

Source Map

Coffee Script ユーザ待望

http://dynamis.jp/video/devtools/Graphical%20Command%20Line.webm

Source Map変換前のソースにもリンク最小化前のソースを表示変換前の言語で表示Coffee Script など

標準搭載時期はまだ未定

https://wiki.mozilla.org/DevTools/Features/SourceMap

いろいろな開発計画...http://mozilla.github.com/devtools/status/Developer ToolbarHighlighter の強化レイアウト情報の表示親要素の強調表示、ボックスレイアウト ...

複数同時 HighlightAnnotations選択ノードの情報をポップアップ表示

querySelector 検索ボックス

and ...

Tilt

ギャグだと思ってた...

Tilt

ギャグだと思ってた...

TiltDOM 構造を３D可視化Mozilla こういうの大好きテクノロジーの無駄遣い無駄に高機能

真面目に開発されてます

現状拡張機能として開発中https://github.com/victorporof/Tilt/

Any Question ?