Chromeのおすすめの拡張機能があれば教えて下さい〜！
Web制作を行うにあたって拡張機能を使うことは大きな便宜となります。
今回はWebデザイナー、Webコーダーにとって
オススメな便利ツールをご紹介しますのでご欄ください！
拡張機能
What Font
サイトで使われている、フォントを調べることができます。
またフォントのstyle、Weight、Size，カラー等も調べることが可能。
アイコンをクリックして、そのフォントをクリックすると表示されます。
GoFullPage - Full Page Screen Capture
Webページの全体を一枚のスクショで取得します。
サイトを模写するときにも便利です。
アイコンをクリックするとスクショがスタートします。
GoFullPage - Full Page Screen Capture
Image Downloader
サイト内の、画像を一括でダウンロードします。
また画像の横幅や高さで条件を指定することもできます。
Eagle for Chrome
こちらは有料となりますが、ドラッグ&ドロップで個別に画像をダウンロードできるツールです。
Eagleのアプリとダウンロードすることで、
面倒くさいダウンロードの手続きや時間を大幅に短縮できます。
※1ヶ月間は無料で使用可能
UI Build Assistant
サイト内の、要素の領域幅を一目で把握できるツールです。
検証ツールでひとつずつ要素の領域を確認するのは面倒ですよね。
こちらはyoutubeなどで活躍されている、しまぶーさんが開発された拡張機能です。
設定や使用方法は以下でご確認下さい。
Perfect Pixel
模写サイトと実際のデザインをピクセル単位で比べることができます。
Webページを模写するなら必須ツール。
アイコンをクリックして、画像をドラッグすると実際のカンプと比較できます
HTMLエラーチェッカー
HTMLの開始・終了タグをチェックするツールです。
自動的にチェックが入るため、うっかりした記述ミスの防止に繋がります。
ColorZilla
気になるサイトのカラーを調べることができます。
アイコンをクリックしてカーソルを当てると詳細を表示します。
Lighthouse
Webサイトの「パフォーマンス」「品質」「SEO」「PWA」などをチェックできます。
検証ツールの「Lighthouse」から「レポートを作成」で解析。
Googleの公式ツールで、改善点をレポートしてくれるツールです。
CSS Peeper
Webページ内の要素の、CSSを調べることができます。
アイコンをクリックして気になる部分をクリックするとプロパティや値を確認できます。
WhatRuns
そのサイトで使用している
ツール、プラグイン、フレームワーク、SNSなどをチェックする事ができます。
DeepL翻訳（ベータ版）
翻訳ツールです。
わざわざ翻訳ツールを立ち上げなくても
英文の部分を選択して、ボタンをクリックするだけで翻訳されます。
Notion Web Clipper
NotionのChrome拡張機能です。
保存したいWEBページをボタンクリックでNotionに保存することができます。
Copy All Urls
現在開いているWebページのURLを、一括でコピーしてくれるツールです。
個別で保管する手間を簡略化してくれます。
copyボタンで一括コピー。
PasteボタンでコピーしたWEBページを一括表示。
まとめ
以上となります。
Chromeにはたくさんの便利な拡張機能がありますね。
自分にあったものを探して取り入れていきましょう〜♪