Visual Studio 2012 - Page Inspector 功能(1)


HTML5 應用程式開發-從零開始》系列

Page Inspector 是 Visual Studio 2012 的全新功能,讓你可以不用離開開發環境,就能夠直接瀏覽檢視所設計的網頁內容,此功能是內建的,包含網頁內容異動的即時檢視,目前的主流瀏覽器中均已經提供了類似的功能,以 Chrome 為例,我們經常會開啟其控制台進行網頁的測試與原始碼檢視。


Page Inspector 可以讓你直接在編輯器當中開啟類似的偵測視窗進行網頁即時偵測,於網頁編輯區的任意位置按一下右鍵開啟選單,找到「檢視 Page Inspector」功能,按一下將其開啟。


接下來編輯區域會切割成兩個區塊,左邊是 Page Inspector 介面,右邊則是目前的編輯區域。


Page Inspector 介面本身切割成上下兩個區塊,上方的區塊是網頁在瀏覽器呈現的外觀,而下方則是原始碼與樣式編輯區域。

當你新建立一個 html 網頁,在預設的網頁架構下,除了必要的標籤 <body> 之外,主體的內容是標籤,由於沒有其它內容,因此在 Page Inspector 介面上半部呈現空白畫面,下半部進一步分成兩個區塊,左邊是網頁 DOM 結構巡覽與展示功能,右邊則是 CSS 樣式項目設定與檢視機制。

沒有留言: