miso_soup3 Blog

主に ASP.NET 関連について書いています。

Visual Studio Express 2012 for Web ページインスペクター

Visual Studio Advent Calendar 2012 の 12 日目の記事です。
前日の記事は、ishisaka さんのPython Tools for Visual StudioでDjangoのアプリケーションを作る です。

私からは、まだ経験は浅いですが、Visual Studio Express 2012 for Web のページインスペクター機能について、ASP.NET MVC での WEB 開発を例に紹介します。

Visual Studio Express 2012 for Web は、無料で入手することができます。

ページインスペクター in ASP.NET MVC

ページインスペクターは、2012 から新しく追加された機能です。
実際にブラウザで表示される画面と、ソースコードを照らし合わせることができます。

結論から言うと、@Html.Partial、@Html.Action、@helper、
カスタムルーティングを使っていても大丈夫です!すごい!

ページインスペクターの表示

ソリューションエクスプローラから、
照らし合わせたいビューの上で、右クリックし、
「Page Inspector で表示」を選択します。

すると、ブラウザでの表示とビューのコード、
CSS などの情報が表示されます。

左中ほどの「検査」をクリックして、左上のブラウザの表示エリアで
カーソルをあてると、右側では、対応するコードがハイライトされます。

上の画像では、「バージョン情報」のリンクと、
Html.ActionLink(...) が対応してハイライトされています。

他、開発者ツールと同じように、CSS も閲覧・編集できます。

対応する URL の設定

マスターページである _Layout.csHtml を選択して、
ページインスペクターを表示したらどうなるでしょうか?

おそらく最初は、下の様に、エラー画面が表示されます。

でも、左上の「ファイルの[参照先 URL]プロパティの設定」の欄に、
照らし合わせたいページの URL を入力し、「設定」ボタンを押すと・・・、


(画像の例は、http://localhost:50213/ を表示させたいので、"~/" と入力)

入力した URL のページと照らし合わせることができます。

これで、MVC のルーティングをカスタマイズしていても、
URL を設定すれば、対応するページと照らし合わせることができます。

先ほど入力した URL は、ビューのプロパティの値なので、
プロパティウィンドウから設定することもできます。


(_Layout.csHtml を右クリックし、プロパティをクリック)

@Html.Partial なども表示

例えば、About.csHtml に、@Html.Action("Input","Home") と、@Html.Partial("Contact")
を記述した場合に、ページインスペクターではどう表示されるでしょうか?

このように、部分ビューであってもちゃんと表示されます。

@Html.Action("Input","Home") の結果として出力された
「_input Html.Action」のテキストにカーソルをあてると、

右側に、部分ビューの _input.csHtml が対応して表示されます。

また、左下の「ファイル」タブをクリックすると、
関係のあるビューが一覧として表示されます。
@Html.Action("Input","Home") と、@Html.Partial("Contact") の参照先である、
_Input.csHtml と、Contact.csHtml が表示されています。

ちなみに、@helper でも照らし合わせてくれます。

コードの編集も可能

ページインスペクターを使用中であっても、
C# 側のコードを編集することができます。


(よくビューの指定を間違えるんです・・・)

編集すると、下の様に表示されますので、
クリックすると、再ビルドされます。

おしまい

Visual Studio Express 2012 for Web では、ページインスペクター以外にも
たくさんの新機能を利用することができます。


CSS のコメントが凄く丁寧に表示される・・・)

新機能の内容については、
ASP.NET 4.5 および Visual Studio 2012
に一覧があります。