こんにちは！
クラウドソリューション開発部の大川です。
日々ブラウザを開いて開発または調査をしていると、「あと少しだけ効率が上がれば…」と感じる瞬間が多々ありますよね。
そこで今回は、Chrome拡張機能の中から、WEBエンジニア視点で役立つものを5つご紹介します！
この記事で紹介する拡張機能
| # | 拡張機能 | ひとことで |
|---|---|---|
| 1 | JSON Viewer Pro | JSONを美しく・素早く閲覧 |
| 2 | Octotree – GitHub code tree | GitHubにサイドバーでツリービュー |
| 3 | Talend API Tester – Free Edition | APIテスト＆デバッグがブラウザで完結 |
| 4 | Wappalyzer – Technology profiler | サイトの技術スタックを一発解析 |
| 5 | FireShot – ウェブページ全体をスクリーンショット | ページ丸ごと高画質キャプチャ |
1. JSON Viewer Pro
JSONレスポンスを自動で整形・色分け表示し、オブジェクトを折りたたみ／展開できるツリービューです。
キーワード検索・キーの並べ替え・コピーもワンクリックで可能です。
こんな時に便利
- ブラウザ上でJSONを素早く階層毎に確認したいとき
-
キーワード検索・コピーをワンクリックで行いたいとき
-
JSONの全体の階層を瞬時に把握したいとき
2. Octotree – GitHub code tree
GitHubリポジトリを IDEライクなツリービュー で閲覧できる拡張機能です。
リポジトリ左側にファイルツリーが追加され、クリックで即座にファイルを切り替え可能です。
こんな時に便利
- Web上でPRレビューする際、差分の場所へジャンプしやすい
- 深い階層にあるファイルも検索窓から瞬時に開ける
3. Talend API Tester – Free Edition
Postmanの代替としてブラウザ内で『HTTP/GraphQL』リクエストの作成・送信・履歴管理が行えます。
認証ヘッダーや環境変数、スクリプトによるレスポンス検証もサポートしています。
こんな時に便利
- 外部ツールをインストールできない環境でAPIテストをしたいとき
-
プロジェクト毎にリクエスト管理したいとき
-
環境変数を埋め込みたいとき
-
チームメンバーと設定を共有したいとき
4. Wappalyzer – Technology profiler
閲覧中サイトの フロントエンド／バックエンド技術スタック を即時解析できます。
フレームワーク、CMS、JavaScriptライブラリ、分析ツール、サーバー情報などをアイコン付きで表示します。
こんな時に便利
- 競合サイトの利用技術を調査したい
- JS フレームワークやバージョンを素早く把握したいとき
- セキュリティ診断時にサーバー構成の手掛かりを得たいとき
5. FireShot – ウェブページ全体をスクリーンショット
表示領域外も含めた 縦長ページを一括でキャプチャーし、PNG/JPEG/PDFで保存します。
こんな時に便利
- UIレビューでページ全体をまとめて資料化したいとき
- 動的に伸びる管理画面のテスト証跡を残したいとき
まとめ
| 拡張機能 | 効果 |
|---|---|
| JSON Viewer Pro | APIレスポンスの可読性爆上がり |
| Octotree | GitHubブラウジングがIDE級に快適 |
| Talend API Tester | APIデバッグがブラウザ完結 |
| Wappalyzer | サイト技術調査が秒速 |
| FireShot | ページ証跡・資料化を一発仕上げ |
ブラウザ環境を少しカスタマイズするだけで、開発効率や調査スピードは大きく変わります。
今回紹介した5つはどれもインストールするだけで即効性があるので、まだ使ったことがないものがあればぜひ試してみてください！
終わりに
エコモットでは一緒にモノづくりをしていく仲間を募集中です！
弊社に少しでも興味がある方、ぜひ下記の採用ページをご覧ください！
Chromeの拡張機能を活用して、快適な開発ライフを送りましょう！
