静的 HTML ファイルで Visual Studio 2013 ブラウザーリンクを使うには

[アーティクル]
12/17/2013

前回のブログ投稿 “クロスブラウザのテストに Visual Studio 2013 のブラウザーリンクをどうぞ” でご紹介した Visual Studio 2013 のブラウザーリンク (Browser Link) は、既定では静的な HTML ファイル (*.html など) では有効になりません。しかし、Visual Studio で開発する Web アプリケーションとはいえ、静的 HTML ファイルを使うことがあると思います。そういった場合に、デバッグでブラウザーリンクが使用できると便利です。

実は、下記の設定を Web.config に記述することで、プロジェクト内の HTML ファイル (*.html) でブラウザーリンクを有効化できますのでお試しいただければと思います。

 <configuration>
  <system.webServer>    
    <handlers>
      <add name="Browser Link for HTML" path="*.html" verb="*" 
           type="System.Web.StaticFileHandler, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" 
           resourceType="File" preCondition="integratedMode" />
    </handlers>
  </system.webServer>    
</configuration>

※ 上記では、path=”*.html” となっていますが、ここを変更することで例えば *.htm などの拡張子でも有効化できます。

また、このブラウザーリンクは、CSS のスタイルを変更した場合でも、それを読み込んでいる HTML ページで有効ですので、CSS を修正しながらクロスブラウザーでの確認がとても簡単に行えます。

例えば、次のような merry.html をブラウザーリンクを使ってスタイル調整をするとします。