ウェブデベロッパーにお勧めのブックマークレット10選（引用）
Inspect Elementというサイトで
お勧めのブックマークレット10選というものがありました。
その中でも気になった3個をちょちょいと載せます。
ちなみにブックマークレットって何？
使ったことがない方向けに説明をすると、指定されたリンクをお気に入りに登録して、クリックすることでそのページに任意の効果を示すことができます。
またそのページ内にそのリンクがある場合は、クリックするだけで起動することが可能です。
百聞は一見にしかず。このリンクをお気に入りに登録、もしくはクリックしてください。
このページのURLがアラートで表示されたと思います。
クリックするだけだと何も恩恵がありませんが、お気に入りに登録して他のページでそのお気に入りをクリックするとそこのページのURLがアラートで表示されます。
といったようにお気に入りにJavascriptを仕込んで、何か動かしてしまおうというのがブックマークレットです。
詳細は続きから
では本題の個人的に気に入ったブックマークレットを下で紹介します。
元の記事とは順番が違いますが、個人的に気に入った順番で説明しています。
Design
- Grid（グリッド表示）
- Rule（ルーラー表示）
- Unit（2点距離表示）
- Crosshair（十字線表示）
の4機能が使えるブックマークレットです。
コーディング時の細かなデザイン調整を行うときに使用するとよいのではないでしょうか。
このページで起動してみる。
Firebug Lite
FirefoxのアドオンでおなじみのFirebugのLite版（そのままの説明ですね）
アドオンほどの機能はないですが、IEやアドオンがない環境で軽く見る分にはいいかもしれません。
XRAY
ページ内の各要素をクリックして、その部分のボックスモデルを視覚的に確認できる。
offsetやmargin、border、padding、widthなどなど…
クリックした場所の情報が数値や見た目で見ることが出来ます。
MRI
これは、指定したセレクタに該当するHTMLがページ上に何個あるか見ることが出来る物です。
使われていないCSSなどを見つけることが出来たりなどするのではないでしょうか。
ブックマークレットを起動した後の使い方に関しては以下の2通りかと思います。
- 調査したい要素をクリックして、Suggest Selectorsの下に出てきたセレクタを選択する
- 出てきたウィンドウのテキストボックスにセレクタを入力（h2 など）する
上以外の物も気になったら
以下のエントリを参照してみてください。
10 Useful Bookmarklets for Web Designers and Developers
