browser - 開発に役立つブラウザアドオンツールの推奨事項

Question

誰かが開発に役立ついくつかの優れたブラウザアドオンツール/拡張機能を提案できますか？Firefoxにfirebugをインストールしました。これは、CSS、HTML、およびjavascriptの処理に最適です。他に何か提案はありますか？

Firebug

score 9 · Accepted Answer

Firefox の場合:

Firebugは、調査と開発に最適です。

Web Developer Toolbarも良いです。CSS やページレイアウトなど、さまざまな作業に役立ちます。

また、 Live HTTP Headersも使用しています(呼び出されていると思いますが、私の仕事用のマシンにあるため、現在はリンクが見つかりません)。これは、キャッシュの問題などで私たちを助けてくれました.

私は携帯電話の開発をよく行っているので、UserAgent Switcherも使用しています。別の携帯電話になりすますのに非常に役立ちます。

私は開発にのみ Firefox を使用する傾向があり、他のブラウザーでは Firefox のように開発を支援する幅広いプラグインがないため、他のブラウザーでテストするだけです。

score 5 · Accepted Answer

ファイアフォックス:

DOM Inspector を使用する場合はこれを検査します
ピクセル距離を知るためにそれを測定します（必要な場合）
他のブラウザーでのテストを容易にするためのIE ビューまたはSafari ビュー
バリデーションが気になる場合のHTML Validator
Console ²で js エラーコンソールを改善
Javascript Shellブックマークレットも便利です (他のブックマークレットも参照してください) 。

編集：これは、他の人が言及したWeb開発ツールバーに追加されています

score 2 · Accepted Answer

Operaには：

Dragonfly（ツール->高度な->開発者ツール）

デバッグメニュー

物事を傍受するためのUserJSメソッド

opera：config＃CompatMode％20Override for force quirks or standard mode

Web開発者ウィジェット

ファイルのソースを表示、編集、変更を適用し、キャッシュからリロードできます。

score 2 · Accepted Answer

2

Firefoxのもう1つの必須アイテムは、ChrisPederickのWebDeveloperToolbarです。

于 2008-08-20T08:11:36.150 に答える

score 2 · Accepted Answer

必ずSafariをインストールしてください。多くのツールが組み込まれています。いつも他のブラウザと組み合わせて使っています。

ネットワークタイムライン
エラーコンソール
Web インスペクタ
スニペットエディタ

さらに、リクエストのユーザーエージェントを設定できます。

これを考慮してください。これには、開発と呼ばれる別のトップレベルメニューがあります。

score 2 · Accepted Answer

IEの場合、次のツールが役立ちます

Microsoft Developer Toolbar - dom|styles ビューアー
Fiddler HTTP デバッガー- http モニター
インスタントソース- dom|styles ビューアー
Companion.JS - dom|styles ビューアー、拡張エラーコンソール

IE の「uber」拡張機能 - IE8 の一部として提供される「開発者ツール」

score 1 · Accepted Answer

Firefox：

DOMInspectorを使用する場合はこれを検査します

ピクセル距離を伝えるためにそれを測定します（必要な場合）

他のブラウザでのテストを容易にするためのIEビューまたはSafariビュー

検証に関心がある場合はHTMLバリデーター

jsエラーコンソールを改善するためのConsole2

Javascript Shellブックマークレットも便利です（そして他のブックマークレットも見てください）

これは、他の人が言及したWeb開発ツールバーに追加されます

Cebjyreによるこのリストはほぼ完成しています（FireBugはすでに質問で言及されているため）。Tamperdataのみを追加します。時々それは非常に便利です。

score 1 · Accepted Answer

Opera用の開発者コンソールとDOMスナップショット：

http://dev.opera.com/tools/

素晴らしいのは、これらがJSで実装されたブックマークレットであるということです。不幸は彼らがInternetzを必要とするということです。

score 1 · Accepted Answer

Firefox 3用の私の開発指向のアドオンは次のとおりです。

score 1 · Accepted Answer

YSlowは、ページの読み込み時間をトラブルシューティングするための便利な Firebug アドオンです。

score 0 · Accepted Answer

これが私が使用するものです：

ファイアフォックス:

DOM Inspector : 私はこれを何よりも Web 開発に使用しています
Launchy : 他のブラウザ/アプリでサイトを開くため
Tamper Data : GET/POST リクエストのデバッグに役立ちます
Web 開発者ツールバー: デバッグに便利な機能がたくさんあります: W3C 検証ツール、ビルトインルーラー、サイズ変更ツール、ソース操作、簡単なキャッシュ/css/スクリプトツール

いいえ:

Internet Explorer Developer Toolbar : Firefox ほど便利ではありませんが、少なくとも適切な DOM インスペクターを提供します

その他:

Jesse の便利なブックマークレット:シェルのブックマークレットは特に便利です
私はSafariとOperaもインストールしますが、それらの開発ツールは Firefox ほど堅牢ではなく、IE ほどバグが少ないため、ほとんどの場合、テストとベンチマークにのみ使用します。
Lynx : これを使用して、JS を多用するサイトが引き続き機能することを確認し、Google、スクリーンリーダー、およびその他のボットのようなアプリで問題なく表示されるようにします。

score 0 · Accepted Answer

すでに述べた優れたツール以外に、Charlesは非常に便利だと思います。特に、Flash Remoting で多くの作業を行っているため、Flash Remoting は非常に優れています。

Charles は、開発者がマシンとインターネット間のすべての HTTP トラフィックを表示できるようにする HTTP プロキシ/HTTP モニター/リバースプロキシです。これには、リクエスト、レスポンス、および HTTP ヘッダー (Cookie とキャッシュ情報を含む) が含まれます。

Charles は HTTP/SSL 通信の中間者として機能し、HTTPS セッションのコンテンツをデバッグできるようにします。

これはクロスプラットフォームで、50 ドルかかりますが、ダウンロードできる「1 セッションあたり 30 分」の評価があります。

browser - 開発に役立つブラウザアドオンツールの推奨事項

12 に答える 12

Related

Reference