プログラマーと開発者のための 15 の最高の Chrome 拡張機能

Chrome を使用しないプログラマーは少数派です。プログラミング目的でこのブラウザーを好む理由はたくさんあります。たとえば、Web の方向性に対する Google の多大な影響、開発のストレスを軽減する組み込み機能、利用可能な拡張機能の膨大な数などです。

最後のポイントは非常に重要です。これを書いている時点で、Chrome はデスクトップで 60% を超える市場シェアを保持しています。ほとんどの拡張機能作成者が最初に Chrome に力を注いでいるのも不思議ではありません。とはいえ、ここでは、あらゆる種類の開発者、特に Web 開発者が使用すべき最高の Chrome 拡張機能を紹介します。

一般的な開発拡張機能

1. セッションバディ

Chrome にはカスタム ユーザー プロファイルと呼ばれる素晴らしい機能があり、ブックマーク、設定、タブ、履歴などの個別のセットを作成できます。まだプログラミング用に設定していない場合は、必ず設定する必要があります。

しかし、Session Buddy はそれをさらに一歩進めて、特定の「タブ セッション」を保存し、それらを自由に切り替えることができるようにします。これは、複数のプロジェクトに取り組んでいるときに便利です。

ダウンロード: セッションバディ

2.Chrome用iMacros

iMacros は、反復的なタスクを自動化できる拡張機能です。特定のアクション (マウスのクリックやキーの押下など) を「記録」し、それらをマクロとして保存して、いつでもクリックするだけで実行できます。フォームへの入力、変更のテストなどの時間を大幅に節約できます。Chrome 以外のマクロについては、AutoHotkey スクリプトをお勧めします。

ダウンロード: Chrome 用 iMacros

3.ウェブタイマー

Web タイマーは、さまざまな Web サイトで費やした (または浪費した) 時間を追跡し、先延ばしの傾向を抑えるのに役立ちます。Chrome がフォーカスされている場合にのみ追跡し、アイドル状態になると追跡を停止するほどスマートです。あまり詳しく説明せずに、全体的なオンライン アクティビティの時間を測定したい場合は、これらの無料のオンライン タイマーのいずれかを試してください。

ダウンロード： ウェブタイマー

4.素晴らしいスクリーンショット

Awesome Screenshot は、スクリーンショットの取得、スクリーン ビデオの録画、スナップした画像への注釈付けとぼかし、ワンクリックでスクリーンショットを他のユーザーと共有するためのオールインワン拡張機能です。便利な機能の 1 つは、Web ページ全体のスクリーンショットを作成し、すべてを 1 つの巨大な画像としてつなぎ合わせる機能です。Chrome 以外でも機能するソリューションについては、スクリーンショットを作成するためのこれらの最適なツールを確認してください。

ダウンロード: すばらしいスクリーンショット

5. ユーザースナップ

Usersnap は、Chrome から直接 Web ページ、プロトタイプ、アプリをキャプチャして注釈を付けるための便利な拡張機能です。フィードバックを提供し、バグを効率的に報告するのに役立ちます。このツールは、スムーズなフィードバック ワークフローを通じて最終製品を改善する上で非常に重要です。

ダウンロード: ユーザースナップ

Web 開発拡張機能

6. ウェブ開発者

Web 開発を支援するためにインストールする拡張機能が 1 つあるとすれば、それはこれです。Web Developer には、JavaScript とプラグインのワンクリック切り替え、レスポンシブ デザインをテストするためのウィンドウのサイズ変更、画像のテストとデバッグなど、いくつかの便利な機能が満載です。

ダウンロード: ウェブ開発者

7. ユーザーエージェントスイッチャー

Chrome Web ストアにある多くの「ユーザー エージェント スイッチャー」拡張機能の中で、これは最高の 1 つです。定期的に更新され、リンクをハイジャックしません。さらに、多数のデフォルトのユーザー エージェント文字列が付属していますが、カスタム ユーザー エージェント文字列を作成することもできます。つまり、確実に機能する拡張機能です。

ダウンロード: ユーザーエージェントスイッチャー

8.ワッパライザー

特定のサイトを動かしている Web テクノロジーの種類を知りたい場合は、ワンクリックで Wappalyzer が教えてくれます。CMS (WordPress など)、Web フレームワーク (React など)、ツールとユーティリティ (Google Analytics など)、e コマース プラットフォーム (Shopify など) などを検出できるほどスマートです。

ダウンロード： ワッパライザー

9.IEタブ

Microsoft は Internet Explorer を廃止しました。ただし、何らかの理由でプロジェクトが Internet Explorer で Web サイトをテストする必要がある場合は、新しいタブで IE をエミュレートし、さまざまなバージョンで Web サイトをテストできるようにする IE Tab と、ActiveX コントロールが必要になります。Web サイトが古いものに関係なく、すべてのブラウザーと互換性がある必要がある場合に非常に便利です。

ダウンロード: IE タブ

10.クリック＆クリーン

Web サイトを開発するとき、最新の変更を確実にロードするために閲覧データを常に消去するよりも面倒なことがいくつかあります。Click&Clean は処理を高速化するだけでなく、クリーニングできるものをより細かく制御できます (たとえば、データベースやプラグイン データを削除したり、特定のサイトの Cookie を保持したりするなど)。

ダウンロード： クリック＆クリーン

11.フォントファインダー

Font Finder は、Web 上のフォントを識別するための最も簡単で効果的な方法の 1 つです。要素を右クリックして [Inspect Element] を選択し、スタイルシートを調べてそれが何であるかを確認するだけです。

Font Finder を使用すると、右クリックして Font Finder を選択するだけです。そこから、Web ページで使用されているすべてのフォントのリスト、または特定のフレームで使用されているフォントのみのリストを取得できます。拡張機能をクリックすると、任意の Web ページでインタラクティブ バージョンの Font Finder を開くこともできます。

ダウンロード: フォント ファインダー

12. カラーピック スポイト

ColorPick Eyedropper は、ズームインして、任意の Web ページ上の任意のピクセルの正確なカラー コードを取得できるツールです。カラー コードは、16 進数、RGB、および HSL で使用できます。スタイルシートでどの色が使用されているかを要素を調べたり、画像をダウンロードして画像エディターで色を選択したりするよりも、非常に便利ではるかに高速です。

ダウンロード: ColorPick スポイト

13. ローレム・イプサム・ジェネレーター

Web サイトを開発するとき、最終的にはダミー テキストが必要になります。Lorem ipsum ジェネレーターは Web 上にたくさんありますが、Lorem Ipsum ジェネレーターは現在のタブ内でいつでもすぐに利用できます。高速で、必要な段落数と段落ごとの文数をカスタマイズできます。

ダウンロード: Lorem Ipsum ジェネレーター

14.マイリンクを確認する

Web 開発プロジェクトの最後に、すべてのコア ページで最終パスを実行して、すべてのリンクが機能していることを確認します。Check My Links は、そのプロセスをできるだけ簡単にします。ボタンをクリックするだけで、現在のページのすべてのリンクがスキャンされ、壊れているか機能しているかに応じて各リンクが強調表示されます。

ダウンロード: マイリンクを確認

15. 寸法

ディメンションは、Web 開発というよりも Web デザインのためのツールですが、この 2 つが重複する傾向があるため、おそらくこの拡張機能を使用することをお勧めします。つまり、テキスト、画像、ビデオ、フォーム フィールドなど、任意の 2 つの Web 要素間の距離を即座に測定します。また、マウス カーソルからサポートされている Web 要素までの距離を測定することもできます。

ダウンロード: 寸法

これらの拡張機能でプログラミング ワークフローを改善する

上記以外にも、Chrome ウェブストアにはプログラミング関連の拡張機能が多数あります。

これらの拡張機能の一部について回避策を開発しているかもしれませんが、全体的な効率が向上する可能性があるため、試してみることをお勧めします。