コーディング効率UP【Google Chromeの拡張機能6選】

コーディングをしていて「もっと効率化できないかな？」「便利な機能を使って楽にコーディングしたい！」なんて思ったことありませんか？

そのような悩みを解決してくれるGoogle Chromeの便利な拡張機能をご紹介します。参考にしてください！

※実際にコーダーとして仕事をしている僕も使っている拡張機能です。

PerfectPixel

・デザインデータとコーディング結果にずれがないかの確認に利用します。

PerfectPixelはコーダーにとって必須の拡張機能ですね！

デザインデータを画像で書き出して、ブラウザ上で重ね合わせて確認ができるのでおすすめ。

鍵のようなマークをクッリクすることで、画像を固定しブラウザの検証でプレビューも可能です。

・画像に設定された Alt または Title を一覧表示させることができます。

コーディングをしていると、意外と忘れがちなaltの設定。

SEO対策にも alt の設定は重要なのでこの拡張機能で一気に確認できます！

・HTMLの開始・終了タグの過不足などを検出する拡張機能です。

コーディングをしていると、いつの間にか表示が崩れたりすることがありますが、複雑になったHTMLソースでもエラーの場所がわかるので、確認時間の短縮ができます。

・ページ上には表示されない、Webページ内にあるメタデータを調べるのことができます。

「ユーザーの目には見えないし、メタデータなんてよくわからないから...」となりがちかもしれないですが、こちらもSEOではとても重要です。

メタデータを正しく設定することで、上位表示される可能性が上がり、クリック率のUPも狙えます！

・どのフォントが使用されているかを知ることができます。

フォントの中にはパッと見て同じようなフォントがたくさんあります。フォントの指定が正しく設定されているかを簡単に確認できるのがWhat Font - find fontの魅力です。

いちいち検証からfont-familyを調べるという手間からも解放されます！

・調べたい箇所にカーソルを持っていくと、色がわかります。

僕は、ColorPick Eyedropperを使う前は画像をPhotoshopで開いてスポイトツールで確認するという、今思えばとても面倒な作業をしていました...

調べた色はカラーコードで表示されてコピペもできるのでとても便利です！

いかがでしたか？

Google Chromeの拡張機能を使えばコーディングの効率化を図ることが可能です。

今回紹介した、便利な拡張機能をどんどん活用してコーディングのスピードを早くしていきましょう！