15開発者向けの最高のブラウザ拡張機能(2020)

2018年の最大の変更は、FireFoxの大幅な見直しであり、これにより、そのブラウザーでのアドオンの動作方法が変わりました。 その結果、人気のあるアドオンの多くはメンテナンスされなくなったか、利用できなくなりました。

Firefoxのほとんどのアドオンは、Google Chromeの拡張機能としても利用できます。 この記事では、クロスブラウザのアドオン/拡張機能を優先します。これは、このコンテキスト内で、Firefox、Chrome、Chromiumで動作することを意味します。 また、お客様の情報を第三者に渡すことが知られておらず、広告収入によってサポートされていない無料の拡張機能を優先します。 特定の開発テクノロジに限定されない拡張機能に重点を置きます。

Microsoft Edgeを開発ブラウザーとして使用することにメリットがあると考える開発者はほとんどいませんが、開発後のテストには問題ありません。 より多くのユーザーがInternet Explorerを放棄するようになると、その数はわずかに増えると予想されますが、4のサイト訪問者ごとにわずか100を超えると予想されます。

Firefoxユーザーよりはるかに多くのChromeユーザーがいますが、IT群衆はFirefoxを好む傾向があるため、Firefoxの開発者向けの拡張機能がますます多くなっています。

それでは、開発者にとって最高のブラウザー拡張機能と、それらをブラウザーに追加する理由を見てみましょう。

1.で構築

本当によくできたサイトを見つけ、それがどのようにして作られたのかを知りたい場合、この拡張機能を使用すると、ソースコードを掘り下げる時間と労力を大幅に節約できます。 リンクをダウンロード: クロム/クロム, Firefoxの

2.斧

これはアクセシビリティ監査ツールです。 ページをできるだけアクセス可能にすることは常に最善の方法です。axは、ユーザーのセグメントをサイトから誤って除外しないようにするのに役立ちます。 リンクをダウンロード: クロム/クロム, Firefoxの

3 ColorZilla

古いものですが、この拡張機能を使用すると、ページから直接色をサンプリングしたり、カラーコードを取得したり、グラデーションを生成したりできます。 リンクをダウンロード: クロム/クロム, Firefoxの

4. WebDeveloper

CSS、フォーム、画像、情報を制御するための便利な機能をブラウザに追加します。 これまでに作成された最も人気のある拡張機能のXNUMXつ。 リンクをダウンロード: クロム/クロム, Firefoxの

5.ウーランク

SEOデータのWebページを分析します。 全体的なSEOスコア、改善提案、キーワードクラウドなど、すべてのSEOの内部を示す強力なレポートを提供します。 リンクをダウンロード: クロム/クロム, Firefoxの

6. Tab2QR

表示しているページのQRコードを生成すると、QRコードをスキャンするだけで携帯電話でページにアクセスできます。 レスポンシブサイトを作成していない場合でも、テストに適しています。 リンクをダウンロード: クロム/クロム, Firefoxの

7. HTTPリクエストメーカー

これは、実際にフォームを送信したくない(テストする必要のない追加の処理をトリガーする可能性がある)PHPフォーム応答をテストするのに非常に役立ちます。 このツールを使用すると、HTTPリクエストを簡単に偽造できます。 ChromeとFirefoxの拡張機能は同じ名前で同じことを行いますが、それらは異なる開発者によって作成されたものであり、完全に同じではないことに注意してください。 リンクをダウンロード: クロム/クロム, Firefoxの

8.ページのパフォーマンステスト

ブラウザに到達するさまざまな段階でのページのパフォーマンスに関するレポートをすばやく取得します。 これは、tracertのより高度なバージョンのようなものです。 これは今のところFirefoxでのみ利用可能です。 ChromeとChromiumにも同様の拡張機能がありますが、これほど機能は豊富ではありません。 リンクをダウンロード: Firefoxの

9.単語カウントツール

これは、選択したテキストブロック(またはページ全体)内にある文字数と文数もわかるので、名前が意味する以上のことを実際に行うことができます。 リンクをダウンロード: クロム/クロム, Firefoxの

10. Web開発者チェックリスト

このツールを使用して、Web開発のベストプラクティスガイドラインに従っていることを確認してください。このガイドラインは、標準がずれている可能性がある場所を示します。 リンクをダウンロード: クロム/クロム, Firefoxの

11.イメージマップエディター

ドイツの開発者Heinz-JürgenBomsによる優れた拡張機能のトリオのXNUMXつであり、この名前はまさにその名前のとおりです。 マップするイメージの領域をトレースするだけで、ブラウザで直接イメージマップを生成できます。 リンクをダウンロード: Firefoxの

12.高度なフレームエディター

Heinz-JürgenBomsのもうXNUMXつの拡張機能です。これは実際には、CSSスタイルツールであり、属性を指定することにより、ブラウザーで直接フレームを構築できます。 それをチェックする価値があります ドキュメント 使い始める前に。 リンクをダウンロード: Firefoxの

13.ブートストラップレスポンシブヘルパー

これは非常にシンプルな小さな拡張機能で、ブレークポイントが正しく機能しているかどうか、および現在のモードがどのブートストラップレベルかをすばやく確認するのに役立ちます。 もちろん、実際にBootstrapで作業する場合にのみ、この拡張機能が必要になります。 ChromeバージョンはJonathan Defraiteurによって開発され、FirefoxバージョンはKevin Bonによって開発されました。 リンクをダウンロード: クロム/クロム, Firefoxの

14.自分で試すHTML5エディター

物事をシンプルに保ち、すべての作業をXNUMXか所で行う場合は、この拡張機能が適しています。 機能が豊富なこのコンテキスト対応エディターは、ブラウザーで直接動作し、HTML、CSS、およびJavaScriptをサポートします。 それは完璧とはほど遠いですが、別のアプリケーションを開く手間をかけずにすばやく簡単に編集するには、仕事が完了します。 リンクをダウンロード: Firefoxの

15. X線ゴーグル

技術的にはこれは拡張機能ではなく、実際にはブックマークレットです。 しかし、それは非常にうまく機能し、リストから除外することはできませんでした。 Mozillaで作成されていますが、どちらのブラウザも完全に標準に準拠しているため、Chromeでも同様に機能します。 これを使用するには、ブックマークバーを表示する必要があります。 次に、以下のリンクからアクセスできるダウンロードページにアクセスし、X-Rayゴーグルボタンをブックマークバーにドラッグします。 次に、任意のサイトにアクセスし、X-Rayゴーグルブックマークを起動し、ページ上の要素を選択すると、そのコードを編集できます。 リンクをダウンロード: クロム/クロム, Firefoxの

ヘッダー画像提供

ボグダン・ランセア

ボグダンはインスパイアードマグの創設メンバーであり、この期間でほぼ6年の経験を積んでいます。 余暇には、クラシック音楽を学び、視覚芸術を探索するのが好きです。 彼はフィクシーにもかなり夢中です。 彼はすでに5を所有しています。