Web scratch

Posts Tagged ‘Firebug’

Software is hard | Page load analysis using Firebug の記事を元に書いています。
January 18th, 2010に書かれた時点での例を使用しているため、現在のブラウザでは若干挙動が違うかもしれません。
また、著者のJan Odvarkoさんに翻訳許可は頂いていますが、翻訳というより意訳や自分の理解のために書いていたので、いろいろ書き加えたりしています。
Net panel(ネットパネル)について理解したいと思って書いたので、Net Panel自体の解説記事Software is hard | Introduction to Firebug: Net Panelも一緒に読むといいかもしれません。

翻訳許可のメールをわずか15分で返してくれた著者のJan Odvarkoさんに感謝を。
Thnak you, Jan Odvarko.

危険な広告を除去するのにAdblock++を使用していましたが、Firefox5では動かないようなので(ネイティブなものはバージョン毎にコンパイルする必要があるとかないとか)代替として、adblock#.uc.jsを使ってみることにしてみました。

adblock#.uc.jsにはadblock系リスト変換君.htmlというadblock++形式などから変換できるものが入ってますが、さすがニッチなadblock++からadblock#への変換はないようなので書いてみました。
(今思えばadblock系リスト変換君.htmlを拡張すればよかったかも…)

必要なもの

• Firebug

以下のコードをFirebugのコンソール上で実行

adblockDataの部分は自分のabout:configからextensions.adblock++.filter_array の値に差し替えてください。
最後のcopy関数以外は別にFirebugに依存しているわけじゃないので、他の環境でも少し書き換えれば動作すると思います(MITライセンスなのでご自由に)
変換したものはクリップボードに入るので、後はadblock#.uc.js Filter Managerを開いて、入力欄にペーストして”追加”のボタンを押せばフィルターを移行できると思います。

Adblock++はフィルタにコンテンツの種類を設定できるのですが、adblock#.uc.jsは対応していないのでそれ系のフィルターは自動で外されます。また既にdisableなフィルターも外されます。
正規表現周りは元々使ってないので、ちゃんと動作するかは微妙です。
一応、Readmeに従って下記の処理には対応させたつもりです。

ただし,「/ads/」のように前後に「/」が付く物は正規表現フィルタと誤認識されるのを防ぐため,「*/ads/*」と表記する.

• adblock++ から adblock# 形式へ変換する(Firebug上で実行) — Gist

Firefoxのデバッグ拡張ことFirebugですが、Firefox4よりFirebugとは別にWeb Consoleという機能が入りました。
しかし、Firebug自体もさらに便利になっているので、少し紹介します。(Firebug1.7 –1.8 の範囲で)

現在のFirefox4に正式対応しているのはFirebug1.7xで、Firebug1.8xはAlpha版として公開されているのでまだ不安定な部分もあることに注意して下さい。
特に注意書きしてない部分はFirebug1.7の項目だと思って大丈夫だと思います

Read the rest of this entry »

KeySnailついて

自分はEmacsユーザーでもありませんが、KeyConfigの代わりにKeySnailを使い始めました。
そもそもKeyConfigとは役割違うし、KeyConfigもFirefox4対応したので併用しています。
keysnailはuserChrome.jsのキー特化みたいな存在で、便利なAPIがある環境みたいなとらえ方でもいいかもしれないです。(emacsのキーバインドは一切使わないで、まっさらな状態で始めました)

Read the rest of this entry »

以前、GreasemonkeyにGrowlのような通知を呼ぶ機能を加える「Dbus Notify」 | Web scratchでGreasemonkeyから使える機能を増やせたら楽しそうと書いたと書きましたが、calloutのソースを参考にGreasemonkeyスクリプトから使える関数を追加するuseChrome.jsを書いてみました。

このuserChrome.jsを読み込むと、

fbug
Clipboard.get
Clipboard.set

などのメソッドがGreasemonkeyスクリプトから使えるようになります。
fbugはconsole.logと同じ動作ですが、Firebugのウィンドウを開いていない状態(Firebugがオフ)でもFirebugのウィンドウを開いてからlogを出してくれる関数です。(元ネタはxqjs)
Clipboardの方はjetpack prototypeからのコピペなのであんまり確認してません。

当たり前ですがこのuseChrome.jsをインストールしてない人の環境ではfbugなどの関数は使えないため、デバッグ目的か自分用のGreasemonkeyに使用する感じになると思います。
以下のようにデバッグ時のみ動く関数でラップしておけば、配布の際にDEBUG = false;とするだけでいいので楽かも知れません。

var DEBUG = true;

    log("なんとか");
    // DEBUG - http://gist.github.com/428596
    function log() {
        if ( typeof DEBUG != 'undefined' && DEBUG ) {
            fbug.apply(this, arguments);
        }
    }

何かもっと便利なデバッグ関数とか作れそうな気がします。
多分Greasemonkeyスクリプトからしか動かないようにできているので(あんまり自信ない)、そこまで危険な事は起こらないかと思いますが安全は保証できないので自己責任でというテンプレを入れておく。

gist: 428596 – Greasemonkeyから使える関数を追加するuserChrome.js- GitHub

http://gist.github.com/428596

userChrome.jsでJavaScript Actionsのようなスクリプトの実行コマンドをサブメニューのネスト, タブメニューやメインメニュー、コンテキストメニューなどのメニューに追加する形のスクリプトを扱いやすくしたり、GreasemonkeyのAPIと似たような機能を持つライブラリが使える要にするuserMenu.jsの紹介

ダウンロードは以下の場所から

userChrome.js – Mozilla Firefox まとめサイト

http://firefox.geckodev.org/index.php?cmd=read&page=userChrome.js&word=user#g4f5f928

いろいろバージョンが置かれてますがuserMenu.js ver. 1.21mod 一式(Fx3以降)と最新のものをダウンロードして、ver1.21はあらかじめtabmenuなどのフォルダがあって分かりやすいので、それらを最新版で上書きすると良いでしょう。

こんな感じのファイルが入ってるので、とりあえず動作させるために、FirefoxプロファイルのChromeフォルダにそのまま中身を突っ込みます。

Chrome
│  0.UCJSToolkit.uc.js
│  GM_modoki.jsl
│  jsa.jsl
│  JSA_modoki.jsl
│  preload.sample.txt
│  scripting.txt
│  userMenu.js.readme.txt
│  userMenu.pl.js
│  userMenu.uc.js
│  ここにはuserChrome.jsなども存在
│
├─contextmenu
│      Add Copy.se.js
│      Element Killer.js
│      Google cache.nl.js
│      Google Translate.se.js
│      Open IE.nl.js
│      Open Selection.se.js
│      Reload Image.im.js
│      Use JavaScript.auto.js
│      Wayback.nl.js
│
├─tabmenu
│  └─Order.ct
│          FrameOrder.ct.auto.js
│          ImageOrder.ct.auto.js
│          JSOrder.ct.auto.js
│          PluginOrder.ct.auto.js
│          RedirectOrder.ct.auto.js
│          userContentOrder.ct.auto.js
│
└─toolmenu
        0000.アドオンリストをタブに表示.L.js
        Inspection Here.js
        Rebuild User Menu.js
        Reload userContent.css.js
        Restart Firefox.r.js
        ~.---

移動させて再起動すると、コンテキストメニューやツールメニューにいろいろな項目が増えていれば成功です。

一つ一つのスクリプトの機能は数が多いので適当に見れば分かるので、開発したスクリプトをメニューに表示させる方法へ。scripting.txtやuserMenu.js.readme.txtを見ると詳しく書いてありますが、contextmenuやtoolmenuといったフォルダがそのままの構成でメニューと対応してるので、それらのフォルダに作ったスクリプトをjs拡張子にして入れるだけで簡単に登録できます。(スクリプトのファイル名ルールでショートカットなども設定できる)
例えば、右クリックに表示されるスクリプトで複数のものを一つのフォルダに入れれば、それが一つの階層になります。

contextmenu
└─JSAction
        Add Copy.se.js
        Element Killer.js

また先ほど紹介したようにGreasemonkeyのAPIと同様の機能を持ったものが一部使えます。
GM_setValueやGM_xmlhttpRequestなど。

デバッグ方法としてconsole.ほげ()というFirebugで使われるメソッドが使用できると書いてあるのですが、イマイチ動かなかったので、
GM_modoki.jsl (GreasemonkeyのAPIを定義してるファイル)の先頭部分に

// fbug(x)でFirebugのコンソールに出力
function main(){
  var windowManager = Components.classes['@mozilla.org/appshell/window-mediator;1']
                                .getService(Components.interfaces.nsIWindowMediator);
  return windowManager.getMostRecentWindow("navigator:browser");

}
function fbug(x){
   var {Firebug} = main();
   if(Firebug.Console.isEnabled() && Firebug.toggleBar(true, 'console'))
     Firebug.Console.logFormatted(Array.slice(arguments));
   return x;
}

と書き足して、fbug(x)でFirebugのコンソールに出力するようにしました。
Services.jsmが使えるなら以下のような感じで書けるようです。xqjs – ’ellaneous が元ネタです。

Cu.import('Services.jsm');// 読み込み先にresource:// かfile://
function main() Services.wm.getMostRecentWindow('navigator:browser');
function fbug(x){
   var {Firebug} = main();
   if(Firebug.Console.isEnabled() && Firebug.toggleBar(true, 'console'))
     Firebug.Console.logFormatted(Array.slice(arguments));
   return x;
}

上記のfirebugコンソールへの出力はxqjsのソースコードを見て知ったものです。
xqjsはExecute JSのようなその場でChromeやcontentに対してJavaScript実行できるアドオンです。
話題のCoffeeScriptやJavaScriptの単語補完、マクロ機能、便利なユーティティ関数などが使える優れたFirefoxアドオンなので、JavaScript ShellやFirebugのコンソールで入力するのが微妙だなーと思う人は一度使って見るといいかと思います。
fbugでFirebugのコンソールにもlogを吐けるので連携させるとなお便利。
Firebugで定義されているXpathやCSSセレクタもマクロで定義されており、copy関数なども存在します。

詳しくは作者さんのページとAMOとソースを読む。

xqjs – ’ellaneous

http://d.hatena.ne.jp/murky-satyr/20100504/xqjs

話が完全にすり替わりましたが、userMenu.jsはuserChrome.jsを書く上でかなり便利だと思うので、一度見てみることを進めます。

userMenu.js

http://firefox.geckodev.org/index.php?cmd=read&page=userChrome.js&word=user#g4f5f928

ニコニコ動画の再生ページに埋め込まれている情報 | Web scratch のマイリストページ版みたいなものです。
マイリストにもAPIがありますが(ニコニコ動画のAPIまとめ | Web scratch )マイリストページにいるならば、わざわざAPI叩かなくてもいろんな情報が取得できます。
なんでわざわざDOMから情報を取ってるかというと、変更の影響を受けにくかったりするからです。
ここでのマイリストは人が公開してるマイリストのこと。

my
	Mylist.groupList
		id (number): マイリストID
		user_id (number): マイリストのユーザーID
		name (string): マイリストのタイトル
		description (string): マイリスト説明文
		public (boolean): true // 公開状況
		default_sort (number): 1 (1-17)
		create_time (number): UNIX時間(util.unix2で戻せる)
		update_time (number): UNIX時間
		icon_id (number): 0
		sort_order (number): 0 
	my.currentItems
		[0]...配列
			item_type (number): 0
			item_id (string): 接頭辞がない動画番号(常時)
			description (string): マイリスト登録者による説明文
			item_data 
				video_id (string): 接頭辞がある動画番号(sm数字)
				title (string):  動画タイトル
				thumbnail_url (string): サムネイルURL
				first_retrieve (number): 投稿日時(UNIX時間)
				update_time (number): 更新日時(UNIX時間)
				view_counter (string): 再生数
				mylist_counter (string): マイリスト数
				num_res (string): コメント数
				group_type (string): default 
				length_seconds (string): 再生時間(秒)
				deleted (string): 0 (削除状態0-3?)
				last_res_body (string): 最近のコメント(文字列)
				watch_id (string): 接頭辞なしの動画番号(コミュ、マイメモリー以外だと接頭辞がある)
			watch (number): 0
			create_time (number): マイリスト登録日時(UNIX時間)
			update_time (number): マイリスト更新日時(UNIX時間)

Firebugなどから、console.dir(my)などして構造を確認しておくといいです。
DOMから動画情報を取得するのを少しだけ手助けする関数群を置いておきます。(思ったより役に立たない)

(function () {
	var w = unsafeWindow;
	Mylist = {
		// マイリストの属性
		/*
		Mylist.groupListのツリー
			id (number): マイリストID
			user_id (number): マイリストのユーザーID
			name (string): マイリストのタイトル
			description (string): マイリスト説明文
			public (boolean): true // 公開状況
			default_sort (number): 1 (1-17)
			create_time (number): UNIX時間(util.unix2で戻せる)
			update_time (number): UNIX時間
			icon_id (number): 0
			sort_order (number): 0
		*/
		// Mylist.groupList - my.CurrentGroupのコピー
		groupList: function () {
			return w.my.currentGroup;
		},
		/*
		my.currentItemsのツリー
			item_type (number): 0
			item_id (string): 接頭辞がない動画番号(常時)
			description (string): マイリスト登録者による説明文
			item_data
				video_id (string): 接頭辞がある動画番号(sm数字)
				title (string):  動画タイトル
				thumbnail_url (string): サムネイルURL
				first_retrieve (number): 投稿日時(UNIX時間)
				update_time (number): 更新日時(UNIX時間)
				view_counter (string): 再生数
				mylist_counter (string): マイリスト数
				num_res (string): コメント数
				group_type (string): default
				length_seconds (string): 再生時間(秒)
				deleted (string): 0 (削除状態0-3?)
				last_res_body (string): 最近のコメント(文字列)
				watch_id (string): 接頭辞なしの動画番号(コミュ、マイメモリー以外だと接頭辞がある)
			watch (number): 0
			create_time (number): マイリスト登録日時(UNIX時間)
			update_time (number): マイリスト更新日時(UNIX時間)
		*/
		// Mylist.itemList - my.currentItemsのコピー
		itemList : function(){
			return w.my.currentItems;
		},
	}

	// utility関数群
	utils = {
	  playlength : transPlaylength,
	  unix2 : unixTodate,
	  clone : clone,
	}

	// 再生時間を分秒に変換
	function transPlaylength(length){
		return (length / 60).toFixed(2).toString().split(".").join("分") + "秒";
	}
	// 10桁の数字(UNIXTIME)から2009/10/1 00:00形式で返す
	function unixTodate(x){
		var t=new Date(x*1000);
		return t.getFullYear() + "/" + fillZero(t.getMonth() + 1) + "/" + fillZero(t.getDate()) + " " + fillZero(t.getHours()) + ":" + fillZero(t.getMinutes()) + ":" + fillZero(t.getSeconds());
	}
	// http://d.hatena.ne.jp/javascripter/20080514/1210791575
	// 先頭を0で埋める デフォルト2桁
	function fillZero(num , digit){
		var n = (digit) ? digit : 2;// デフォルト値
		var zero=new Array(n).join('0');//0をn-1文字分つなげた文字列を作る。n==4だと'000'
		var str=zero+num;//zeroとthisをくっつけた文字列を作る。
		var result=str.substr(-n);//strの後ろから、n文字分の文字列を取ってくる。
		return result;
	}
	// オブジェクトのコピーのコピーを作成
	function clone(obj){
		return (typeof uneval == "function") ? eval(uneval(obj)) : false;
	}

})();

gist: 239541 – GitHub

どんな風に使うかというと、上の関数群を読み込んで使用します。
DOMへのアクセスをするものと少しのutility関数群から構成されています。
再生時間を分秒に直したり、UNIX時間で格納されている時間を2009/10/1 00:00形式に直したりするだけです。

// ==UserScript==
// @name           Nico mylist Test
// @namespace      http://efcl.info/
// @include        http://www.nicovideo.jp/mylist/*
// @require        http://gist.github.com/raw/239541/1dab27439133948bd6309f4ba959921a8ce938b9/NicoMylistDom.js
// ==/UserScript==
var t = Mylist.itemList();// DOM my.currentItemsにアクセス
var cpObj = utils.clone(t);// オブジェクトのコピー作成(元の値を残す)
console.log(cpObj.length)
for(var i =0,l =cpObj.length;i<l;i++){
  console.log(i + " : " + cpObj[i].item_data.title + "投稿日 : "+ utils.unix2(cpObj[i].item_data.first_retrieve))
}
cpObj[i-1].item_data.title = "buzz";//コピーしたものを書き換える
console.log(t[i-1].item_data.title)// 元のDOMには影響ない

• Nico mylist Test.user.js

上の関数群のテスト例です。インストールしてマイリストページに行くとコンソールに例が表示されるので参考にどうぞ

FirebugでDOMをtoSource()したときに生成されるJSON形式のようなものがかなり見えづらいので、それを読みやすくコンソールに表示するuserChrome.jsを作成した。
あくまで、見易く表示させることを目的としてたので、整形したものを使うという用途には向いてないかもしれません。

Read the rest of this entry »

FirebugのコンソールタブにあるコマンドラインはちょっとしたJavaScriptの動作を確認する際に便利ですが、普段使ってるエディタのように補完やハイライトされないので、少し複雑になると分かりづらくなりますね。
そこで、内容の編集自体はエディタで行いその内容をコマンドラインに反映させるuserChome.jsを作成しました。

• Firebug_editor.uc.js

使い方

1. ダウンロードしたスクリプトに60行目くらいにエディタのパスを設定する場所があるのでパスを入れる
2. Firebugのコンソールタブで大きい方のコマンドラインを開く
3. 右下にEditorというボタンがあるので押す
4. エディタで内容を編集→保存
5. Firefoxにフォーカスを戻すと自動的に反映

下に動作の動画を置いておくので、下を見ればどのように動いてるか分かると思います。

alice0775のスクリプトが元になってるので、Windows以外でも動くとは思います。
ラップする必要があったらしい。

userChrome.jsの話題9 テキストエリアを外部エディタで編集する – alice0775のファイル置き場 – Yahoo!ジオシティーズ

http://space.geocities.yahoo.co.jp/gl/alice0775/view/20070223/1172156543

gist: 235044 – Firebugに外部エディタ起動ボタンを追加するuserChrome.js- GitHub

http://gist.github.com/235044

メモ

Firebug.chrome.$("fbLargeCommandLine").addEventListener('focus', function(){
	Application.console.log("tewt")
}, true);

とかChrome権限でやるとコマンドラインにフォーカスしたときに動作するaddevenetlinerができる。
今回使ってないけど。