Visual Studio 2012による効果的なWeb開発：ページインスペクター

どのWebプロジェクトでも、古いページ、コントロール、ページレイアウト、レイアウトなどを変更するタスクがしばしば発生します。 プロジェクト内のページ数が少ない場合、Webプロジェクトの構造全体を覚えておくのは簡単です。 別のことは、そのようなページが何百もあり、テンプレート、マスターページ、コントロール、およびそれらに埋め込まれた他のコントロールに基づいて形成される場合です。



このような時々混乱するページレンダリングシステムを理解することは非常に困難です。 これは特に、複雑なプロジェクトに取り組み始めたばかりの専門家や、サポートのために古いプロジェクトを取得した専門家に当てはまります。



この問題に対処するために、 Visual Studio 2012には新しいページインスペクターツールが追加されました。これにより、Internet Explorer開発者ツールやFirebugなどのクライアント側での結果のマークアップとしてだけでなく、サーバー側でのコードバインドを使用して、プロジェクトのWebページを検査できますこのマークアップを生成します。

ページインスペクター

Visual Studio 2012を起動し、プロジェクトにWebアプリケーションをロードすると（MVC4に基づいて新しいプロジェクトを作成できます）、ツールバーにWebアプリケーションを起動するブラウザーを選択できる要素が表示されます（図1）。





図1 ブラウザを選択してWebアプリケーションを起動する



システムにインストールされているブラウザーのリストには、新しい要素のページインスペクターがあります。これにより、アプリケーションを実行して、どのブラウザーよりも詳細な調査を行うことができます。



リストで「ページインスペクター」を選択すると、実行するアプリケーションを実行できます。 ブラウザーの代わりに、開発環境UI内で起動されます（図2）。

発言。 Visual Studio 11のプレリリースバージョンでは、Page Inspectorを起動するには、1つのパラメーターを追加するために（自動）web.configファイルを変更する必要がありました。 Visual Studio 2012 RC以降では、この変更は必要ありません。

図2。 Page Inspectorを起動しました



このアプリケーションは、Webページを操作するための追加ツールを提供するVisual Studio 2012内で起動されたことに注意してください。



ページインスペクターの最も重要な機能は、たとえばInternet Explorerの開発者ツールと同様に、ページを検査する機能ですが、IEとは異なり、レイアウトとレイアウトに関する有用な情報とともに、このレイアウトの生成方法に関する情報も取得します。プロジェクト内で、どのファイルに、どのコードを使用して。



たとえば、「ログイン」行が「入力」行に置き換わるには、その行が生成される場所を見つける必要があります。 プロジェクトの複雑さに応じて、ページ上のさまざまなファイルのコンポーネントが多数存在する場合があります。 したがって、このプロジェクトには、レイアウトファイル、ページファイル、およびコントロールがあります。 適切な場所をすばやく見つけるには、時間がかかる場合があります。



ページインスペクターを使用すると、数分で必要なコードを見つけることができます。 [検査]をクリックして、[ログイン]行にカーソルを合わせます。 必要なファイル内のすべて、必要なコンポーネント内の必要なコードがすべてすぐに表示されます（図3）。





図3 ソースコード検索



コードを変更するだけです。 ページインスペクターはこれらの変更を自動的に維持し、ブラウザー内のページを更新するように提案します（図4）。





図4 ページ更新リクエスト



ページを更新したら、必ず正しい変更を行ってください（図5）。





図5 ページの行を変更しました

発言。 Visual Studio 2012 RCでは、開発環境のメインUIをブロックすることなく、すべてのページインスペクターの作業が非同期で行われるため、作業がさらに楽しくなります。

サーバーコード検査は非常に便利な機能です。 ページのレイアウトと構成を簡単に調べることができます。 たとえば、どのコードがサイトの地下を構築しているのかを判断しましょう。 これを行うには、その上にマウスを置くだけです（図6）。





図6 サイトの地下で作業する



ご覧のとおり、地下室を担当するすべてのコードがプロジェクトのサーバーコードで強調表示されているため、適切な場所で必要な変更をすばやく行うことができます。

ページテキストの操作

Visual Studio 11の中間バージョンと比較したPage Inspectorの革新の1つは、サーバーファイルコードでこのテキストを同期選択することでページ上のテキストを選択できるようにすることです（図7）。





図7 ページテキスト、選択の操作



これにより、特定のテキストに関連するコード内のセクションをすばやく選択し、特定のアクションを実行できます。

CSSワーク

HTMLとCSSを使用したページインスペクターでの作業は、開発者ツールやFirebugなどのツールでの作業に似ています。 ただし、ここでは、ページインスペクターには大きな利点があります。サーバー側のCSSファイルコードで、調べたページ要素に適用可能なすべてのスタイルを自動的に見つけることができます。



CSSスタイルを使用する場合、多くのファイルとスタイルが互いにオーバーライドするという問題もあります。 変更が必要なCSSファイルを見つける最も速い方法は何ですか？



たとえば、「Register」および「Login」という碑文の色（以前に変更された）をマークアップで使用されている色の1つ（赤？）に変更する必要があるとします。 インスペクターの助けを借りて、必要な要素を選択し、下からその要素に適用されるCSSスタイルを取得します。 [トレーススタイル]タブに移動すると、要素の最終的なスタイルがすべて表示されます（図8）。





図8 アイテムのスタイル



これまでのところ、すべてはFirebugと同じに見えます。 色に興味があるので、色要素を展開して最後の値に移動します。これにより、以前の値がすべて上書きされ、ページ上の要素に適用されます（図9）。





図9 スタイル値リスト



次のステップでは、ページインスペクターを特別なものにします。 スタイル定義のいずれかをクリックすると、この定義を生成したサーバー上のCSSファイルにすぐに移動します（図10）。





図10 サーバースタイルの定義を検索する



ページ上の要素に必要な色を指定するだけです。 新しいVisual Studio 2012（組み込みのカラーピッカー）のおかげで、これはさらに簡単になりました（図11）。





図11 CSSファイルで定義されている色のリストから色を選択します



ページインスペクターのリクエストに応じて、ページを更新し、変更が正常に行われたことを確認します。

HTMLワーク

効率を高めるために、ページインスペクターを使用すると、マークアップコードによってページ自体の結果ブロックを追跡できます（図12）。





図12 ページごとの追跡ブロック



この関数は、1つまたは別のマークアップコードがレンダリングされる場所を理解することに加えて、結果のサイズに関するデータも提供します。

おわりに

この記事では、クライアント側のWebアプリケーションマークアップコードを効率的に使用するためのVisual Studio 2012の最も興味深い革新の1つについて説明します。 FirebugやDeveloper Toolなどのツールとは異なり、Page Inspectorはサーバーコードに関するすべてを知っており、ページのこの部分がどこからどのようにどこから来たかを示し、サーバーコードに即座に適切な場所に転送します。