WEBコーダーとして仕事をする上で、いくつか入れておかないと仕事にならない！というレベルで使っているgoogle拡張機能があるので、今回はそれを紹介したいと思います！
PerfectPixel
一番使用頻度が「PerfectPixel」というjpgやpngをサイト上に重ね合わせることができる拡張機能です。
基本的にはデザイナーさんに作ってもらったデザインベースでのコーディング作業をしているのですが、figmaで生成されるcssだけではスタイル調整が上手くいかず…。
この拡張機能でデザインを重ね合わせて、細かい微調整を行っています！
拡張機能が使えるようになるまではPhotoshopのデザインに重ね合わせていたので…時代の進歩がかなりありがたいです😭
SEO META 1 COPY
デザインの次に使うのがSEO関連の拡張機能です。
メタ情報の設定の確認をするとき、コードを見るのは手間なので拡張機能を使うのですが、このSEO META 1 COPYが色々使ってきた中で一番網羅的にいろんな情報を見ることができるので重宝しています。
特に、見出しタグの使用状況や構造化マークアップの情報も見ることができるので、SEOまわりをしっかり構築したい時のベース確認には一番使い勝手がいいかな？と思ってます。
ウェブストアURL：https://chromewebstore.google.com/detail/seo-meta-1-copy/eblbmdomppeajmpblgeppodbkfnonppc
HTMLエラーチェッカー
一通り終わってから使うのがHTMLエラーチェッカー。
細かいタグは別のチェッカーツールを使うのですが、開始 / 閉じタグなどの確認をパッとできるので、一旦このチェッカーでタグミスを確認してからちゃんとしたチェッカーツールで細部の確認をするようにしています。
正直、チェッカーツールを最初から使えばいいといえばいいのですが…それが手間で💦
ワンクリックで確認ができるという面でよく使用しています。
Lighthouse
こちらはWEBサイトのパフォーマンス状況を確認できる拡張機能です。
PageSpeed Insightsを使えれば良いのですが、公開前のサイトはBasic認証をかけていることが多く、使うことができないです。
Lighthouseであれば検証機能と同じ感覚で使うことができるので、オープンにできないサイトにも使用できます！
それなので、公開前はLighthouseでベースの数値に行くまで調整し、公開後にPageSpeed Insightsで最終調整を行うこともあります。
（サーバー状況などを加味して、公開前後で確認するようにしてます）
ウェブストアURL：https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja
Charset
こちらはWEBサイトのエンコーディングを変更できる拡張機能です。
使用頻度が高いかと言われるとそうでもないところはあるのですが…工数見積もりをするときにサイトのソースコードが上手く見られない時とかにしょっちゅうお世話になっています。
ウェブストアURL：https://chromewebstore.google.com/detail/charset/oenllhgkiiljibhfagbfogdbchhdchml?hl=ja
Wappalyzer
こちらも実務というより調査や素敵なサイトを見たときに使う拡張機能なのですが、使うとWEBサイトをどうやって作っているかを見ることができます。
フレームワークやライブラリ、どのCMSを使っているかの情報を見ることができるので、参考になります！
まとめ
chromeの拡張機能が便利すぎてブラウザはchrome一択の状況ですし、今回ご紹介した拡張機能の一つでも欠けてしまうと仕事のパフォーマンスがガクッと落ちる自信があります…笑
まだまだ知らないだけで業務に便利な拡張機能があると思うので、他のも色々使ってみたいところです！
