使用DOM Explorer工具查看網頁的DOM狀態、檢查HTML結構和CSS樣式，並測試更改以解決顯示問題。這可以在元素位置錯誤或行為異常時幫助你診斷問題，然后解決問題。
DOM Explorer圖示：
左側窗口稱之為“元素窗格”， 它可以實時顯示當前創建的DOM，使用鼠標瀏覽它，單擊父元素旁的箭頭可將其展開用以查看子元素。
右側窗口稱之為“樣式窗格”，它提供了不同的視圖，用以查看元素應用了哪些樣式，以及元素關聯事件觸發了哪段代碼。
元素窗格
可以使用五種方法選擇要查看的元素：
通過元素窗格：使用鍵盤或鼠標直接在元素窗格中瀏覽元素。
選擇元素：單擊“選擇元素”工具，然后再網頁中點擊需要查看的元素，在元素窗格中會迅速跳轉至相應位置。
檢查元素：右鍵單擊網頁中需要查看的元素，選擇"檢查元素(Inspect element)"選項。
痕跡：BreadCrumb, 在元素窗格底部顯示的痕跡線索，可以單擊選擇需要查看的元素
搜索：在工具頂部的搜索框中輸入部分字符串或CSS選擇器來搜索DOM。
可以使用三種方法來編輯元素：
編輯屬性：雙擊需要編輯的屬性，通過選項卡瀏覽屬性進行編輯
添加屬性：右鍵單擊元素，選擇添加
作為HTML編輯：右鍵單擊元素，選擇“作為HTML編輯”，該元素及其子元素將在邊界框內顯示為純文本，按照你在文本編輯器中的方式編輯文本即可。
注意：不能在DOM Explorer中以HTML形式編輯doctype, html, head, body, script元素。同時對於更改的元素，可以使用CTRL+Z進行撤銷及CTRL+Y進行恢復更改。
可以采用兩種方法移動元素：
拖動DOM節點：直接在元素窗格中拖動元素至想要的任意位置即可。
剪切/復制和粘貼：使用右鍵或者鍵盤即可
注意：請勿使用上下文菜單中的“復制帶有樣式的元素”選項來移動DOM中的元素，它將包含該元素的HTML文檔及其所有相關樣式放置在剪切板上，以便粘貼到外部編輯器。
樣式窗格
樣式窗格有五個選項卡，接下來一一了解它們。
樣式(Style)：
應用到元素的所有樣式以及應用的樣式屬性列表。它將直接面向元素的樣式與繼承樣式分開，並識別繼承樣式來自哪些上級元素。它還可以根據CSS媒體查詢查找應用了哪些元素。它可以實時更新，因此，如果你執行了基於窗口寬度的媒體查詢，調整窗口大小將改變應用的樣式列表，這是因為匹配了不同的媒體查詢。
可以通過選中或取消選中屬性的左側的框來啟用或禁用樣式屬性。若要編輯規則名稱或屬性並單擊，同時也可以通過右鍵添加屬性或者規則：
已計算(Computed):
精確計算：所有沒有硬編碼度量值的屬性（如 calc()表達式，百分比，em單位）都在顯示時帶有為其計算的像素值。
隱式默認值：如下圖所示，在a:后面有一個圖標，可以選擇是否顯示所有樣式：
布局(Layout):
顯示用於選定元素定位的框模型圖表，采用的顏色與選定元素突出顯示的顏色相同，可以單擊圖表中的任意值進行編輯。
事件(Event):
顯示元素的DOM事件或者CSS選擇器，這些選擇器采用JavaScript方式分配給它們的處理程序，可以單擊文件名以在調試器中顯示文件：
改變(Changes):
由於在DOM Explorer中可以體驗不同的布局和樣式更改，很容易忘記你所更改的所有內容，此選項卡將顯示你在當前會話中，對DOM結構和CSS樣式進行的更改，原始值和當前值將使用不同的顏色突出顯示。
如果你不喜歡其中的某個更改，右鍵單擊選擇恢復項目以撤銷更改。
接下來回到元素窗格中，看下面這幅圖中的三個選項：
前面我們說過的“選擇元素”，它位於上圖中的從左向右第一個，用鼠標單擊它即可選擇網頁上的任意元素，而第二個回字形是高亮選中的元素在頁面的顯示，如下圖所示：
而第三個則是接下來需要介紹的顏色選取器，它使得我們在DOM Explorer中選取或捕獲顏色更加容易。
顏色選取器可以在兩種模式下運行：
單機模式：單擊DOM Explorer頂部的取色器圖標，在此模式下，可以使用鼠標突出顯示顏色值並復制它們用於代碼的其他位置。
集成模式：單擊樣式窗格中的樣式顏色旁邊的色塊，選擇某種顏色后，將替換原始顏色。
DOM Explorer到這里已經要告一段落了，一般對於UI測試的測試人員來說，用得最多的也是DOM Explorer，且對Web進行自動化測試代碼的編寫時，也需要使用它來獲取頁面元素值， 然后對其進行相應的驗證以及操作，因此，熟悉這一塊是很有必要的，所幸，要想了解這一塊，也是比較容易的。下一篇文章，將介紹控制台工具。