DOM Guides

・使い方
DOM Guidesは、DOM上の要素に自動でガイドを引くGoogle Chrome 拡張機能です。
この拡張機能を使用することで、各要素の間隔を計測することができます。
アドレスバーの右のアイコンをクリックすることで、on/offを切り替えることができます。
ガイドを表示した状態でクリックすると、選択状態になります。その状態で他のガイドにマウスをホバーすると、間隔を計測して表示します。

・ユーザーでガイドを追加する
ユーザー側が自由にガイドを追加することもできます。DOM Guidesを起動した状態で、Shiftキーを押しながら上下左右にマウスをドラッグすることで、ガイドを追加できます。また、ユーザーで追加したガイドはShiftキーを押しながら ドラッグすることで、移動させることもできます。ガイドを選択した状態でDeleteキーを押すと、ガイドが削除されます。

・注意
この拡張機能は、DOMに大量の要素を追加するため、ページによっては動作が非常に重くなる場合があります。オプションでガイドの数を減らす項目をいくつか用意していますので、必要に応じて設定を変更してください。
現在の仕様ではiframeタグ内部の要素を取得していません。また要素内スクロールには対応していませんので、その旨ご了承ください。