効率よく働くためのChrome拡張機能10選
こんにちは。ナディアのエンジニアのささきです。
みなさんはChromeブラウザの拡張機能を使用していますか？
現在、Chromeウェブストアには数多くの拡張機能が公開されています。
特にフロントエンド開発で役立つ拡張機能は数多くあり、私自身もいくつか導入して業務効率を向上させています。
そこで今回は、実際に役立った拡張機能をご紹介したいと思います。
おすすめChrome拡張機能
1. Volume Master - ボリュームコントローラー
サイトの音声を100%以上にブーストできる拡張機能ですが、私は逆に音量を下げる用途で使用しています。
私は作業に集中するためにBGMを流していますが、作業の中で参考サイトの動画や音楽が大音量で再生されることを防げます。
2. QR Code Generator
現在表示しているページのQRコードを簡単に生成できる拡張機能です。
スマホで表示確認をする際、URLを手入力したりチャットで送信する手間が省けます。
ベーシック認証は手打ちでの入力が必要ですが、確認作業が非常にスムーズになります。
3. Alt & Meta viewer
画像のalt属性やページのmeta情報を確認できる拡張機能です。
吹き出し形式で画像ごとにaltや表示サイズが表示されるので、大量の画像を確認する際に便利です。
ただし、画像が密集していると見づらい場合があるので注意が必要です。
4. Fonts Ninja
サイトで使用されているフォントを確認できる拡張機能です。
ホバーするだけで適用されているフォントを確認でき、font-familyのCSS設定ではなく、実際に適用されているフォントが分かります。
5. META SEO inspector
サイトのHTML構造やmeta情報、タイトル構造を確認できる拡張機能です。
コードを直接確認しなくても、タイトル構造がツリー状に表示されるため、非常に見やすいです。
6. Pic info
画像の詳細情報（URL、オリジナルサイズ、表示サイズ、alt、容量）を確認できる拡張機能です。
画像をホバーするだけで情報を確認でき、フォルダを開く手間が省けます。
7. Toggl Track: Productivity & Time Tracker
時間管理ツール「Toggl Track」の公式拡張機能です。
複数の案件を同時に進める場合に「どの案件に何時間使ったか」を簡単に記録できます。
登録が必要ですが、プロジェクト管理が効率的になります。
8. EditThisCookie
Cookie情報を管理・編集できる拡張機能です。
開発者ツールを開かなくても、直接Cookieを調整できるため、手間が省けます。
9. Accessibility Visualizer
ページのアクセシビリティ情報を確認できる拡張機能です。
アクセシビリティ対応を行う際、コードを確認せずに問題点を把握できます。
10. WAVE Evaluation Tool
アクセシビリティ評価を行える拡張機能です。
読み上げ時の要素順序や内容を視覚的に確認できるため、最終チェック前の確認に役立ちます。
最後に
紹介した拡張機能の中には、すでにご存知のものもあったかと思います。
エンジニアだけでなく、他の職種の方にも役立つものばかりですので、ぜひ活用してみてください。
これらの拡張機能が、みなさんの作業効率向上に少しでも貢献できれば嬉しいです！