こんにちは、今日はWeb開発を行う際に役に立つおすすめのChrome拡張機能をご紹介しようと思います。個人的にSIer業務や開発業務を行っていてよく利用する拡張機能を中心にご紹介いたします。
もちろん、従事されている業務内容によってもよく利用する拡張機能って変わってくると思いますので、参考程度に見てもらえると幸いです。
また、もし皆さんがオススメしたい便利な拡張機能なんかもありましたら逆に教えていただけると嬉しいです。
拡張機能とは？
拡張機能が何なのかわからないと言う方は、本記事をそもそも読まないと思いますが、簡単に説明させてください。
ブラウザであるGoogle Chrome の機能を増強することができる専用のプログラムのことです。
自由に好きな拡張機能をインストールし、機能をカスタマイズすることができます。
インストール方法はとても簡単です。
Chromeを起動し、Chromeウェブストアにアクセスします。
インストールした拡張機能を検索し、「Chromeに追加」ボタンを押下します。
これでインストールは完了です。簡単ですね。
またインストールした拡張機能はChromeの設定画面から管理することが可能です。
アドレスバーに「chrome://extensions/」と入力することでも拡張機能の管理画面にアクセス可能です。
おすすめ拡張機能 6選
ウェブページ全体をスクリーンショット – FireShot
スクリーンショットを簡単に取ることができる拡張機能です。
表示している範囲はもちろん、縦長のページ全体や特定の範囲のスクリーンショットを取ることができます。
個人的なテスト時確認したエラーの状態を開発者に伝える際にとても重宝しています。
テキストエンコーディング
ブラウザのテキストエンコーディングを自由に変更することができる拡張機能です。
基本的にはUTF-8で作成されているサイトが多いので、表示しているWebサイトが文字化けしているなどは少ないかと思いますが、中には歴史あるサイトで、Shift-jisやEUCなどでエンコードしないと文字化けするものもあるかと思います。
そんな場合にとても重宝しますのでおすすめです。
The QR Code Extension
現在表示しているWEBサイトのURLをQRコードとして表示してくれる拡張機能です。
モバイル版のページなどをさっと確認したい場合にとても重宝しています。
また、QRコードとして表示するURLは手動で編集することもできるので、スマホアプリのテストの際にも活用することがあるかもしれません。
ColorPick Eyedropper
いわゆるスポイト機能を提供してくれる拡張機能です。
WEBページをコーディングする際に、利用したい色をさっと確認することができます。
コーダー・デザイナーの方であれば、不要なのかもですがエンジニアの自分としては、自社のメインカラーのカラーコードさえわかっていないレベルなのでいつもお世話になっている拡張機能の1つです。
CSSViewer
こちらもコーディング関係の拡張機能でして、表示しているWEBページの各要素に適用されているCSSをマウスオーバーすると確認することができるものです。
これは私が能力がないだけなんですが、なんかCSSって覚えられないんですよね。。。
モックなどを作成する際に利用させてもらってます。
Google Analytics Debugger
こちらはGoogle Analyticsに関する拡張機能です。
こちらをインストール・有効化するとGAが埋め込まれている場合に、Debugmodeを有効化することができます。
GA4になって「DebugView」というとても便利な機能が追加されたのですが、大本のタグでDebugmodeを有効化してしまうと、アクセスしているユーザー全員が表示されてしまうため、開発時はこちらの拡張機能を利用してデバッグを行ってます。
GA4については以下のような記事もあるので興味ある方はぜひ御覧くださいー
まとめ
以上、個人的に業務で頻繁に利用しているChromeの拡張機能をご紹介しました。
人気のある拡張機能は、ブラウザ自体の機能として実装されることもありますが、ブラウザのバージョンを会社が管理していて好きにバージョンアップすることができない、なんて場面もあるかと思います。
そんなときに今回ご紹介した拡張機能を利用していただくとよいかもしれません。
如何だったでしょうか、少しでも読んでいただいた皆様の役に立てば幸いです。
ではでは～～
コメント