制作・運用ノウハウ【永久保存版】ウェブエンジニアが入れるべきchromeの拡張機能TweetPocket今回はウェブエンジニアが入れるべきchromeの拡張機能をおすすめ順にご紹介していきたいと思います。★まずは星5つのあまり知られていなさそうな優れものからご紹介していきます。Chromeに追加するこれはcororonでもとても重宝している拡張機能です。Info」を押すだけで、実際の画像サイズとウェブ上で表示されているサイズが一目で分かる優れものです。開発ツールを開かずとも画像サイズが分かるのは本当に便利です。Chromeに追加するこちらは本番環境とステージング環境(テスト環境)をスイッチひとつで切り替えることのできる便利な拡張機能です。右上の拡張機能のアイコンをクリックして「オプション」から設定できます。Nameにサイト名を入れて、Liveに本番環境のURLを記入、Devにステージング環境のURLを記入します。URLを設定していないサイトでは拡張機能のアイコンは下記のままですが、URLを設定すると下記のようになります。▼ステージング環境URLを開いている時URLを設定した場合は、このアイコンを押すだけで、本番環境URLとステージング環境URLをスイッチすることができる大変便利な機能です。Chromeに追加するHTML構文ミスが一目で分かる優れものです。スタイルが崩れた時にhtmlの記述が間違えていたら一目でどこが間違えているのかが分かります。構文ミスがないかエラーチェッカーとして使える優れものです。続いてみんながよく知っているおなじみの必須拡張子です。Chromeに追加する間違いなくウェブエンジニアの中でシェア率が高いであろう、PCの画面のスクリーンショットをとる時に最適なツールです。画像の拡張子もJPEG、PNGやPDFを選ぶことができ、キャプチャを取りたい範囲も選べる優れものです。開発ツールのスマホ表示も丸々スクリーンショットできるのが特徴です。Chromeに追加するウェブ上の色が分かるスポイトツールです。この拡張機能のいいところは何といっても16進数のカラーコード、だけでなくRGB値も出してくれるところです。background-colorだけに透過度を指定したいときはRGB値が必要になるので、とても便利です。Chromeに追加するウェブページを実機でチェックするときに必須の拡張機能です。ほかにもQRコード作成の拡張機能が存在するのですが、正直どれも変わりないです。Chromeに追加するこちらもHTMLエラーチェッカーと似たものになるのですが、こちらはバリデーターとして厳密にチェックするときに便利です。※この拡張子はjsの表示に影響を及ぼす場合があります。自分のPCのみjsが動かない等不具合がある場合はこの拡張機能をOFFにしてみることを推奨します。まとめいかがでしたでしょうか。gestures.Profilecororon株式会社メンバーズ現役webクリエイターの27歳デザイン・コーダーとして様々な会社に常駐してスキルアップに励んでいます。