web essentails 2013 靜態網頁如何開啟並使用design mode功能

Posted on Edited on In Views: Disqus:

 

於NuGet安裝好web essentials 2013後，一開始new 一個乾淨的靜態網頁Hello world專案，如圖

Alternate Text

發現在Browser Link dashboard裡為"0個連線"，也就是說沒辦法使用web essentials的design mode功能

，此時請在web.config檔的<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>

完成後如下圖

Alternate Text

儲存後再F5重新啟動，此時於dashboard已經可以看到1個連線到IE了，而網頁上也有出現Web Essentials功能

Alternate Text

這時候選擇design mode就可以

Alternate Text

在網頁及時編輯並自動回存檔案

Alternate Text

為了使用這功能，我撞牆了好幾次，這次終於搞成功了，enjor it!!

 

參考資料：

Hands On Lab: Visual Studio 2013 Web Tools