谷歌瀏覽器審查編輯DOM元素

一.檢查元素:

開啟谷歌開發者工具Elements皮膚，下面會顯示對應網頁的DOM結構。

效果截圖如下：

點選箭頭可以展開摺疊的節點，並且可以對諸多元素進行編輯，以觀察網頁的效果。

上面是針對整個頁面，如果要專注於頁面中的某一個元素，可以使用谷歌開發者工具的檢查功能。

效果截圖如下：

要審查"ES2015詳細教程"，在其上右擊，選擇彈出選單中的"檢查"。

效果截圖如下：

皮膚高亮定位於對應的連結a元素之處。

二.跟蹤麵包屑：

在Elements皮膚的底部，有一個具有層級的麵包屑跟蹤功能。

截圖演示如下：

當前定語於li元素，那麼在底部，li會處於高亮狀態，點選不同的節點，可以實現定位功能。

三.編輯DOM節點和屬性：

點選節點或者屬性名稱，可以實現對節點的編輯功能:

上圖div這個節點處於可編輯狀態，編輯後，點選回車即可儲存。

右擊當前高亮節點，會彈出一個選單（點選左側紅框中的三個點可以實現相同的操作）。

點選彈出選單中的"Edit as HTML"可以實現HTML的編輯功能。

當然此選單還有很多操作，感興趣的朋友可以自行操作練習。

四.移動和刪除節點：

通過滑鼠拖動，可以將一個節點移動到指定位置。

在上面的圖片的彈出選單中選擇刪除功能，可以刪除當前節點。

五.設定DOM斷點：

切換到Elements選項卡，截圖如下：

下面進行斷點設定：

Elements皮膚右側有管理關於DOM斷點的選項卡視窗：

右側斷點列表和DOM元素可以如下簡單互動：

（1）.滑鼠懸浮於右側選項卡斷點列表的元素標識上，選在左側顯示出此元素對應位置。

（2）.點選右側選項卡斷點列表的元素標識上，會在左側選中對應元素。

（3）.選中或者取消選中核取方塊可以實現斷點禁用和啟用的切換。

當斷點觸發，對應斷點在DOM Breakpoints選項卡視窗突出顯示，Call Stack顯示偵錯程式暫停原因。

關於設定斷點的更多操作可以參閱谷歌瀏覽器設定斷點一章節。