プロトタイプ作成してる時、デモの時に他の人の意見を聞きながら、文字や色、フォントなど変更したい時ってありますよね?
そんな時に便利なのが、visbugというChromeで使える拡張機能。
visbugの簡単なデモ
まずは、一部機能の簡単なデモ動画を見てください。
※検索結果の3番目に表示されたこのブログ記事を1番目に移動しました。
インストール方法
インストール方法は簡単。
下記ページでChrome拡張を追加するだけ。
https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc
機能紹介:Guides
マウスカーソルを調べたい箇所の上に持ってくと要素を表示してくれます。
また、要素をクリックして、他の要素にカーソルを持ってくと最初にクリックした要素との距離をピクセル表示してくれます。
機能紹介:Inspect
マウスカーソルで選択した要素のStyle(CSS)を表示してくれます。
またMacの場合、Optionキー押下して、クリックすると表示を残してくれます。
例えば、最初に選択した要素をOption+クリックして、別の要素をOptin+クリックすると最初と2番目をそのまま表示してくれるので見比べることができます。
機能紹介:Accessibility
人が見て、どのくらい分かりやすいかをチェックするためのものっぽいです。
マウスカーソルで選択した箇所で出てくる数値が高ければ高いほど人の目に優しくて問題なければ緑色のチェックが表示され、問題があれば赤色でバツが表示されます。
機能紹介:Move
要素の中で上下左右に対象の要素を移動できます。
例えば横にボタンが3つ並んでいたらそのボタンの順番を変更できます。
つまり要素の中だけで順番を変更できる感じです。
機能紹介:Margin
要素を選択して、その後に上下左右ボタン押下でそれぞれのMarginを広げたり、狭めたりできます。
機能紹介:Padding
要素を選択して、その後に上下左右ボタン押下でそれぞれのPaddingを広げたり、狭めたりできます。
機能紹介:Flexbox Align
選択した要素のAlignを上下左右ボタン押下で変更することができます。
機能紹介:Hue Shift
選択した要素の色、背景色を上下左右ボタンで変更することができます。
要素は複数選択も可です。
機能紹介:Shadow
選択した要素の影を追加することができます。
こちらも上下左右ボタンで変更することが可能です。
機能紹介:Position
このブログのデモに紹介した機能です。
要素を移動できます。
機能紹介:Font Styles
選択した要素のフォントサイズ、Boldを変更できます。
こちらも上下左右ボタンで変更可能。
機能紹介:Edit Text
選択した要素のテキストを変更する機能です。
機能紹介:Search
要素を検索できます。
検索ボックスに検索したいスタイルなどを入力し検索します。
また、▼ボタンからそのページで使われてる要素の候補から検索することもできます。
コメント