Visual Studio 2012 で Page Inspector を使用する

by Web Camps Team

このハンズオン ラボでは、Visual Studio の Web ページの問題 (Page Inspector) を見つけて修正するための新しいツールを見つけます。

Page Inspectorは、ブラウザー診断ツールを Visual Studio に導入し、ブラウザー、ASP.NET、ソース コードの統合エクスペリエンスを提供する新しいツールです。 Visual Studio IDE 内で Web ページ (HTML、Web Forms、ASP.NET MVC、または Web ページ) を直接レンダリングし、ソース コードと結果の出力の両方を調べることができます。 Page Inspectorを使用すると、Web サイトを簡単に分解し、ページを一から迅速に構築し、問題をすばやく診断できます。

現在、ASP.NET MVC や WebForms など、柔軟でスケーラブルな Web サイトをタイムリーに作成する Web フレームワークが多数用意されています。 一方、IDE ではテンプレート ベースのページと動的コンテンツのデザイナー ビューがサポートされていないため、ページで問題を見つけるのが難しくなります。 したがって、これらの Web サイトは、ユーザーにどのように表示されるかを確認するためにブラウザーで開く必要があります。

Web 開発者は、外部ツールを使用して、ブラウザーで定期的に実行される問題を見つけます。 次に、IDE に戻り、修正を開始します。 IDE、ブラウザー、プロファイリング ツール間のこの前後のアクティビティは非効率的な場合があり、問題を再現するたびに新しいデプロイとキャッシュクリーニングが必要になる場合があります。

Page Inspector、組み合わせた機能セットを使用して両方の長所を組み合わせることで、クライアント (ブラウザー ツール) とサーバー (ASP.NET とソース コード) の間の Web 開発のギャップを埋めます。

Page Inspectorを使用すると、ソース ファイル (サーバー側コードを含む) のどの要素がブラウザーにレンダリングされる HTML マークアップを生成したかを確認できます。 Page Inspectorでは、CSS プロパティと DOM 要素属性を変更して、ブラウザーにすぐに反映された変更を確認することもできます。

このハンズオン ラボでは、Page Inspector機能について説明し、それらを使用して Web アプリケーションの問題を解決する方法について説明します。 このラボには、似たフローを使用するが、異なるテクノロジを対象とする 2 つの演習が含まれています。 MVC 開発者 ASP.NET 場合は、演習 1 に従います。WebForms 開発者の場合は、演習 2 に従ってください.

このラボでは、Source フォルダーに用意されているサンプル Web アプリケーションに軽微な変更を適用することで、前述の機能強化と新機能について説明します。

目標

このハンズオン ラボでは、次の方法を学習します。

• Page Inspectorを使用して Web サイトを分解する
• Page Inspectorを使用して CSS スタイルの変更を検査してプレビューする
• Page Inspectorを使用して Web ページの問題を検出して修正する

前提条件

このラボを完了するには、次の項目が必要です。

• Microsoft Visual Studio Express 2012 for Web 以上 (インストール方法については付録 A を参照してください)。
• インターネット エクスプローラー 9 以上

---

演習

このハンズオン ラボには、次の演習が含まれています。

1. 演習 1: ASP.NET MVC プロジェクトでPage Inspectorを使用する
2. 演習 2: WebForms プロジェクトでPage Inspectorを使用する

Note

各演習には、演習の [開始] フォルダーにある開始ソリューションが伴います。これにより、各演習を他の演習とは別に実行できます。 演習のソース コード内には、対応する演習の手順を完了した結果のコードを含む Visual Studio ソリューションを含む End フォルダーもあります。 このハンズオン ラボを進める際に追加のヘルプが必要な場合は、これらのソリューションをガイダンスとして使用できます。

このラボの推定所要時間: 30 分。

演習 1: ASP.NET MVC プロジェクトでPage Inspectorを使用する

この演習では、Page Inspectorを使用して ASP.NET MVC 4 ソリューションをプレビューおよびデバッグする方法について説明します。 まず、ツールを簡単に回して、Web デバッグ プロセスを容易にする機能を学習します。 その後、スタイルの問題を含む Web ページで作業します。 Page Inspectorを使用して、問題を生成するソース コードを見つけて修正する方法について説明します。

タスク 1 - Page Inspectorの探索

このタスクでは、フォト ギャラリーを示す ASP.NET MVC 4 プロジェクトのコンテキストでPage Inspectorを使用する方法について説明します。

1. Source/Ex1-MVC4/Begin/ フォルダーにある Begin ソリューションを開きます。

   1. 続行する前に、不足している NuGet パッケージをいくつかダウンロードする必要があります。 これを行うには、[ プロジェクト ] メニューをクリックし、[ NuGet パッケージの管理] を選択します。

   2. [ NuGet パッケージの管理 ] ダイアログで、[ 復元 ] をクリックして、不足しているパッケージをダウンロードします。

   3. 最後に、[ソリューションのビルド] をクリックしてソリューションを ビルド | します。

      Note

      NuGet を使用する利点の 1 つは、プロジェクト内のすべてのライブラリを出荷する必要がなく、プロジェクト サイズを小さくすることです。 NuGet Power Tools では、Packages.config ファイルでパッケージのバージョンを指定することで、プロジェクトを初めて実行するときに必要なすべてのライブラリをダウンロードできます。 このため、このラボから既存のソリューションを開いた後に、これらの手順を実行する必要があります。

2. ソリューション エクスプローラーで、/Views/Home プロジェクト フォルダーの下にある Index.cshtml ビューを見つけて右クリックし、[Page Inspectorで表示] を選択します。

   プレビュー

   Page Inspectorでプレビューするファイルを選択する

3. Page Inspector ウィンドウには、選択したソース ビューにマップされた /Home/Index URL が表示されます。

   

   Page Inspectorとの最初の連絡先

   Page Inspector ツールは Visual Studio 環境に統合されています。 インスペクターには、強力な HTML プロファイラーと共に埋め込まれたブラウザーが含まれています。 ページの外観を確認するためにソリューションを実行する必要はありません。

   Note

   ブラウザーの幅Page Inspector開いているページの幅より小さい場合は、ページが正しく表示されません。 その場合は、Page Inspectorの幅を調整します。

4. Page Inspectorの [ファイル] タブをクリックします。

   [インデックス] ページを作成しているすべてのソース ファイルが表示されます。 この機能は、特に部分ビューとテンプレートを使用している場合に、すべての要素を一目で識別するのに役立ちます。 リンクをクリックすると、各ファイルを開くこともできます。

   

   [ファイル] タブ

5. タブの左側にある [ 検査モードの切り替え ] ボタンをクリックします。

   このツールを使用すると、ページの任意の要素を選択し、その HTML と Razor コードを表示できます。

   

   [検査モードの切り替え] ボタン

6. Page Inspector ブラウザーで、ページ要素の上にマウス ポインターを移動します。 レンダリングされたページの任意の部分にマウス ポインターを移動すると、要素の種類が表示され、Visual Studio エディターで対応するソース マークアップまたはコードが強調表示されます。

   

   動作中の検査モード

   Note

   Page Inspector ウィンドウを最大化しないか、ソース コードを示す [プレビュー] タブが表示されません。 Page Inspectorの要素を最大化したときにクリックすると、選択範囲のソース コードが表示されますが、Page Inspector ウィンドウは非表示になります。

   Index.cshtml ファイルに注意を払うと、選択した要素を生成するソース コードの部分が強調表示されていることがわかります。 この機能により、長いソース ファイルの編集が容易になり、コードに直接すばやくアクセスできます。

   

   要素の検査

7. [検査モードの切り替え] ボタンをクリックします () をクリックしてカーソルを無効にします。

8. [HTML] タブを選択して、Page Inspector ブラウザーにレンダリングされた HTML コードを表示します。

9. HTML マークアップで、Koala リンクを含むリスト アイテムを見つけて選択します。

   コードを選択すると、対応する出力がブラウザーで自動的に強調表示されます。 この機能は、ページに HTML ブロックがどのようにレンダリングされるかを確認するのに役立ちます。

   

   ページ内の HTML 要素の選択

10. [ 検査モードの切り替え ] ボタンをクリックして 検査モード を有効にし、ナビゲーション バーをクリックします。 HTML コードの右側の [スタイル] ウィンドウに、選択した要素に適用された CSS スタイルの一覧が表示されます。

    Note

    ヘッダーはサイト レイアウトの一部であるため、Page Inspectorは _Layout.cshtml ファイルも開き、影響を受けるコードのセグメントを強調表示します。

    

    選択した要素のスタイルとソース ファイルの検出

11. トグル検査ポインターを有効にした状態で、青いおすすめのバーの下にマウス ポインターを移動し、半円をクリックします。

    

    要素の選択

12. [スタイル] ウィンドウで、[.メイン] の下にある背景画像項目を見つけます-content グループ。 背景画像をオフにして、何が起こるかを確認します。 ブラウザーに変更がすぐに反映され、円が非表示になっていることがわかります。

    Note

    [Page Inspectorスタイル] タブで適用した変更は、元のスタイルシートには影響しません。 スタイルをオフにしたり、必要な回数だけ値を変更したりできますが、ページを更新すると復元されます。

    

    CSS スタイルの有効化と無効化

13. 次に、検査モードを使用してヘッダーの [ここにロゴ] テキストをクリックします。

14. [スタイル] タブで、.site-title グループのフォント サイズ CSS 属性を見つけます。 属性値をダブルクリックし、2.3 em の値を 3 em に置き換えて、 Enter キーを押します。 タイトルが大きく見える点に注目してください。

    Page Inspector

    Page Inspectorでの CSS 値の変更

15. Page Inspectorの右側のウィンドウにある [トレース のスタイル] タブをクリックします。 これは、選択に適用されたすべてのスタイルを属性名順に表示する別の方法です。

    

    選択した要素の CSS スタイル トレース

16. Page Inspectorのもう 1 つの機能は、[レイアウト] ウィンドウです。 検査モードを使用してナビゲーション バーを選択し、右側のウィンドウの [ レイアウト ] タブをクリックします。 選択した要素の正確なサイズと、そのオフセット、余白、パディング、境界線のサイズが表示されます。 このビューから値を変更することもできます。

    

    Page Inspectorの要素レイアウト

タスク 2 - フォト ギャラリーでスタイルの問題を見つけて修正する

以前のバージョンの Visual Studio で Web ページの問題をどのように診断しますか? インターネット エクスプローラー Developer Tools や Firebug など、Visual Studio IDE の外部で実行される Web デバッグ ツールに精通している可能性があります。 ブラウザーは HTML、スクリプト、スタイルのみを理解しますが、基になるフレームワークではレンダリングされる HTML が生成されます。 そのため、多くの場合、Web ページの外観を確認するには、サイト全体を展開する必要があります。

Web サイトで問題を検出して修正する場合は、次の手順に従った可能性があります。

1. Visual Studio からソリューションを実行するか、Web サーバーにページを展開します。
2. ブラウザーで、使用する開発者ツールを開くか、単にソース コードとスタイルを開き、問題の一致を試みます。 関連するファイルを見つけるには、スタイル クラスの名前を持つ "検索" または "ファイル内の検索" 機能を使用します。
3. エラーが検出されたら、Web ブラウザーとサーバーを停止します。
4. ブラウザーのキャッシュをクリアします。
5. Visual Studio に戻り、修正プログラムを適用します。 テストするすべての手順を繰り返します。

ASP.NET MVC 4 には実際の WYSIWYG がないため、スタイルの問題のほとんどは、Web アプリケーションを実行またはデプロイした後、後のステージで検出されます。 これで、Page Inspectorを使用して、ソリューションを実行せずに任意のページをプレビューできるようになりました。

このタスクでは、ページインスペクターを使用して、フォト ギャラリー アプリケーションのいくつかの問題を修正します。

1. Page Inspectorを使用して、ヘッダーの左側にある [登録] リンクと [ログイン] リンクを見つけます。

   リンクが右側の予想される場所に表示されず、箇条書きのように表示されていることに注意してください。 次に、リンクを右に揃え、それに応じてスタイルを再作成します。

   

   [登録] リンクと [ログイン] リンクの検索

2. [検査モードの切り替え] を選択した状態で、[登録] リンクに近い (オンではない) をクリックしてコードを開きます。

   リンクのソース コードは 、Index.cshtml や _Layout.cshtml ではなく、_LoginPartial.cshtml ファイルにあります。これは、最初に見る可能性のある場所です。 正しいソース ファイルに直接配置されています。

3. [スタイル] タブで、これらのリンクの <HTML コンテナーである項目#loginセクション>を見つけてクリックします。

   クリックすると、 #login スタイルが Site.css に自動的に配置されます。 さらに、コードが強調表示されるようになりました。

   

   CSS スタイルの選択

4. 強調表示されたコードの テキストアライン 属性のコメントを解除し、開始文字と終了文字を削除して Site.css ファイルを保存します。

   Page Inspectorは、現在のページを構成するすべての異なるファイルを認識しており、これらのファイルのいずれかがいつ変更されるかを検出できます。 ブラウザーの現在のページがソース ファイルと同期していない場合は常に警告されます。

5. Page Inspector ブラウザーで、アドレス バーの下にあるバーをクリックしてページを再読み込みします。

   

   ページの再読み込み

   リンクは右側にありますが、箇条書きのように表示されます。 次に、行頭文字を削除し、リンクを水平方向に配置します。

   

   更新されたページ

6. 検査モードを使用して、[登録] リンクと [ログイン] リンクを含む li> 項目のいずれかを<選択します。 次に、項目#login<セクション>をクリックして Styles.css コードにアクセスします。

   

   スタイルの検索

7. Style.css で、li 項目のコードのコメント#login解除します。 追加するスタイルでは、行頭文字が非表示になり、項目が水平方向に表示されます。

   

   ログイン リンクのリスタイル設定

8. Style.css ファイルを保存し、アドレスの下にあるバーを 1 回クリックしてページを再読み込みします。 リンクが正しく表示されていることに注意してください。

   

   右側に配置されたリンク

9. 最後に、ヘッダーのタイトルを変更します。 検査モードを使用して 、ここでロゴを クリックしてテキストを生成するソース コードにアクセスします。

10. これで、_Layout.cshtml に移動し、"ここでロゴ" テキストを 'フォト ギャラリー' に置き換えます。 Page Inspector ブラウザーを保存して更新します。

    

    新しいタイトルの割り当て

    

    フォト ギャラリーのページが更新されました

11. 最後に、 PhotoGallery プロジェクトを選択し、 F5 キーを押してアプリを実行します。 すべての変更が期待どおりに機能する方法を確認します。

---

演習 2: WebForms プロジェクトでPage Inspectorを使用する

この演習では、Page Inspectorを使用して WebForms ソリューションをプレビューおよびデバッグする方法について説明します。 最初にツールを簡単に回して、Web デバッグ プロセスを容易にするPage Inspector機能について学習します。 その後、スタイルの問題を含む Web ページで作業します。 Page Inspectorを使用して、問題を生成するソース コードを見つけて修正する方法について説明します。

タスク 1 - Page Inspectorの探索

このタスクでは、フォト ギャラリーを表示する WebForms プロジェクトのコンテキストでPage Inspector機能を使用する方法について説明します。

1. Source/Ex2-WebForms/Begin/ フォルダーにある Begin ソリューションを開きます。

   1. 続行する前に、不足している NuGet パッケージをいくつかダウンロードする必要があります。 これを行うには、[ プロジェクト ] メニューをクリックし、[ NuGet パッケージの管理] を選択します。

   2. [ NuGet パッケージの管理 ] ダイアログで、[ 復元 ] をクリックして、不足しているパッケージをダウンロードします。

   3. 最後に、[ソリューションのビルド] をクリックしてソリューションを ビルド | します。

      Note

      NuGet を使用する利点の 1 つは、プロジェクト内のすべてのライブラリを出荷する必要がなく、プロジェクト サイズを小さくすることです。 NuGet Power Tools では、Packages.config ファイルでパッケージのバージョンを指定することで、プロジェクトを初めて実行するときに必要なすべてのライブラリをダウンロードできます。 このため、このラボから既存のソリューションを開いた後に、これらの手順を実行する必要があります。

2. ソリューション エクスプローラーで Default.aspx ページを見つけて右クリックし、[Page Inspectorで表示] を選択します。

   く

   Page Inspectorで Default.aspx を開く

3. Page Inspector ウィンドウに Default.aspx が表示されます。

   表示

   Page Inspectorでの Default.aspx の表示

   Page Inspector ツールは Visual Studio 環境に統合されています。 インスペクターには、選択したコードを表示する強力な HTML プロファイラーと共に、埋め込みブラウザーが含まれています。 ページの外観を確認するためにソリューションを実行する必要はありません。

   Note

   ブラウザーの幅Page Inspector開いているページの幅より小さい場合は、ページが正しく表示されません。 その場合は、Page Inspectorの幅を調整します。

4. Page Inspectorの [ファイル] タブをクリックします。

   レンダリングされた [既定] ページを構成しているすべてのソース ファイルが表示されます。 これは、特にユーザー コントロールとマスター ページを使用している場合に、すべての要素を一目で識別するのに便利な機能です。 各ファイルに移動することもできます。

   

   [ファイル] タブ

5. タブの左側にある [ 検査モードの切り替え ] ボタンをクリックします。

   このツールを使用すると、ページの任意の要素を選択し、その HTML コードと .aspx ソースを確認できます。

   

   [検査モードの切り替え] ボタン

6. Page Inspector ブラウザーで、ページ要素の上にマウスを移動します。 レンダリングされたページの任意の部分にマウス ポインターを移動すると、要素の種類が表示され、Visual Studio エディターで対応するソース マークアップまたはコードが強調表示されます。

   

   動作中の検査モード

   Note

   Page Inspector ウィンドウを最大化しないか、ソース コードを示す [プレビュー] タブが表示されません。 Page Inspectorの要素を最大化したときにクリックすると、選択範囲のソース コードが表示されますが、Page Inspector ウィンドウは非表示になります。

   Default.aspx ファイルに注意を払うと、選択した要素を生成するソース コードの部分が強調表示されていることがわかります。 この機能により、長いソース ファイルのエディションが容易になり、コードに直接すばやくアクセスできます。

   

   要素の検査

7. [検査モードの切り替え] ボタン () をPage Inspectorタブに置き、カーソルを無効にします。

8. [HTML] タブを選択して、Page Inspector ブラウザーにレンダリングされた HTML コードを表示します。

9. HTML コードで、Koala リンクを含むリスト アイテムを見つけて選択します。

   コードを選択すると、対応する出力がブラウザーで自動的に強調表示されます。 この機能は、ページに HTML ブロックがどのようにレンダリングされるかを確認するのに役立ちます。

   

   ページ内の HTML 要素の選択

10. [ 検査モードの切り替え ] ボタンをクリックして 検査モード を有効にし、ナビゲーション バーをクリックします。 HTML コードの右側の [スタイル] ウィンドウに、選択した要素に適用された CSS スタイルの一覧が表示されます。

    Note

    ヘッダーはサイト レイアウトの一部であるため、Page Inspectorは Site.Master ファイルも開き、影響を受けるコードのセグメントを強調表示します。

    する

    選択した要素のスタイルとソース ファイルの検出

11. トグル検査ポインターを有効にした状態で、マウス ポインターをメニュー バーの下に移動し、空白の半円をクリックします。

    

    要素の選択

12. [スタイル] ウィンドウで、[.メイン] の下にある背景画像項目を見つけます-content グループ。 背景画像をオフにして、何が起こるかを確認します。 ブラウザーに変更がすぐに反映され、円が非表示になっていることがわかります。

    Note

    [Page Inspectorスタイル] タブで適用した変更は、元のスタイルシートには影響しません。 スタイルをオフにしたり、必要な回数だけ値を変更したりできますが、ページを更新すると復元されます。

    

    CSS スタイルの有効化と無効化

13. 次に、検査モードを使用してヘッダーの [ここにロゴ] テキストをクリックします。

14. [スタイル] タブで、.site-title グループのフォント サイズ CSS 属性を見つけます。 属性を 1 回ダブルクリックして、その値を編集します。 2.3em の値を 3em に置き換え、Enter キーを押します。 タイトルが大きく見える点に注目してください。

    

    Page Inspectorでの CSS 値の変更

15. Page Inspectorの右側のウィンドウにある [トレース のスタイル] タブをクリックします。 これは、選択に適用されたすべてのスタイルを属性名順に表示する別の方法です。

    

    選択した要素の CSS スタイル トレース

16. Page Inspectorのもう 1 つの機能は、[レイアウト] ウィンドウです。 検査モードを使用してナビゲーション バーを選択し、右側のウィンドウの [ レイアウト ] タブをクリックします。 選択した要素の正確なサイズと、そのオフセット、余白、パディング、境界線のサイズが表示されます。 このビューから値を変更することもできます。

    

    Page Inspectorの要素レイアウト

タスク 2 - フォト ギャラリーでスタイルの問題を見つけて修正する

以前のバージョンの Visual Studio で Web ページの問題をどのように診断しますか? インターネット エクスプローラー Developer Tools や Firebug など、Visual Studio IDE の外部で実行される Web デバッグ ツールに精通している可能性があります。 ブラウザーは HTML、スクリプト、スタイルのみを理解しますが、基になるフレームワークではレンダリングされる HTML が生成されます。 そのため、多くの場合、Web ページの外観を確認するには、サイト全体を展開する必要があります。

Web サイトで問題を検出して修正する場合は、次の手順に従った可能性があります。

1. Visual Studio からソリューションを実行するか、Web サーバーにページを展開します。
2. ブラウザーで、使用する開発者ツールを開くか、単にソース コードとスタイルを開き、問題の一致を試みます。 関連するファイルを見つけるには、スタイル クラスの名前で "検索" または "ファイル内の検索" 機能を使用している必要があります。
3. エラーが検出されたら、Web ブラウザーとサーバーを停止します。
4. ブラウザーのキャッシュをクリアします。
5. Visual Studio に戻り、修正プログラムを適用します。 テストするすべての手順を繰り返します。

ASP.NET WebForms には実際の WYSIWYG がないため、実行またはデプロイ後、後のステージで一部のスタイルの問題が検出されます。 これで、Page Inspectorを使用して、ソリューションを実行せずに任意のページをプレビューできるようになりました。

このタスクでは、ページインスペクターを使用して、フォト ギャラリー アプリケーションのいくつかの問題を修正します。 次の手順では、ヘッダーの簡単なスタイル設定の問題を検出して迅速に修正します。

1. ページ検査を使用して、ヘッダーの左側にある [登録 ] リンクと [ログイン ] リンクを見つけます。

   右側の予想される場所にリンクが表示されないことに注意してください。 次に、リンクを右に揃え、それに応じてスタイルを再作成します。

   に

   左側に配置されたログイン リンク

2. [検査モードの切り替え] を選択した状態で、[ログイン] リンクを選択してそのコードを開きます。

   リンク ソース コードは、最初に見る可能性がある Default.aspx ページではなく、 Site.Master ファイルに配置されていることに注意してください。正しいソース ファイルに直接配置されています。

3. [スタイル] タブで、これらのリンクの <HTML コンテナーである項目#loginセクション>を見つけてクリックします。

   クリックすると、 #login スタイルが Site.css に自動的に配置されます。 さらに、コードが強調表示されるようになりました。

   

   CSS スタイルの選択

4. 強調表示されたコードの テキストアライン 属性のコメントを解除し、開始文字と終了文字を削除して Site.css ファイルを保存します。

   Page Inspectorは、現在のページを構成するすべての異なるファイルを認識しており、これらのファイルのいずれかがいつ変更されるかを検出できます。 ブラウザーの現在のページがソース ファイルと同期していない場合は常に警告されます。

5. Page Inspector ブラウザーで、アドレス バーの下にあるバーをクリックして変更を保存し、ページを再読み込みします。

   

   ページの再読み込み

   リンクは右側にありますが、箇条書きのように表示されます。 次に、行頭文字を削除し、リンクを水平方向に配置します。

   

   更新されたページ

6. 検査モードを使用して、[登録] リンクと [ログイン] リンクを含む li> 項目のいずれかを<選択します。 次に、項目#login<セクション>をクリックして Styles.css コードにアクセスします。

   

   スタイルの検索

7. Style.css で、li 項目のコードのコメント#login解除します。 追加するスタイルでは、行頭文字が非表示になり、項目が水平方向に表示されます。

   

   ログイン リンクのリスタイル設定

8. Style.css ファイルを保存し、アドレスの下にあるバーを 1 回クリックしてページを再読み込みします。 リンクが正しく表示されていることに注意してください。

   [Register]\(登録\) と [Log in]\(ログイン\)

   右側に配置されたリンク

9. 最後に、ヘッダーのタイトルを変更します。 すべてのファイルで "ここにロゴ" テキストを 検索する代わりに、検査モードを使用してテキストをクリックし、それを生成するソース コードにアクセスします。

   

   サイトタイトルの検索

10. Site.Master に移動したら、'ここでロゴ' テキストを 'フォト ギャラリー' に置き換えます。 Page Inspector ブラウザーを保存して更新します。

    

    フォト ギャラリーのページが更新されました

11. 最後に F5 キーを押してアプリを実行すると、すべての変更が期待どおりに機能チェック。

---

まとめ

このHands-On ラボを完了することで、ブラウザーで Web サイトを再構築して実行することなく、Page Inspectorを使用して Web アプリケーションをプレビューする方法を学習しました。 さらに、レンダリングされた出力からソース コードに直接アクセスしてバグをすばやく見つけて修正する方法も学習しました。

付録 A: Visual Studio Express 2012 for Web のインストール

Microsoft Web Platform Installerを使用して、Microsoft Visual Studio Express 2012 for Web または別の "Express" バージョンをインストールできます。 次の手順では、Microsoft Web Platform Installerを使用して Visual Studio Express 2012 for Web をインストールするために必要な手順について説明します。

1. [](https://go.microsoft.com/?linkid=9810169https://go.microsoft.com/?linkid=9810169) に移動します。 または、Web プラットフォーム インストーラーを既にインストールしている場合は、それを開き、製品 "Visual Studio Express 2012 for Web with Windows Azure SDK" を検索できます。

2. [ 今すぐインストール] をクリックします。 Web プラットフォーム インストーラーがない場合は、最初にダウンロードしてインストールするようにリダイレクトされます。

3. Web プラットフォーム インストーラーが開いたら、[インストール] をクリックしてセットアップを開始します。

   

   Visual Studio Expressのインストール

4. すべての製品のライセンスと使用条件を読み、[ 同意 する] をクリックして続行します。

   

   ライセンス条項に同意する

5. ダウンロードとインストールのプロセスが完了するまで待ちます。

   

   Installation progress

6. インストールが完了したら、[完了] をクリック します。

   

   インストールが完了しました

7. [ 終了 ] をクリックして Web プラットフォーム インストーラーを閉じます。

8. web 用Visual Studio Expressを開くには、[スタート] 画面に移動し、"VS Express" の書き込みを開始し、[VS Express for Web] タイルをクリックします。

   

   VS Express for Web タイル