PLUS DESIGN COMPANY

入れていて損はない!フロントエンドエンジニア目線でのおすすめChrome拡張機能

こんちは!SUGIYAMAです。

職業柄様々なブラウザを触ることがありますが、普段使用するのはchorme一択になってきました。
そのままでも十分快適に使えますが、拡張機能(アドオン)を利用すれば様々な作業を効率化してより快適に使う事ができるようになります。
今回は個人的に使用していて、オススメする拡張機能をご紹介します。

どうやって追加するの?

https://chrome.google.com/webstore/category/extensions?hl=ja&_feature=google
Chromeウェブストアから検索して追加することが可能です。
それ以外にも、検索窓で「〇〇 chrome拡張」などで探すことができます。

オススメウェブストア7選

1.Awesome Screenshot

Awesome Screenshot

開いているウェブサイトのページのスクリーンショットや、録画もしてくれるChrome拡張機能です。
スクリーンショットは、表示部分、ページ全体、選択範囲と色々選ぶことができ、保存後に加工までできちゃいます。
また、録画機能は操作方法など録画したりする時に重宝しています。

ダウンロード:Awesome Screenshot


2.The QR Code Extension

unnamed (2).jpg

PC上で開いているページのURLをQRコードにしてくれる拡張機能です。
コーディング中にスマホ端末の検証を行う際に、QRコードを読み込むことでいちいちURLを打ち込んだりする必要もないので、とても助かります。

ダウンロード:The QR Code Extension


3.ColorPick Eyedropper

unnamed (1).jpg

画面上の色を取得し、RGBや16進数カラーコードを表示してくれるChrome拡張機能です。
ウェブサイトで使用しているカラーだけでなく、YouTubeなどの動画からでも色をスポイトできます。

ダウンロード:ColorPick Eyedropper


4.JSONVue

unnamed (3).jpg

JSONのレスポンスを見やすく表示してくれる拡張機能です。
デザインなどでは特に縁のない拡張機能ですが、コーディングする際にJSONファイルを使用する場合は入れておいて損はありません。
ブラウザで開くと、とても見やすく、エラーが発生している場合もどの行でエラーが発生しているかも教えてくれます。

ダウンロード:JSONVue


5.Alt & Meta viewer

unnamed (4).jpg

画像に設定された Alt または Title 属性をツールチップで表示することができる拡張機能です。
いちいちソースで確認せずに確認できるので便利です。

ダウンロード:Alt & Meta viewer


6.Lighthouse

unnamed (5).jpg

Googleが無料で提供しているWebサイトを分析・診断するための拡張機能です。
Webサイトの「パフォーマンス」「アクセシビリティ」「ベストプラクティス」「SEO」「プログレッシブウェブアプリケーション」の5つの項目ごとに、Google独自の基準でチェックできます。
アイコンをクリックし、表示された「Generate report」のボタンをクリックすると、分析が始まります。約1分程度で評価結果レポートが表示されます。
ただ、2021年12月時点で英語表示のみで、日本語には対応していません。

ダウンロード:Lighthouse


7.Web Vitals

unnamed (6).jpg

今開いているページの Core Web Vitals を測定する拡張機能です。
先ほど紹介した「Lighthouse」でも様々な分析が可能ですが、「Web Vitals」ではバックグラウンドで自動計測してくれます。
拡張を有効にすると Chrome のウィンドウの右上に四角のアイコンが追加されます。
指標に達していない場合、アイコンの色がかわるので、一目でなにかが達していないことが分かり、アイコンをクリックすると数値を確認することができます。
こちらも日本語には対応していません。

Core Web Vitalsとは?
Core Web Vitals とはGoogleがWebサイトの健全性を示す指標として重視する指標です。 2021年5月時点では、Largest Contentful Paint(LCP)とFirst Input Delay(FID)、Cumulative Layout Shift(CLS)の3つが含まれます。

引用元:https://digiful.irep.co.jp/blog/48237963801

ダウンロード:Web Vitals

おわりに

今回紹介したもの以外にも豊富に揃っているChromeの拡張機能ですが、マルウェアやウイルスが仕込まれているものも存在しています。
Googleが推奨するものや大手のデベロッパーが開発しているツールは可能性が低いかもしれませんが、
まずは事前にレビューや紹介サイトなど調べてみることが良いでしょう。
また、追加する際に確認されるアクセス権限も要チェックです。「パソコンと閲覧したウェブサイト上のすべてのデータ」や「閲覧したすべてのウェブサイト上のユーザーデータ」など、ユーザーデータにまでアクセス権限をリクエストしているツールは特に注意しましょう。

  • このエントリーをはてなブックマークに追加
この記事は SUGIYAMA が書きました。

プラカンが目指す3つの顧客満足

  1. ホームページのできあがりに
    満足していただく

  2. 仕事の進め方に
    満足していただく

  3. サポート・フォーローに
    満足していただく

詳しくはホームページ企画・設計をご覧ください

ホームページ企画・設計

ホームページに関するご要望がございましたら、お気軽にご相談ください。

全国各地のホームページ制作に対応

プラカンは大阪本社、東京事務所を拠点に首都圏、関西圏はもちろん、全国のお客様のホームページ作りのお手伝いをさせていただきたいと考えております。オンラインでの無料相談にも対応しております。ぜひ一度ご相談ください。

お問い合わせ

お電話でのお問い合わせ

PLUS DESIGN COMPANY

メニューを閉じる