ASP .NET 4.5新功能預覽（下）
支援同步檢視網頁編輯結果的Page Inspector
使用舊版本的Visual Studio編輯網頁的內容時，必須將網頁編輯後的內容送至瀏覽器檢視才能夠看到編輯後的結果，這對修改網頁的樣式(例如字形、配色、與版面編排)，並不是很方便，因為修改網頁的樣式可能需要一而再，再而三，多次的修改之後，才能達到想要的結果。針對這個問題，Visual Studio 11提供了可以同步檢視網頁即時修改的結果的Page Inspector功能，不管程式設計師修改網頁的內容或樣式，都可以在Page Inspector同步檢視修改的結果，縮短反覆修改網頁內容付出的代價。

欲利用Page Inspector同步檢視網頁編輯的結果，你可以使用滑鼠的右鍵點選[方案總管]中的網頁檔案, 選擇[View In Page Inspector]功能，Visual Studio 11就會開啟Page Inspector供你同步檢視網頁編輯後的結果，如圖5所示：


▲ 圖5 利用Page Inspector同步檢視網頁編輯的結果的畫面。


你可以利用左下角的視窗的[Styles]頁籤編輯網頁用的CSS樣式內容，就可以立即在左上角的視窗看到修改樣式後的結果。你也可以利用中間視窗編輯網頁的內容，再按下CTRL+ALT+Enter組合鍵儲存修改的內容並於左上角的視窗中立即檢視修改後的結果。

支援利用多種瀏覽器瀏覽/偵錯網頁的功能
使用舊版本的Visual Studio開發網頁的時候預設會使用Microsoft Internet Explorer(IE)瀏覽器測試網頁的功能，要利用非IE的瀏覽器測試所開的網頁的功能是否正常會比較麻煩，不過Visual Studio 11已經改良了這個問題。新版的Visual Studio允許程式設計師使用Internet Explorer、Google Chrome、Opera、Page Inspector等瀏覽器來測試所開發的網頁的功能是否正確，程式設計師可以直接透過工具列選擇測試網頁用的瀏覽器，再按下F5功能鍵或是CTRL+F5組合鍵執行網頁，就可以利用指定的瀏覽器測試網頁的功能。圖6所示即為選擇測試網頁功能的瀏覽器的操作畫面：


▲ 圖6 利用工具列選擇測試網頁用的瀏覽器的情形。

電腦中必須預先安裝妥欲用來測試網頁功能的瀏覽器才能夠使用該瀏覽器測試網頁的功能。

使用Library Package Manager管理專案使用的套件
如果程式設計師開發網頁的時候需要用到外來的套件，例如jQuery、AJAX Control Toolkit、Modernizer、或log4net等套件來製作網頁的功能，就可以利用Visual Studio 11提供的Library Package Manager來安裝或更新專案使用的套件，特別是在需要使用jQuery這種由數個原始程式檔組成的Javascript函數庫的時候，使用Library Package Manager來安裝或更新jQuery Javascript檔案可以整批新增或整批移除專案使用的Javascript原始程式檔，讓你的工作事半功倍。

例如我們想要利用jQuery Javascript套件製作某個網頁的功能，你就可以執行[Tools | Library Package Manager | Manage NuGet Packages for Solution]功能，檢視可以安裝到專案的套件的清單，螢幕上就會出現如圖7的畫面：


▲ 圖7 管理專案使用的套件的操作畫面。


你可以點選左方視窗中[Online]項目底下的[All]項目檢視所有可以安裝到專案中的套件，於中間的視窗點選欲安裝到專案的套件，再點選欲安裝的套件右方的[Install]鍵執行安裝套件的動作，你就會看到如圖8的畫面，要求你勾選欲安裝此套件的專案：


▲ 圖8 要求勾選欲安裝此套件的專案的操作畫面。


勾選欲安裝此套件的專案之後請按下[OK]鍵，螢幕上就會出現安裝套件的畫面，安裝成功後你就可以在所安裝的套件的右方看到一個綠色的打勾符號，表示該套件已成功安裝到你的專案中。套件安裝成功後請按下[Close]鍵關閉管理套件的視窗。

程式設計師可以利用圖7的套件管理畫面移除專案不再使用的套件(例如舊版本的套件)。欲移除專案不再使用的套件，你可以執行[Tools | Library Package Manager | Manage NuGet Packages for Solution]功能，檢視可以安裝到專案的套件的清單，再點選左方視窗的[Installed Packages]項目底下的[All]項目，檢視所有已安裝到專案的套件，如圖9所示：


▲ 圖9 檢視所有已安裝到專案的套件的操作畫面。


請點選中間視窗中欲移除的套件，再點選套件右方的[Manage]鍵，執行管理專案安裝的套件的動作，螢幕上就會出現如圖10的操作畫面：


▲ 圖10 管理專案安裝的套件的操作畫面。


請清除欲移除指定的套件的專案名稱的勾選符號後按下[OK]鍵就可以將指定的套件從專案移除。做好之後請按下[Close]鍵關閉管理套件的畫面。

由於可以安裝到專案的套件眾多，讀者可以於圖7操作畫面右上角的[Search Online]搜尋欄位輸入關鍵字搜尋所需要的套件，例如圖11所示即為利用右上角的[Search Online]搜尋欄位輸入jQuery當做關鍵字搜尋jQuery相關套件的結果畫面：


▲ 圖11 搜尋jQuery相關套件的結果畫面。

結語
在這篇文章中我們為大家介紹了Visual Studio 11支援的超強網頁編輯功能，包括功能強大的HTML文件編輯器、Javascript程式編輯器、CSS樣式表編輯器，協助我們編輯HTML 5規格的文件和CSS 3的樣式表。除此之外，我們還介紹了可以支援同步檢視網頁編輯結果的Page Inspector功能，支援利用多種瀏覽器瀏覽/偵錯網頁的功能，以及好用的套件管理功能-Library Package Manager。



------作者簡介-----
王寧疆現服務於資策會數位教育研究所台北訓練中心，具有MCPD/MCT/MVP等資格。