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>