オンラインコンテンツが使用している 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 ユーザーの集い」フォローアップ (2/2)

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


Visual Sudio 2012 の Windows ストア アプリと Web コンテンツの基本的なデバッグ機能

前回に引き続き、これから Visual Studio を使用されるという人向けに、今回は、以前のバージョンから引き継がれた Windows ストア アプリと Web コンテンツ用の基本的なデバッグ機能について紹介します。   JavaScript のデバッグ機能 ソフトウェアの開発ツールである Visual Studio は、サポートする開発言語について強力なデバッグ機能を提供しており、JavaScript も例外ではありません。 プログラムの実行を任意の箇所で中断し、1 ステップずつの実行や変数の中身の確認、関数の場合はどの順序でどう呼ばれたかなどの情報を視覚的に確認することができます。 ここではこれら JavaScript コードのデバッグ機能について紹介します。   ブレークポイント Visual Studio では、JavaScript コードの任意のステップに停止位置を設け、実行を中断させることができます。 この機能をブレークポイントといいます。 JavaScript コードにブレークポイントを設定するには、以下の方法があります。 JavaScript コード中の任意の位置にカーソルを移動し、 Visual Studio のメニュー [デバック] – [ブレークポイントの設定/解除] を選択 キーボードの [F9] キーを押下 エディタ画面の左端の灰色の部分をクリック ブレークポイントが設定されると、実行の集団箇所が赤くマークされます。 (ブレークポイントを設定したところ)   ブレークポイントを使用したデバッグを開始するには、Visual Studio のメニュー [デバッグ] – [デバッグ 開始] を選択するか、キーボードの…


使ってみよう! [F12] IE9 開発者ツール – さまざまな情報の表示

前回の記事に引き続き、Internet Exloprer 9 付属の F12 開発者ツールの使い方について書きます。 ※「F12 開発者ツールって、なんじゃい?」 という方はぜひ、前回の記事をご覧いただければと思います。 今回は、Internet Explorer 9 のコンテンツ表示画面への、さまざまな情報の表示方法について紹介します。   エレメント情報の表示 JavaScript や CSS で Web ページのエレメント を操作する場合、エレメントの id 属性や class 属性を使用します。 こういったエレメントの持つ情報の確認は、一般的に HTML ソースで行いますが、ブラウザーのコンテンツ表示画面に実際に描画されたエレメント上で確認できたほうがイメージが湧きやすい場合があります。 IE9 の F12 開発者ツールの [表示] メニューを使用すると、Web ブラウザーで表示されている Web ページ上に、そのページを構成しているエレメントの ID やクラス名、リンク パスやその他の情報を表示させることができます。 表示の仕方は、[表示] メニュー内の目的にあったメニューを選択していくだけです。 (F12 開発者ツールの[表示]メニューの内容) (エレメントの ID とクラス名を表示したところ) [表示] メニュー内の [リンク レポート]を選択すると、ページ内の全てのリンクの一覧を Web ページとして表示します。 (リンク…

3

使ってみよう! [F12] IE9 開発者ツール – HTMLとJavaScript のデバッグ編

IE8 以降の Internet Explorer をお使いの方であれば、うすうすお気づきのことと思いますが、Internet Explorer 8 からは Web ページをデバッグするための開発者ツールが搭載されています。 「え、おれ IE9 使ってっけど、そんなの知らねーよ!」 という方は、IE9 を起動してキーボードの [F12] キーを押下していただければと思います。 以下のようなウィンドウが表示されると思います。    F12  開発者ツール これが Internet Explorer 9 に搭載されている [F12 開発者ツール] です。 お察しの通り、ツール名の 「F12」 は、起動のために押下するキーを表しています。親切ですね。 起動してきた [F 12 開発者ツール] のウィンドウ内には、さまざまなメニューやツールバー、そして機能名が書かれたタブが整然と並んでおり、その様子から、「なにかやってくれそう」な感がぷんぷんと漂ってきますが、いきおい期待は高まるものの、ぱっと見、「どう使っていいのかわからない」というのが大半の方の感想でしょう。 そこで今回から数回に別けて Internet Explorer 9 の基本的かつ特徴的な機能について、簡単に機能をご紹介させていただきます。   Internet Explorer 9  [F12 開発者ツール] の起動 [F12 開発者ツール] を起動するには、Internet Explorer 9 起動中にキーボードの…