ページ内のブレイクポイントを一覧にしてくれるブックマークレット。ページ内の「Breaq」って書いてある青いブックマーク部分をお気に入りなどにドラッグして使います。ブレイクポイントを調べたいページを表示した状態で、事前にブックマークに登録しておいたBreaqをクリックすると、ページ内のブレイクポイント一覧がブラウザウィンドウ右下に出力されます。境目や各BPの位置付けなどが分かりやすく、シンプルに知りたい情報だけに機能が絞られてる点がとってもナイス。常用ブックマークレットフォルダに突っ込んでおきました。
Webサイトのレイアウトをする際に使えるブックマークレット。お気に入りバーなどに登録しておけば、対象のサイトを表示中にクリックするだけでアウトラインを表示してくれます。borderではなくoutlineという点がナイスです。試しにこのブログ表示中に使ってみましたが、ブロック要素の輪郭がハッキリと表示されました。レイアウト崩れとか起こしてる時のデバッグに使えそうです。汎用性の高いのはブックマークレットだけど、Chrome Extension形式でも配布されています。
ページ内で使われているフォントの種類や大きさを判別し、かつそのフォントを使って自由にタイプできるというブックマークレット。ページ内にある「Type Sample」という青いボタンをブックマークとして登録し、フォントを判別したいサイト内においてブックマークレットをクリック。その後調べたいテキストをクリックすると色々ゴニョゴニョできます。ナイスなのはページ内でWebフォントが使われていた場合、どこのWebフォントサービスの（まぁだいたいGoogleですが）、何ていうフォントなのかまで表示してくれる点。Webタイポグラフィにおいてなんだかとても役に立ちそうです。
レスポンシブレイアウトでサイトを作った際に、各ブレイクポイントの指定結果を一括で確認できるオンラインツール。ブックマークレットとして配布されているので、ブラウザのブックマークに追加して使います。調べたいサイトを表示してブックマークを実行すると、対象サイトにいくつのブレイクポイントが指定されているか、それぞれWidth何ピクセルに指定されているか、各レイアウトでどのように表示されるのかを1ページで確認できます。いやこれ素晴らしいですね。いちいちブラウザウィンドウを縮めたり広げたりする必要がなくて確認の手間が省けそうです。早速Safariのブックマークに突っ込んでおきました。
今ブラウザで開いているWebサイトの背景画像を、SubtlePatternsに格納されているテクスチャで簡易的に置き換えるというブックマークレット。試しにやってみたところ、どうやらサイトのbody backgroundが置き換わるようです。SubtlePatternsは自分もよくテクスチャ探しに使うサイトで、タイルパターンがジャンルごとに分けて数多く配布されています。ブックマークレットを起動する事で、各カテゴリの中から任意のパターンを指定できるので、「このサイトで試しにこのテクスチャを背景にしたらどうなるだろう」的な事をお試しでやってみる事ができます。コーディング後に背景画像迷ってる時なんかにイイですね。
サイト内の任意のテキストの文字組みを調整する事のできるブックマークレット。使い方は簡単で、サイト内に用意されている「drag to bookmarks bar to install」のリンクをブックマークして、文字組みしたいサイトを開いた状態でこのブックマークレットを実行するだけ。kern.jsのサイトはそのままデモサイトになっていて、「kern.js」というタイトルテキストをクリックする事で動作させる事ができます。「なるほどすげーなー」とは思ったものの、実際にどこでどう使うかについては正直あまりピンとこないんですよね。画像ではなくテキストのままでタイポ組んだ時の個別調整とか、そういう場面で使えそうな感じです。
レスポンシブレイアウトの確認に便利なブックマークレット。使い方はサイト内の「RWD Bookmarklet」のリンクを、ブラウザのブックマークに放り込むだけ。後は確認したいサイトを表示させてブックマークレットを実行するだけです。ブックマークレットが実行されると、ブラウザウィンドウ上部にボタン類が出てきます。左からタブレット（1024*768pxなのでiPad準拠です）ランドスケープ、タブレットポートフォリオ、スマートフォン（これもiPhone準拠）ランドスケープ、スマートフォンポートフォリオという順にプリセットボタンが並んでます。これらを押すとブラウザウィンドウ内でサイトの表示がリサイズされ、スマートフォンなどでどのように表示されるかをシミュレートできます。このブックマークレットの素晴らしい点は、ブラウザウィンドウそのものをリサイズするのではなく、ウィンドウ内でフロート表示する点。ブラウザウィンドウの強制リサイズってなんだかイラっとしますからね。便利なので常用ブックマークレットフォルダに突っ込ませてもらいました。
閲覧中のページ内のCSS3指定のみを一時的にオフにできるブックマークレット。サイト内の「deCSS3」のリンク（JSが格納されてます）をブックマークしておく事で使えます。サイト内でCSS3が使われてる箇所がすぐに分かるので、かっこいいページ見つけた時なんかに使えそう。あと普段モダンブラウザを使うのが当たり前になってる人が、レガシーブラウザでの描画を簡易的に確認したい時なんかに便利。とりあえず自分もブックマークレットフォルダに突っ込んでおきました。
