[B! Chrome][Webデザイン] o_hiroyukiのブックマーク

Googleの新ツールが便利すぎる！デザイナーやディレクター向けの新しいデザインツール -ProjectVisBug | コリス

VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UX エンジニア。機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。

o_hiroyuki 2018/11/29

リンク

CSSを編集して自動保存できるChromeの拡張機能「DevTools Autosave」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、デザイナーの王です。突然ですが、皆さんはどうやってWebページを組んでますか？僕は、HTMLの骨組みをひと通り書き終え、それからChromeで直接CSSを書いていきます。個人的には、ChromeはCSSをリアルタイムでいじれるので便利です。しかし、この手法で組むと、CSSを追加、編集するたびに、いちいちコピペを連発しなければならない。しかもその後ちゃんとコピペしきれているか別タブで確認して・・・。これは、NO GOODです！「編集したCSSをそのまま保存できたらなあ。」と誰もが思うことでしょう。ブラウザのセキュリティ上、そのような機能は永遠に提供されないと思われますが。と、思ったのは誤算でした！なんと、Chromeが開発者向けに「Chrome DevTools Autosave」という名の拡張を出しているんです！これを使えば、編集したCSSがそのまま保存されます！