WWW WATCH

「tingelets」 は、(X)HTML 文書内の選択した要素に背景色を付けて、その場所をわかりやすく表示してくれるブックマークレットのセット。

ブラウザごとの拡張機能ではなく、ブックマークレットなので様々なブラウザで使用可能なのがミソ。

tingelets ： Bookmarklets for Web Developers

tingelets are a set of bookmarklets that you can place in your browsers bookmark bar. When clicked, they highlight a certain tag or set of tags in a specific color or background tile. They are very handy for quickly looking at web layouts in different browsers. You can either highlight tags directly or type in a tag, id or class name to highlight the matching element(s).

使い方はとっても簡単。

ページ中央部にあるブックマークレットのリストから、必要なものをブラウザのブックマークにドラッグ & ドロップするだけ。フォルダを作って 1つにまとめておくといいかも。

あとは、ページを表示させた状態で、ブックマークレットをクリックすると使えます。例えばウチのサイトで 「p」 要素でマークアップされた場所を表示するブックマークレット （tinge-p） をクリックすればこんな感じに。

「tinge-tag」 を使えば、入力フォームが現れて、任意の要素でマークアップされた部分を表示してくれるし、「tinge-class」、「tinge-id」 は同じく任意の class 属性値、id 属性値から探し出すこともできるので、使い方によっては便利かも。

もちろん、より高度な機能を求めるなら Web Developer Plugin などの方がいいのは当たり前なんですけどね。