いろいろ備忘録日記

主に .NET と Python絡みのメモを公開しています。

Visual Studio 2012のPage Inspectorがすごく便利 (ページインスペクタ)

久しぶりのブログ更新。


Visual Studio 2012から追加されたPage Inspectorがとても便利だったのでメモメモ。
これを利用すると、VS上で現在開発中のページをその場で確認しながらさくさく開発できます。


やり方はすごく簡単です。
Webの画面を開発しているとします。
とりあえず、以下のような画面を作っていたとします。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="PageInspectorSample.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Page Inspector便利</title>
  <link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
  <div class="container">
    <form id="frmMain" runat="server">
      <div class="navbar">
        <div class="navbar-inner">
          <a class="brand" href="#">Example</a>
          <ul class="nav">
            <li class="active"><a href="#">aaa</a></li>
            <li><a href="#">bbb</a></li>
          </ul>
        </div>
      </div>
      <div class="row">
        <div class="span6">
          <h2>左側</h2>
          <p>hogehogehoge</p>
          <asp:Button ID="Button1" runat="server" Text="Button" CssClass="btn-primary btn-large" />
        </div>
        <div class="span6">
          <h2>右側</h2>
          <p>hehehehehe</p>
          <asp:Button ID="Button2" runat="server" Text="Button" CssClass="btn-danger btn-large" />
        </div>
      </div>
    </form>
  </div> 
  <script src="Scripts/jquery-1.9.0.min.js"></script>
  <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>


上記の画面をVisualStudio上で見ると、こんな感じ。

デザインビューの方、崩れまくってますね・・・いつものことですが。
ちゃんと出来ているかどうかは、ブラウザ起動して確認しないといけません。


ここでPage Inspectorを表示してみます。
Page Inspectorを表示するには

  • Ctrl+k, Ctrl+gを押す
  • エディタ上で右クリックして、「Page Inspectorで表示」を選択

のどちらかで表示できます。


表示すると以下のようになります。

いい感じに表示されています。
ボタンなどもそのまま押せます。


もちろん、要素の検査やサイズなども表示されます。

検査を行う場合は、Page Inspectorウィンドウ中央あたりの「検査」ボタンをクリックして
調べたい要素の上にマウスポイントを持ってきます。


検査している時、ちゃんとエディタやデザインビューとも連携してくれています。


最終的に、ブラウザでちゃんと確認することはもちろん必要ですが
開発中、各要素を調べながら実装しているときにすごく便利です。


================================
過去の記事については、以下のページからご参照下さい。

サンプルコードは、以下の場所で公開しています。