1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Webページ上のレイアウトや文言をサクッと変更して見た目を試せるChrome ExtensionのVisBugの紹介

Last updated at Posted at 2019-06-28

導入

このYoutubeで紹介されていたうちの一つのChrome ExtensionのVizBugの紹介です。
https://www.youtube.com/watch?v=U_gANjtv28g

今までChrome Developer Toolを開いて見た目調整のお試しをしていたような作業の一部を、ブラウザ上で直感的にできるようになりそうです。

こんな感じ

文章の調整

文章追加とサイズ変更、左寄せ右寄せ変更とかだと以下の動画のようにできます

visbug demo.gif

要素の場所の変更

visbug demo2.gif

他にも色々

あとはPaddingどれくらいかとかをグリッド付きで見せてくれたり、リストの並び替えを簡単にできたりとかできそうです。結構高機能なのでもっと色々できます。

使い方

Chrome Extensionなので追加するだけです。
ページ上でいじるだけなので特に特殊な権限とかは求められませんでした。
https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?