今回は、Chrome拡張機能「VisBug」を紹介いたします。

VisBugは、閲覧中のWebサイトの情報を視覚的に編集できるとても便利なツールです。
デベロッパーツールのデザイナーやディレクター向けという感じでしょうか。

テキストの変更や要素の位置の移動、画像の差し替えも試せるので、色々なアイデアをテストすることができます。打ち合わせの時などに活躍しそうです。

目次

1. VisBugのインストール
2. VisBugの使い方

1.VisBugのインストール

ChromeでVisBugにアクセスするとインストールができます。

2.VisBugの使い方

インストールをすると、Chromeのツールバーにアイコンが追加されます。…①
編集したいWebサイトを閲覧している時に、そのアイコンをクリックするとページの左側にツールバーが表示されます。…②
（編集を終了したいときはもう一度アイコンをクリック。）

それぞれのツールをマウスオーバーすると、使い方が英語で表示されます。操作画面がアニメーションで表示されているのでとてもわかりやすいです。

機能が本当に盛りだくさんなので、今回は個人的に便利だと思う機能をいくつか紹介いたします。

Guide

マウスを移動させるとガイドが表示されます。要素同士のグリッドが揃っているかが分かりやすいです。

Inspect

要素のスタイルシートの確認ができます。フォントサイズや行間などの確認がマウスの移動だけでできるので便利です。カラーがHSL表示なのがちょっと残念。。

「Altキー（MACの場合はoptionキー） + クリック」でInspectウィンドウをピン留めすることができるので、要素同士のスタイルシートを見比べる事も可能です。（解除するにはもう一度要素を「Altキー（MACの場合はoptionキー） + クリック」。）

Position

要素の配置を自由に変更することができます。（TAMくんの位置をマウスだけで移動してみました！）

上下左右キー：ピクセル単位で移動
クリック＆ドラッグ：自由に移動

画像の差し替え

これはGuidesやInspectなどいくつかのツールで利用することができます。
(1) Guidesなどのツールを選択して、Web上の変更したい画像をクリック

(2) 差し替える画像をドラッグ＆ドロップで(1)で作成した枠の中へ

(3) 完成！

まとめ

他にも、

• Accessibility(アクセシビリティに関する情報の確認)
• Edit Text（テキストの編集）
• Margin/Padding（マージン/パディングの調整）

などたくさんの機能があります。

また、VisBugを開いた状態でもデベロッパーツールは使えるので、併用してどんどん使っていきたいですね。