如何檢視和編輯版面配置

[DOM 總管] 的 [配置] 索引標籤會顯示選取的項目之 CSS 方塊模型 (英文)。您可以使用方塊模型的視覺化表示以快速識別屬性值。您也可以變更 [配置] 索引標籤中的任何值。您所做的變更不是永久變更。當您停止偵錯時，變更就會遺失。

提示

如果您不想停止偵錯工具，則可對原始程式碼進行變更然後重新整理應用程式，方法是使用 [偵錯] 工具列上的 [重新整理 Windows 應用程式] 按鈕。

若要使用 [DOM 總管] 以修改在方塊模型中不會顯示的配置部分，請參閱快速入門:偵錯應用程式 (JavaScript)和 如何檢查 CSS 規則。

檢視和編輯配置

在這個範例中，我們選取分割應用程式範本中的清單項目，解譯在 [配置] 索引標籤上的方塊模型值，然後變更其中一個屬性值。

檢視和編輯配置

1. 使用 Visual Studio 的分割應用程式專案範本，建立新的 使用 JavaScript 針對 Windows 建置的 Windows 市集應用程式。

2. 在 [偵錯] 工具列上，選取 [開始偵錯] 按鈕旁邊下拉式清單中的 [模擬器]。

   

3. 請按 F5 以偵錯模式執行應用程式。

   提示

   在應用程式出現於模擬器之後，將模擬器並排放在 Visual Studio 的旁邊。這可讓您立即看見您選擇的結果，以及您對 CSS 樣式所做的變更。

4. 切換至 Visual Studio，然後按一下 [DOM 總管] 中的 [選取項目] (或按 Ctrl + B)。這會變更選取模式，讓您可按一下項目加以選取，並使應用程式變成前景。此模式會在按一下之後還原。

   提示

   您也可以直接在 [DOM 總管] 中選取 HTML 元素。如需選取項目的詳細資訊，請參閱 快速入門:偵錯應用程式 (JavaScript)。

5. 在模擬器中，將滑鼠游標停留在首頁中的群組上，這樣群組影像和群組標題均會以色彩概述。對於這個示範，將滑鼠游標停留在第三個群組。概述的群組影像和標題會在此處顯示。

   

6. 按一下反白顯示的群組和影像加以選取。[DOM 總管] 會自動選取對應的 IMG 項目。在 [DOM 總管] 中選取的項目如下所示：

   <img class="item-image" id="_win_bind[idNumber]" alt="Group Title: 3" 
       src="data:image/png;base64, ..." data-win-bind=
       "src: backgroundImage; alt: title"></img>
   

7. 按一下 [配置] 索引標籤。此索引標籤會顯示選取之項目的維度，如下所示。

   

   此檢視提供關於項目的一些有用資訊：

   • 最內層方塊中項目的維度，通常會對應至 CSS 高度和寬度屬性。

   • [與邊框距離]、[框線] 和 [邊界] 方塊顯示 0 像素的值，表示可能未正確設定對應的 CSS 屬性。例如，可能未正確設定 CSS 左邊界、上邊界，右邊界及下邊界屬性。

   提示

   若要了解屬性如何套用，請按一下 [樣式] 索引標籤，查看 [繼承] 樣式底下的 [<div> 內嵌] 規則。您可以看見高度和寬度屬性是在此處設定。

8. 在 [配置] 索引標籤中，按兩下 [邊界] 方塊頂端的 [0px]。

9. 使用向上鍵將上邊界的值增加為 [10px] 然後按 ENTER。更新的邊界會顯示在模擬器中，以及內嵌規則底下的 [樣式] 索引標籤中。您也可以輸入新值，而不使用向上鍵或向下鍵。

請參閱

工作

如何檢視事件接聽程式

概念

快速入門:偵錯應用程式 (JavaScript)

如何檢查 CSS 規則