すぐに忘れる脳みそのためのメモ

ラベル Firebug の投稿を表示しています。すべての投稿を表示

2012年6月28日木曜日

Firefox で XPath により要素を指定する - Firebug と FirePath を使って

1. アドオン Firebug と FirePath をインストールする

Firefox で XPath により要素を指定したい。

XML Path Language – Wikipedia とは、

XML Path Language （XPath; XMLパス言語）は、マークアップ言語 XML に準拠した文書の特定の部分を指定する言語構文である。

予め Firefox に、以下２つのアドオンをインストールしておく。

2. Firebug で対象要素を指定する

例えば、 Yahoo!モバゲーの日記一覧において、記事タイトルのアンカー要素を XPath で指定する。

マウスポインタを、対象要素の上に置き、

右クリック > Firebug で要素を調査

を選択する。

より効率的に対象を選択するには、

マウスポインタを対象要素の上に置き、
Ctrl + Shift + C を押し、
マウスをクリックするか、Enter キーを押す。

このとき、Ctrl + Shift を、左小指で２つのキーを押さえると効率的に作業を行える。

（ショートカットキーは、Firefox ボタン > Web 開発 > Firebug > ショートカットのカスタマイズ を参照。はてなブックマークのアドオンをインストールしている場合、コメントを表示するショートカットキーを解除し、Firefox を再起動する。）

Firebug の HTML タブを確認すると、この例の場合、対象要素を、親要素の class 属性を利用して指定できそうなことを推測できる。

3. FirePath で XPath を指定する

次に、対象の要素を XPath で指定する。

Firebug の FirePath タブをクリックし
XPath フィールドに、以下の XPath を入力して、Enter キーを押す。

//*[@class="lv2-lay"]/a

これにより、XPath の指定した要素が点線で囲まれる。

目的の対象要素以外の要素が点線で囲まれていなので、上記の XPath で良さそうなことが分かる。

2010年6月28日月曜日

Firebug で要素をマウスオーバーときの CSS を調べる

1. 要素をマウスオーバーしたときのスタイルは :hover で指定

Web サイトにおいて、要素をマウスオーバーしたときに見かけを変化させたい場合、CSS の

:hover

を利用する。

hover については Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification の 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus を参照。

The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element.

2. Firebug で :hover を指定する

:hover の指定をブラウザ上で Firebug を用いて微調整し、確認するにはどうすればいいのだろう？

意外と知られていない機能が多い！？Firebugの使い方 | THE HAM MEDI によると、

「:hover」の擬似クラスをつけた要素を、実際にマウスが乗った状態にしてくれます。

THE HAM MEDIA via kwout

要素をマウスオーバーして見かけが変化した後にマウスをさっと下に動かして、必死に :hover のスタイルを変えようとしたけど「できねぇ～」と諦めてた。 ^^;

3. :hover を指定する例

例えばアップルサイトにおけるトップのメニュー `iPhone’ の :hover を有効にするには、

Firebug を起動する。
`iPhone’ のメニュー要素に対応した li 要素内の a 要素を選択
右側のペインにおける スタイル で :hover を選択

これで :hover に設定されている指定を変更することができた。

4. その他

上記解説サイトに書かれていた Firebug 内にコメントを表示できるのも知らなかったなぁ。

2009年9月27日日曜日

Firebug で JavaScript の関数の実行時間を計測する

1. console.time() で関数の実行時間を測る

Firebug で、JavaScript の関数の実行時間を知りたい。

例えば、HTML の pre 要素内で JavaScript ファイルを読み込むとする。

index.html

<html>
    <head></head>
    <body>
        <pre><script src="test.js"></script></pre>
    </body>
</html>

JavaScript のファイルである test.js の中で、console.time(), console.timeEnd() 関数を使うと、関数が実行される時間を測ることができる。

Firebug and Logging によると、

The low-fi approach is to call console.time("timing foo") before the code you want to measure, and then console.timeEnd("timing foo") afterwards.

test.js において、hoge 関数の実行時間を知りたい場合、次のように記述する。

var hoge = function(){
	for (var i = 0; i < 100; i++) {
		document.writeln("hoge");
	}
}

console.time("hoge");
hoge();
console.timeEnd("hoge");

Firebug のコンソールを開き、index.html にアクセスすると、hoge の実行時間が表示される。

2. console.profile() で関数の実行結果を詳しく得る

console.profile() 関数を使うと、console.time() よりも情報を得られる。

The high-fi approach is to use the JavaScript profiler. Just call console.profile() before the code you want to measure, and then console.profileEnd() afterwards

(同上より)

例えば、test.js に piyo 関数を追加し、hoge 関数と piyo 関数実行時間を測る。

var piyo = function(){
	var _piyo = function(){
		for (var i = 0; i < 100; i++) {
			document.writeln("piyo");
		}
	}();
}

console.profile("test");
hoge();
piyo();
console.profileEnd();

index.html を開いて、先ほどと同じくコンソールを見ると、console.time() よりも多くの情報が表示される。

参考

FirebugのConsole API