すべての機会のためのWeb開発のためのFirefox拡張機能

歴史的に、Firefoxは、サードパーティの開発者によって作成されたさまざまなプラグインやアドオンの接続による拡張性により、Web開発者の間で広く人気を博しています。 機能を拡張機能に分割するというアイデアにより、外部ツールに頼ることなく、ブラウザーであらゆる種類のタスクを直接解決できました。



もちろん、このリストには既におなじみの拡張機能がありますが、便利な拡張機能の巨大なレイヤーが常に傍観者のままです。 したがって、さらにいくつかの拡張機能をインストールする準備をしてください! :)



Firefoxの組み込み開発ツール



リストを始める前に、Firefoxにすでに組み込まれているツールは言うまでもありません。 ここでは、Firefox Aurora 10のまさに開発ツールと、現在の最新のブラウザーにある機能について説明しています。



これらのツールのインターフェースを開発する際、多くのアプローチとソリューションが試されました。 その結果、誰もがFirefox Auroraをインストールすることができます(うーん、もうインストールしましたか?)







さて、カットの下には拡張機能の膨大なリストがありますが、これはすべてのWeb開発者にとって間違いなく便利です。







ファイアバグ



この拡張子は、拡張子のリストでnullになります。 Firebugは 、すべてのブラウザーの開発ツールで標準設定しています。 通常、CSSとHTMLのライブ編集、JavaScriptのデバッグ、およびページの読み込みの最適化に使用されます。 以下の拡張機能の一部はFirebugに基づいているため、この拡張機能に戻ります。



念のため、Firebugはメモリをかなり必要としていることを思い出してください。したがって、作業していないサイトでは、Firebugをオフにする(またはオンにしない)ことを忘れないでください。



Web開発者向けの標準Firefox拡張機能



Firefoxを最大限に活用するために、長年にわたって多くの拡張機能が開発されてきました。 それらのいくつかは人気があり、他の人はおそらく初めて目にするでしょう。 ここに記載されていない拡張機能を使用する場合は、コメントを書いてください!



アクセシビリティ評価ツールバー

さまざまな基準に従ってWebページをテストするためのツールのセット。



すべてが1つのサイドバーに

左側のパネル。リンク、ダウンロード、拡張機能、訪問履歴などを表示できます。ブラウザバーOperaのようなもの。



キャッシュステータス

Firefoxのさまざまな場所でキャッシュをクリアおよび構成します。



Cachetoggle

ワンクリックでブラウザのキャッシュを無効化(および/またはクリア)します。



コロジラ

多機能スポイト、グラデーションジェネレーターなど。 RGB 0-255、RGB 0%-100%、HSLまたは16進数の色で動作します。



コンソール²

Console²は、組み込みのJavaScriptコンソールを次世代のコンソールに置き換えます。 何らかの理由でFirebugがあなたに合わない場合、この拡張機能は非常に便利です。



CSSリローダー

F9では、単一のキーを使用して、ページ自体を更新せずにCSSファイルをリロードできます。



Domインスペクター

DOMツリーの古典的な2パネルエディター。 XULでも動作します。



ファイヤーフォッグ

Firefoxでサイトに直接アップロードするときに、ビデオファイルとオーディオファイルをOGG形式に変換するためのAPIを提供します。



Fireftp

ブラウザで直接使用できる本格的なクロスプラットフォームFTP / SFTPクライアントは、ファンがFTPサーバーでファイルをアップロードおよび編集するのに役立ちます。



火器

JavaScriptの単体テストの拡張。 追加のコメントは必要ありません。



フォックスガイド

インターフェイス要素を相互に位置合わせするための水平および垂直フローティングルーラー。



Foxyproxy標準

FoxyProxy拡張機能は、プロキシを操作するための組み込みメカニズムを完全に置き換えます。 対応する機能よりも機能的な拡張機能:SwitchProxy、ProxyButton、QuickProxy、xyzproxy、ProxyTex、TorButtonなど



グリースモンキー

JavaScriptを使用してページをカスタマイズします。 www.userscripts.orgに巨大なスクリプトリポジトリがあります。



HTMLバリデーター

アイコン内のエラーの数を示すブラウザー内のHTML検証。



Httpfox

Firefox用のHTTPアナライザーの拡張機能。



FirefoxのiMacros

Firefoxを自動化します。 繰り返しアクションを記録してから再生できます。 Firefoxを使用して、フォームに記入したりページをクロールするために毎日の雑用を行う場合、この拡張機能はまさにあなたが夢見ていたものです!



Jenkinsビルドモニター

Jenkinsビルドの監視( http://jenkins-ci.org )およびビルドの進行状況をFirefoxのステータスバーに表示します。



JQuery拡張機能

現在、jQueryとjQuery UIはブラウザーに直接組み込まれています。



JSONovich!

ブラウザで読みやすくするための適切にフォーマットされたJSONコード。



ジョンソンビュー

JSONドキュメント用の別のブラウザ。



Jsview

外部サイトの使用済みのjs / cssファイルがあれば、それを新しいウィンドウで開きます。



リンクウィジェット

最初、最後、次、前のページにボタンを追加することにより、関連するページシーケンス(Webコミック、フォーラム、HTML 5などの技術仕様など)を簡単にナビゲートできるようにします。



ライブHTTPヘッダー

ページの読み込み時にHTTPページヘッダーを表示します。



LiveReload

LiveReload拡張機能は、ハードドライブ上のファイルが変更されると自動的にページを更新します。



MeasureIt

ページ上のピクセル単位で距離を測定するためのツール。



ヘッダーを変更する

送信時にHTTP要求のヘッダー内の文字列を追加、変更、およびフィルターします。 特に、モバイルデバイス向けの開発、HTTPのテスト、およびセキュリティのチェックに使用されます。



NoScript

ブラウザに最適な保護ツール! どこでもJavaScriptを無効にしない場合でも、この拡張機能により、ほとんどのタイプのXSSおよびクリックジャッキングから保護されます。



PageSpeed

ウェブサイトのパフォーマンスを改善するための推奨事項を提供するGoogleのプロジェクト。



PixelZoomer

PixelZoomerは、後続の人口分析のためにページのスクリーンショットを撮ります。 3200%まで増加したり、距離を測定したり、ピペットで色の値を取得したりできます。



Pixlrグラバー

オンライン画像エディターpixlr.com/editorの拡張機能。 完成した画像を撮るか、ページのスクリーンショットを撮ってから変更する(個人データを消去する、キャプションを追加するなど)必要がある場合に便利です。



ポスター

HTTPリクエストを作成し、その結果を表示するためのツール。 Webサービスとの相互作用をテストするのに便利です。



Quickjava

ステータスバーやトップバーからJava、Javascript、Flash、Silverlight、画像、CSS、およびプロキシをすばやく有効または無効にします。



正規表現テスター

ハイライトマッチングを使用した正規表現のテストツール。



サイトのCookieを削除

サイトからCookieをクリアするための非常にシンプルな拡張機能。 マウスの右ボタンでメニューを非表示にします。



SQLite Manager

SQLiteデータベースを管理するためのGUI。



Selenium IDEボタン

Selenium IDEを開くためのボタン。 当然、作業のためにSelenium IDE自体をインストールする必要があります: http : //seleniumhq.org/projects/ide/



SeoQuake SEO

Seoquake拡張機能は、検索エンジンやソーシャルネットワーク向けにサイトを最適化するのに役立ちます。



Showip

ステータスバーに現在のページのIPアドレスを表示します。 また、右クリックすると、ホスト名、hois、netcraftなどからの情報が表示されます。そこでIPアドレスをコピーできます。



スタイリッシュ

サイトのスタイルシートを変更します。 GreaseMonkeyのようなStylishには、Google、YouTube、Tumblrなどのサイト用テーマの大きなリポジトリがあります。



改ざんデータ

HTTP / HTTPSヘッダーとPOSTパラメーターを表示および変更するための拡張機能。



トータルバリデーター

複数のバリデーターによる同時ページ検証。 これは、外部サイトと内部サイトだけでなく、ローカルページでも機能します。



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

ユーザーエージェントスイッチ。 数回クリックするだけで、サイトはモバイルデバイスまたは検索エンジンとみなします。



ウェブ開発者

Web開発用のパネル。 Firebugと重複しない豊富な機能が含まれています。



Firebug拡張機能

開発途中のFirebugは、あらゆる機会に拡張機能を取得することも決定しました。 以下がその結果です。



エースバグ

Aceエディターを使用してFirebugエディターに入力する際の構文の強調表示と自動補完。



Firebug 0.1のコードカバレッジv2

FirebugウィンドウにJavascriptコードカバレッジを表示します。



CSSの使用

どのCSSルールが実際に使用されているかを示す拡張子。



ファイヤークッキー

Firecookie拡張機能は、FirebugにCookiesタブを追加します。



ファイヤーファインダー

CSSセレクターまたはXPath式に一致するHTML要素を検索します。



Firephp

PHPの特別なメソッドにアクセスするだけで、PHPからFirebugパネルにログインします。



Firequery

jQuery開発用のFirebugプラグイン。



インラインコードファインダー

Inline Code Finder拡張機能は、組み込みのスクリプト、スタイル、および「javascript:...」などのリンクを含むHTMLコード内のセクションを検索します。



火の弓

Javascriptの構文強調表示。



Netexport

NetExport拡張機能を使用すると、収集されたすべての情報をNetパネルからJSONベースのHTTPアーカイブ(HAR)形式にエクスポートできます。



完璧なピクセル

Pixel Perfect拡張機能を使用すると、開発中のページに既製のレイアウトを課すことができます。



イスロー

YSlowはページを分析し、Yahooのルールに従って速度を最適化するためのヒントを提供します。



Firebugの拡張機能は、 Firebugの拡張機能ページでさらに入手できます。



また、開発中に他にどの拡張機能を使用しますか?



All Articles