使うべきブラウザ拡張
Web系開発に便利なブラウザの拡張プラグインの覚え書き
IEにWeb系開発者向けの各種支援機能を追加するプラグイン
利用可能な機能は以下の通り
・要素の検索、クリックした要素の情報表示
・Javascript、ポップアップブロック、CSSの無効化
・ID、リンク先URL、アクセスキー、TabIndex等のページ内表示、リンク抽出
・テーブル、セル、DIV要素などの枠線表示
・画像のAltやサイズなどの各種表示
・DOMやHTMLソースの表示。HTMLの編集および反映などは出来ない。
・キャッシュ除去、クッキー表示、クッキー無効化。クッキーの編集は出来ない。
・カラーピッカー、選択座標間の長さ表示
・HTMLやCSSのValidate(外部サービス利用)
WebDeveloperより便利なところもあれば、微妙なところもあり。
HTMLを編集する機能が見あたりませんが、クリックした要素の情報表示などは他のブラウザ拡張より見やすい。
IEにJavascriptデバッガを追加するプラグイン
FirefoxでいうところのFirebugのようなプラグイン。
XmlHttpRequestの通信内容やレスポンスを表示することが出来ます。残念ながらFirebugほど機能満載ではありませんが、
IEでAjaxなJavascriptをデバッグするのに重宝します。欠点はレスポンスのマルチバイト文字が化けたりするあたり。
単純なマッチングや正規表現でロギングするHTTP対象URLを絞り込めるのは結構便利。
IEにJavascript・DOMデバッガを追加するプラグイン
Firebugの劣化版。
CSSとの合成後のスタイルやHTML、要素のPaddingなどをわかりやすく表示可能。
他の拡張同様、ターゲットアイコンをDnDすることで要素の情報を表示することが出来る。
インストールするとバーが一つ増えるが、使わないときは非表示にすると良い。
WebDevelopmentHelperよりは機能が豊富だけど、Firebugと比べるといくらか欲しい機能に欠ける。
とりあえずどちらかはインストールしておきたいプラグイン
Sleipnir用Web開発補助拡張
タブブラウザ『
Sleipnir』に
インストールすることで利用できるプラグイン。
動作には
UserActionExtensionが
必要。
利用可能な機能は以下の通り
・要素検索、クリックした要素の情報表示
・テーブルやブロック要素などの枠線表示
・CSSの無効化、編集
・HTMLの構造表示、編集、選択部分のソースを表示
・id、Class、画像や色などの情報表示
・Geckoエンジンを使った場合のHTMLレンダリング結果の比較表示
・HTML、CSSの検証(外部サービス利用)
・Cookie情報を表示、Cookieの追加(柔軟な編集はできない)
・フォームの情報を表示
基本はIEDeveloperToolbarと変わりませんが、CSSやHTMLを編集し、反映させることが出来るので、
フォーム偽装などによる、不正なPOSTなどが手軽に行えます。
ただし、ソースの編集がエラーで行えない場合がたまに有り。また、HTMLやCSSのエディタが貧相なので、
外部ツールで編集してからコピペしてレンダリング結果を確認するのが吉。
Sleipnir用スクリーンキャプチャ拡張
タブブラウザ『
Sleipnir』に
インストールすることで利用できるプラグイン。
Sleipnir上の任意のページ(デスクトップもOK)のスクリーンキャプチャを取ることが出来る。
範囲選択はもちろん、フリーのキャプチャツールでは失敗することがあるスクロールキャプチャも可能。
また、出力先を任意の保存先だけではなく、クリップボードに出力することも出来る。
カラーピッカー付き。Web系のドキュメント作成にはかなり重宝します。
Sleipnir用スクリプト拡張
タブブラウザ『
Sleipnir』に
インストールすることで利用できるプラグイン。
Sleipnir版Greasemonkeyのようなもの。任意のURLに対して任意のjavascriptを動かせる。
商用サーバに適用するJavascriptの動作確認がしたい際などに使えそうですが、一時的な確認程度であれば、
HawkeyeでHTMLを編集してしまった方が簡単なので、開発目的ではそこまで利点は無いかも。
詳しい使い方は
こ
こらへんがわかりやすいです。
Firefox用アドオン
利用可能な機能は以下の通り
・Cookie、Referer、Javascriptなどの各種無効化機能
・CSSの編集、無効化機能
・Cookieの削除、編集
・フォームの属性表示、変更機能
・画像の情報表示
・テーブル、id、Classなどの各種情報表示
・HTTPレスポンスヘッダ情報表示
・HTMLソース編集
・ルーラ、ルーペ表示
・任意の要素の情報表示
・HTML、CSSの検証(外部ツールの利用)
機能的にはIEDeveloperToolbarやSleipnirHawkeyeより若干上。
Cookieの編集が柔軟に出来るので、IEのように外部ツールを利用して書き換えなくても済むのが楽。
場所がわかりづらいですが、HTMLの編集は「その他」の中にあります。
Firefox用アドオン
好きなUserAgentを登録しておき、切り替える事が可能。
UserAgentで動作の切り分けなどをしてる際の検証などに。
Firefox用アドオン
HTTPヘッダ情報の表示、またヘッダを書き換えての再リクエストが可能
わかりにくいですが、ヘッダの書き換え再リクエストはHeadersタブの任意のリクエストを選択し、
Replay...ボタンをクリックすることでヘッダ書き換えウィンドウが開きます。
POSTやRefererの偽装チェックを行いたい場合にかなり強力。
リファラの偽装をしたいのであればRefspoofよりこっちがわかりやすいのでお勧め。
IEにもIE HTTP Headersというツールがありますが、こちらの方が機能は上。
Firefox用アドオン
HTMLソースの文法チェックを行ってくれるアドオン。
長いソースだとちょっと重めですが、他の文法チェッカと違い、自前でチェックエンジンを実装しているため、
ローカルファイルにも利用可能なのがポイント。
デザインがぶっ壊れているときに使ってみると、タグの閉じ忘れ等を発見できる可能性アップ。
Firefox用アドオン
WebページのURL毎に任意のJavascriptを設定できるアドオン。
開発目的であれば、HTMLソースの編集だけで割と事足りるが、Javascriptを別個に用意したい場合などに。
いろんな人が作成した便利なスクリプトを使いたい場合は
こちらな
ど参照。
Firefox用アドオン
Ajax、Javascript開発に便利な拡張。一応ブレイクポイントなども
設定可能だけど、本格的にやるならAptanaStudioでAptanaDebuggerと一緒に使うのがベスト。
デバッグコンソールにXmlHttpRequestでの送信結果後のResponseTextを表示できるので、
いちいちテキストエリアを用意してinnerHtmlに結果を突っ込んでデバッグ、などといったことをしなくても良いのがかなり便利。
結論
Firebug + WebDeveloper最強。