※本記事は、Bardによる意訳+翻訳を活用し、レイアウト調整したものです。
※感想は、オリジナルです。
原文
10 Useful Chrome Extensions for Web Developers - DEV Community
意訳+要約
Web開発者が生産性を向上させるための10個のChrome拡張機能を紹介しています。これらの拡張機能は、スクリーン録画、リンク分析、コードスニペット抽出など、Web開発者の作業を効率化、改善することができます。特に重要な点は以下の通りです。
- Loom
スクリーン録画ツールで、アイデアをグラフィカルに共有したり、リアルタイムでフィードバックを提供したりすることができます。 - Window Resizer
ブラウザのウィンドウサイズをさまざまな解像度にリサイズすることができます。 - Check My Links
リンクアナライザーで、Webサイトのリンク切れをスキャンすることができます。 - Wappalyzer
Webサイトの構築に使用されているツールや技術をリストアップするテックスタックアセッサです。 - Session Buddy
ブラウザのタブとブックマークを簡単に管理できる拡張機能です。開いているタブをコレクションとして保存し、後でいつでも復元することができます。 - Lighthouse
Webアプリの品質、効率、精度を向上させるためのオープンソースの自律型ツールです。ページを監査し、一連のテストを実行して、ページのパフォーマンスをまとめたレポートを生成します。 - Requestly
Intercept & Modify HTTP Requests、Mock Server、API Client、Session Recordingを使用してWebアプリを構築、テスト、デバッグできます。Fiddler、Charles Proxyなどのツールの機能を魅力的かつモダンなUIでブラウザに持ち込みます。 - Grepper
開発者コミュニティの質問に答える拡張機能です。プロジェクトを進めるために、Web全体からコードスニペットを迅速に抽出することができます。 - BrowserStack
Webサイトをデスクトップまたはモバイルブラウザでテストできます。クロスブラウザテストを開発ワークフローに不可欠な要素にしたいWeb開発者に役立つ拡張機能です。 - Octotree
GitHubでのコードレビューと探索を支援する拡張機能です。このツールを使用して、リポジトリ、問題、プルリクエスト、ファイルをブックマークし、クイック検索を行い、プルリクエストを簡単にナビゲートできます。
これらの拡張機能は、Web開発者の生産性を向上させるための非常に役立つツールです。Web開発者の方は是非活用して、作業効率を向上させてください。
Bardへの追加質問
気になったものをいくつか追加質問。
回答は基本的にそのまま載せているが、文章として不要だったりしたものは添削している。
Lighthouse
Ｑ：Lighthouseってどういうときに使うの？
Ａ：Lighthouseは、Webサイトのパフォーマンス、アクセシビリティ、SEO、セキュリティなどのさまざまな側面を評価するためのツールです。そのため、Webサイトの品質を向上させるために、さまざまな場面で活用することができます。
具体的には、以下のような場面で活用することができます。
Webサイトのリリース前の品質チェック
Webサイトをリリースする前に、Lighthouseを使用してパフォーマンスやアクセシビリティなどの問題をチェックすることができます。これにより、リリース後のトラブルを未然に防ぐことができます。Webサイトの改善のためのフィードバック
Webサイトの改善のために、Lighthouseを使用して、ユーザーの行動やページのパフォーマンスなどのデータを分析することができます。これにより、改善の方向性を検討するための有益な情報を得ることができます。- Webサイトの競合分析
競合サイトのパフォーマンスやSEOなどの状況を、Lighthouseを使用して分析することができます。これにより、自サイトの強みや弱みを把握し、競争力を高めるための対策を検討することができます。
このように、LighthouseはWebサイトの品質を向上させるための幅広い場面で活用することができます。Web開発者やWebサイトのオーナーは、ぜひ活用してWebサイトの品質を向上させましょう。
Session Buddy
Ｑ：Session Buddyのメリットがわからないのだが、使うタイミングある？
Ａ：Session Buddyは、ブラウザのタブとブックマークを簡単に管理できる拡張機能です。以下のメリットがあります。
- タブの整理
開いているタブをコレクションとして保存して、後でまとめて開くことができます。これにより、タブが散らかりにくくなり、作業効率が向上します。 - タブの復元
閉じてしまったタブを簡単に復元することができます。これにより、作業途中でタブを閉じてしまっても、簡単に元の状態に戻すことができます。 - ブックマークの整理
ブックマークをフォルダやタグで整理して、簡単に見つけることができます。これにより、ブックマークを探す手間が省けて、作業効率が向上します。
Session Buddyを使うタイミングは、以下のとおりです。
タブやブックマークの整理に困っている場合
Session Buddyを使えば、タブやブックマークを簡単に整理することができます。これにより、作業効率が向上します。タブやブックマークを頻繁に開閉する必要がある場合
Session Buddyを使えば、閉じてしまったタブやブックマークを簡単に復元することができます。これにより、作業途中でタブやブックマークを閉じてしまっても、簡単に元の状態に戻すことができます。
具体的には、以下のような場面で活用することができます。
Web開発の作業中
Web開発の作業中は、さまざまなWebサイトや情報を参照することがあります。Session Buddyを使えば、参照したWebサイトを簡単にコレクションとして保存して、後でまとめて開くことができます。また、閉じてしまったタブを簡単に復元できるので、作業途中でタブを閉じてしまっても、簡単に元の状態に戻すことができます。研究や調査の作業中
研究や調査の作業中は、さまざまなWebサイトや情報を収集することがあります。Session Buddyを使えば、収集した情報を簡単にブックマークとして保存して、後でまとめて開くことができます。また、ブックマークをフォルダやタグで整理できるので、必要な情報を簡単に見つけることができます。
Requestly
Ｑ：RequestlyってPOSTMANと似ているけど、違いは何？
Ａ：RequestlyとPOSTMANは、どちらもHTTPリクエストを記録、編集、テストするためのツールです。しかし、両者にはいくつかの違いがあります。
Requestlyの特徴
POSTMANの特徴
- デスクトップアプリケーションとして提供されている
- 高度な機能やカスタマイズ性を提供している
- チームでのコラボレーションに適している
具体的な違いとしては、以下のようなものが挙げられます。
| 機能 | Requestly | POSTMAN |
|---|---|---|
| 提供形態 | Chrome拡張機能 | デスクトップアプリケーション |
| インターフェース | 簡易 | 高度 |
| 機能 | プロキシ、セッション録画など | 高度な機能、カスタマイズ性、チームコラボレーションなど |
Requestlyは、簡易なインターフェースで、簡単にHTTPリクエストを記録、編集、テストしたい場合に適しています。一方、POSTMANは、高度な機能やカスタマイズ性、チームコラボレーション機能を必要とする場合に適しています。
具体的には、以下の場面で活用することができます。
- Requestly
- POSTMAN
このように、RequestlyとPOSTMANは、どちらもHTTPリクエストを記録、編集、テストするための便利なツールです。それぞれの特徴を理解して、適切なツールを選びましょう。
BrowserStack
Ｑ： BrowserStackは、どのようにしてクロスブラウザテストをしているの？
BrowserStackは、クラウド上でさまざまなデバイスやブラウザを用意して、クロスブラウザテストを実現しています。具体的には、以下の手順でクロスブラウザテストを行っています。
BrowserStackのクラウド環境には、以下のデバイスやブラウザが用意されています。
これにより、WebサイトやWebアプリを、さまざまなデバイスやブラウザでテストすることができます。
また、BrowserStackでは、以下の機能を提供することで、クロスブラウザテストをより効率的に行うことができます。
- スクリーン録画機能: テストの実行状況を録画して、後から確認することができます。
- 自動化機能: テストケースを自動化することで、テストを効率的に行うことができます。
- レポート機能: テスト結果をレポートとして出力することができます。
このように、BrowserStackは、クラウド上でさまざまなデバイスやブラウザを用意することで、クロスブラウザテストを効率的に行うことができるツールです。
感想
普段利用しているブラウザは、Firefoxだが、Chromeに拡張機能を知ることで、実は存在しているやつがあるかもしれないという知見は広げられそう。
少なくとも、Wappalyzer はFirefoxにもある。
気になったのは、Octotree/Grepper/Requestly 。
Octotreeは、Githubたまにソース見たりするときがあり、ファイルの調査するのに結構戸惑った記憶があるので、入れて操作感を確かめたい。
便利なようならそのまま使おうと思った。
Grepperも、開発でいろいろ調べたりすると、いろんなサイトに飛ぶから、あると便利かもしれない。おそらく、日本サイトには対応してない気がする。。。
Qiitaとかに対応するようになっていれば、さらに便利かもな。。。
Requestlyは、録画機能があるのであれば、障害報告とかに役立ちそうな気がする。
普段使いはpostmanで十分な気がする。
ブラウザをオールインワンの開発環境とするのなら、入れる対象かも。
postmanが使いこなせている気がしないが、現状で困ることはあんまりない。
ちなみに、気になったやつがFirefoxにあるか調べた結果
- Octotree
- Octotree - GitHub code tree
- Grepper
- Grepper
- Requestly
- 見つからず
