オンラインコンテンツが使用している JavaScript ライブラリを手元で置き換えて検証する方法について

前回の記事では、Edge 対応こと、Web ブラウザー同士の相互運用性を高める方法として以下の 5 つの点について紹介しました。 ドキュメントモードの指定を行わない 新しい JS ライブラリ/フレームワークを使用する ブラウザープラグインを使用しない CSS ベンダープレフィックスを使用しない ブラウザーの検出を使用しない 今回は上記の項目、「 2 新しい JS ライブラリ/フレームワークを使用する」に対応する際、検証方法を楽にする手段として、オンライン上にある Web コンテンツが使用している JavaScript ライブラリを手元で置き換えて検証する方法について紹介します。 これには Fiddler という無償の HTTP デバッガーツール使用します(※) (※) Fiddler を使用したオンライン上のファイルの置き換え方法については、すでに幾人かの方がブログで書かれているので、いまさらという感じもしますが、お客様の手順を紹介する際に、他人様のブログ記事を紹介するのもなんだかアレなので、記事を投稿することにしました。 実習用のページも用意しましたので、ぜひお試しくださいませ。 その前に Fiddler について簡単に紹介しておきましょう。   Fiddler とは? Fiddler はプロキシ型の HTTP デバッガです。Web サーバーとクライアントの間を流れる HTTP パケットをキャプチャすることはもちろん、改ざんしたり、ステップ実行したりといったことも可能です。 Fiddler については、以前このブログで使い方を含めた詳しい紹介を行っていますので、詳細についてはそちらの記事をご覧くださいませ。 「Fiddler ユーザーの集い」フォローアップ (1/2) 「Fiddler ユーザーの集い」フォローアップ (2/2) 「Fiddler ユーザーの集い」フォローアップ(おまけ)  …


「Fiddler ユーザーの集い」フォローアップ(おまけ)

6 月 30 日(2013) に開催されました「Fiddler ユーザーの集い」で登壇させていただきました「今日から使う Fiddler」のフォローアップ記事の 3 回目です。 「Fiddler ってなに?」、「どう使うの?」って人はどうぞ以下の前回と前々回の記事をご覧くださいませ。 「Fiddler ユーザーの集い」フォローアップ (1/2) 「Fiddler ユーザーの集い」フォローアップ (2/2)   また、以下はセッションで使用したスライドです。 今日から使う Fiddler from Osamu Monoe   今回は、前回の記事で紹介しきれなかった、Firefox Web ブラウザーのネットワークトラフィックを取得する方法についてです。     Fiddler を使用して Firefox のネットワークトラフィックをキャプチャする方法   Fiddler は 自身を Windows のデフォルト プロキシとして登録するため、この設定を使用するアプリケーションのネットワークトラフィックをキャプチャすることができます。 しかし、Firefox はWindows のデフォルト プロキシの設定を使用しないため、Fiddler だけでは Firefox のネットワークトラフィックをキャプチャすることはできません。 そのため Firefox については、そのネットワークトラフィックをキャプチャするためのアドオンが用意されています。   FireHook FireHook は、Fiddler…


「Fiddler ユーザーの集い」フォローアップ (2/2)

6 月 30 日 (2013) に「Fiddler ユーザーの集い」 で 登壇させていただきました「今日から使う Fiddler」というセッションのフォローアップの第二回目記事です。 Fiddler とはなにか? 入手先などについては、前回のこちらの記事の内容をご参照ください。 当日使用したスライドは以下になります。 今日から使う Fiddler from Osamu Monoe   今回は Web セッションの内容を調べるためのタブ付きビューの各タブについて紹介していきます。     トラフィックの確認 Fiddler でキャプチャした Web セッションの内容を確認するには、目的に合わせタブ付きビューの各タブを使用します。 タブ付きビューに既定で表示される各タブの内訳は以下のとおりです。 以降は各タブの役割について紹介していききます。     Statistics タブ Statistics タブは Web セッションの基本情報を表示します。 クライアントの接続数であるとかバイト数であるとか、接続に関する情報が一覧となって表示されます。   画面下の Show Chart をクリックすると、選択されている Web セッションの容量を占めるヘッダーと本体の割合が円グラフで表示されます。     Filters タブ Filters キャプチャした Web…


「Fiddler ユーザーの集い」フォローアップ (1/2)

先月、日本オライリーさんの 「実践 Fiddler」 という書籍の監訳のお手伝いをさせていただきました関係で、6 月 30 日 (2013) に「Fiddler ユーザーの集い」 で 「今日から使う Fiddler」というタイトルで、セッションを持たせていただきました。 内容は、初学者が Fiddler を使い始めるめの基本的なものとなっており、エキスパートな方々には少々物足りなかったかもしれません。 さて、スライドをシェアしたものの、ほとんどがデモで構成されたセッションなので、きっとスライドを見てもわけわからんだろうということで、フォローアップの記事を書いておきます。(長いので 2 回にわけます) 今日から使う Fiddler from Osamu Monoe   今日から使う Fiddler この記事ではセッションの内容の抜粋を紹介していきます。   Fiddler とは 無償の HTTP 専門のネットワークキャプチャツールで、Web をプロトコルレベルでデバッグする際に使用します。 もうちょっとわかりやすく説明すると、通常我々が見ている Web というものは、HTTP、HTTPS というプロトコル (通信規約) によってデータのやり取りがなされています。 これら HTTP で Web サーバーから送られた情報は Web を見るための道具である Web ブラウザーによって人間が理解しやすいように Web ページとして表現されます。 しかし、このやりとりされるデータに問題があると、Web ブラウザーで正しく Web…


使ってみよう! [F12] IE9 開発者ツール – HTTP キャプチャ機能

今回も前々回の記事に引き続き、Internet Exloprer 9 付属の F12 開発者ツールの使い方についてです。 (※1) 「F12 開発者ツールって、なによ..。」 という方はぜひ、前々回の記事をご覧いただければと思います。 (※2) Internet Explorer 9 ( IE9 ) をお使いの方は、ぜひ [F12] キーを押下して、実際に [F12 開発者ツール] を動かしながら本記事をご覧になってくださいませ。 今回は、F12 開発者ツールに搭載されている、IE9 と Web サーバー間を流れる HTTP をキャプチャする機能について紹介します。   [ネットワーク] タブでの HTTP のキャプチャ IE9 の F12 開発者ツールには、IE9 と Web サーバーの間でやり取りされる HTTP の情報を確認するためのネットワークキャプチャ機能が搭載されています。 この機能を使用すると、Web ブラウザーからのリクエスト、Web サーバーからのレスポンスの内容はもちろんのこと、ページが含んでいる画像やプラグインオブジェクトといった外部ファイルのラウンドトリップに要した細かな時間なども確認することができます。 F12 開発者ツールのネットワークキャプチャ機能を使用するには、[ネットワーク] タブをアクティブにし、[キャプチャの開始] ボタンをクリックします。 キャプチャが開始されたら、目的のページに移動するか、既にページを表示している場合は、IE9 の更新ボタンをクリックするか [F5] キーを押下してページを更新します。…

1