no image

WEB制作業務で使う便利なChrome拡張機能まとめ

Pocket
LINEで送る

HTMLエラーチェッカー

この拡張機能のおかげで、閉じタグ忘れたとか初歩的なミスを潰せるようになりました。ありがとうございます!

HTMLエラーチェッカー
HTMLの開始・終了タグの過不足などを検出する拡張機能です。エラーがある場合、数値が表示されます。JSでソースを確認するので、外部送信は行ってません。※formがあるページで挙動がおかしくなる場合は、一時的にオフにしてください。

The QR Code Generator

PCのChrome上で表示しているサイトのURLをQRコードで表示してくれる。
ブラウザチェックでスマホ確認するときに便利。

FireShot

スクリーンショットを撮る拡張機能は色々ありますが、私はこれを使っています(FireFoxではデフォルトでキャプチャを撮る機能があるんですってね)。
ヘッダーからフッターまでのページ全体はもちろん、一部分を選択してキャプチャを撮ることもできます。

Page Ruler

ブラウザ画面上で要素のサイズやMargin/Paddingなど測れる。

Page Ruler
Draw a ruler to get pixel dimensions and positioning, and measure elements on any web page.

Px to Rem

コーディング時、font-sizeの調整などで「22pxはremに換算するといくらだっけ?」と毎回ググらなくて済む。基準となるremの指定値も変更できるのでとてもありがたい。

「チートシートでも良いんじゃ?」と思われるかもしれませんが、ワンクリックでささっと見れるのが便利なんです。

ColorPick Eyedropper

ブラウザで表示しているページから色を読み取れる。画像から色を拾いたいときに便利。

Alt & Meta viewer

その名のとおり、画像のAltと、Meta情報がそれぞれチェックできる拡張機能。WEB制作時の最終確認に役立ちます。

View Image Info

こちらはブラウザ上で表示している画像の情報をひとまとめに見られる拡張機能。

Clear Cache

しつこいChromeさんのキャッシュもさっとひと消し。

アイコンを右クリックからの設定で、キャッシュを消す範囲(現在表示しているページのみか、Chrome全体かなど)を指定したり、Cookieや閲覧履歴なども消せるようにできます。

Lighthouse

サイトのパフォーマンス、アクセシビリティなどの確認できる。サイトの品質向上を拡張機能でできるなんてヤバイ。

このサイトのTOPページも解析してみました。

5つの項目の詳細が下に並ぶのでもっとページは長くなりますが、こんな感じで解析結果が出ます。
思ったほど良い結果ではなかったので、不要なプラグインを消したりしてみよう……。

Open In Incognito

Incognitoとはシークレットモードのこと。名前の通り、現在Chromeで開いているページをワンクリックでシークレットモードで表示させることができる。
アカウントに紐付けされることなく検証できる点もナイス。

Google Analytics オプトアウト アドオン

これはChromeだけの拡張機能ではありませんが(Firefox、Safari、IEではアドオンとして利用できる。Edgeさんは……)、自分のアクセスデータをGoogle アナリティクスで拾わないように設定できる拡張機能。
「アクセスが伸びてるぞ!あ、自分だ」「テストページがページアクセス上位に」などの気まずい状況を回避できる。

Pocket
LINEで送る

back to top