Hebikuzure's Tech Memo

2011年12月18日

Fiddler を使って Jquery を置き換える

Filed under: Internet Explorer — hebikuzure @ 10:31 PM

Swapping out JQuery with Fiddler
http://blogs.msdn.com/b/ieinternals/archive/2011/08/19/using-fiddler-to-verify-a-jquery-update-will-fix-a-compatibility-problem.aspx


今日は EricLaw’s IEInternals の記事からちょっと前の物ですが興味深い物を私訳しました。 Fiddler は Microsoft 準公式の HTTP キャプチャ/デバッグツールですが、ローカル プロキシとして動作するためリクエストやレスポンスを別のコンテンツに 置き換えてしまう事もできます。この記事はそれを使ってサイトで利用されている JQuery のバージョンを簡単に変更してしまう方法について書かれています。

以下の文章は EricLaw’s IEInternals の 8/19 の記事 Swapping out JQuery with Fiddler を hebikuzure が私的に試訳したものです。翻訳については Microsoft Corporation および日本マイクロソフト株式会社とは無関係に hebikuzure が公開情報に基づき独自に行ったものであり、この文書の内容についての文責は公開者である hebikuzure にあります。翻訳の内容および技術的内容については正確を期すよう十分な注意を払っておりますが、誤りや不正確な部分が含まれている可能性がありますので、本文書を利用される際には原文も併せてご確認ください。


Fiddler を使って Jquery を置き換える

EricLaw [MSFT]

2011年8月19日 午後3時22分

今朝、ある人から HTML5 のデモ サイトで起きている互換性上のトラブルについて調べてほしいと頼まれました。そのサイトを IE9 と IE10 でロードすると、F12 開発者ツールのスクリプト デバッガには以下のようなエラーが表示されます:

さて、明白な事ですが、IE では getElementsByTagName をサポートしていません。また私はこのページを IE9・IE10 それぞれのバージョンの標準モードで実行している事も確認しました。私にとって次にはっきりしている事は jquery-1.5.min.js というファイル名で、これはよく利用されている JavaScript ライブラリーである JQuery のバージョン 1.5.0 である事を示しています。3月の事になりますが、Tony Ross がIEBlog で JQuery 1.5.1 のリリースを祝ったように、他でもなく 1.5.1 は IE9 を完全にサポートした最初のバージョンでした。

それで、このサイトは古いバージョンのライブラリーが使われていると考えられます。しかし古いライブラリーがスクリプトエラーの原因でしょうか、また最新の Jquery にアップグレードするだけでこのサイトはちゃんと動作するのでしょうか?

以前のケースで、別のサイトについて JQuery 1.4.4 を利用している事で問題が起きたと考えました。しかし開発者が最新の JQuery に更新したにも関わらず問題は解決しませんでした。その開発者のコードでは User-Agent チェックを行っており、それで MSIE と判断すると処理を回避するようになっていたのです。

そこで私は今日のデモ サイトのオーナーと連絡を取る前に、必要なのは JQuery のアップグレードだけである事を確認したいと思いました。

幸いにも、Fiddler を使えばこれはとても簡単でした。最初に Jquery.com を訪れて JQuery ライブラリーをダウンロードしました。もし JQuery 内のデバッグも計画しているのであれば、Development バージョンを入手しましょう。私は単なるアップグレードだけで十分だと期待していたので、小さい縮小バージョンをダウンロードし、デスクトップに保存しました。

そして Fiddler を起動し、AutoResponder タブに切り替えました。Add… ボタンを使い、JQuery-1.5.min.js へのリクエストをデスクトップに新たにダウンロードした jquery-1.6.2.min.js ファイルにマップする新しいルールを作成しました。

ここで Fiddler がどのルールにもマッチしないリクエストに対して自動的に 404 を生成しないよう、Unmatched requests passthrough オプションを有効にする事を忘れないでください。

それから私は IE で問題のサイトに戻り、CTRL+F5 を押してブラウザーが全てのコンテンツをネットワークから強制的にリロードするようにしました。Fiddler は古い JQuery へのリクエストを横取りし、代わりに新しいファイルを返します。Fiddler は WebSessions リストで AutoResponse の行を青色で表示します:

幸いにも、新しいバージョンの JQuery に置き換わると、サイトはスクリプト エラー無しに正しく機能するようになり、デモ用コンテンツは綺麗に動作しました。そこで私は自身をもってサイトのオーナーに連絡を取り、ライブラリーを更新するよう指示しました。当然それで互換性の問題は解決しました。

-Eric

広告

コメントする »

まだコメントはありません。

RSS feed for comments on this post. TrackBack URI

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

WordPress.com Blog.

%d人のブロガーが「いいね」をつけました。