你不知道的Chrome DevTools（3）：隨意修改你的HTML

Web前端開發過程當中必然會用到Chrome瀏覽器自帶的開發者工具Chrome DevTools，使用它做爲Web前端開發性能調試的必備工具。就連隔壁的產品小哥都知道打開F12改一下頁面元素的標籤代碼就能看到頁面效果，這年頭誰不會用Chrome開發者工具呀。

可是Chrome能作的遠不止你日常用的那麼簡單，這一個小小的開發工具集成了不少高級的功能你未必知道。我打算把一些Chrome DevTools上使用的高級技巧寫成《你不知道的Chrome DevTools》這一系列的博文，但願你們一塊兒學習學習。

---

elements面板

使用Chrome開發工具中的elements面板估計是前端工程師修改一個頁面內容最快的方法了。elements面板的左側顯示頁面的HMTL元素，右側顯示選中元素的樣式。使用方法也很簡單，用左上角的「放大鏡」在頁面上選取元素，而後就能夠查看該元素的HTML屬性和CSS樣式了。

多種方法修改HTML

要修改頁面元素的HTML結構，其中通常涉及到：

• 修改HTML屬性
• 修改整個HTML的代碼
• 刪除節點
• 移動節點的位置

對於上述幾種要求，使用elements面板的時候都比較簡單直接。要修改HTML屬性，只須要在要修改的屬性上雙擊，就會進入輸入狀態，輸入你想要修改的屬性；要修改整個HTML代碼的時候，只須要在元素上右鍵-「Edit as HTML」便可；要刪除節點，能夠在選中元素後，按下delete快捷鍵，或者右鍵選擇「Delete node」;須要移動節點的位置的時候，只須要鼠標拖動選中的元素到你想要的位置便可。

值得一提的是右鍵菜單上的「Force element state」這個操做，就是強制設置該元素的狀態。狀態分爲四種，分別是active/hover/focus/visited。強制設置狀態在某些狀況下比較的有用，例如你想查看某些hover僞類的樣式，又例如元素裏有隱藏的元素，須要在鼠標hover的時候纔出現，但你的鼠標移開的時候hover狀態就消失了，強制顯示hover狀態比較方便你檢查元素hover的狀況。

另外，在調試的過程當中能夠給元素添加斷點。很神奇吧？如今支持的斷點的狀態有：元素的子節點結構改變時、元素的屬性改變時、元素被刪除時。在大型項目中，這一斷點比較有意思。大型項目中的HTML結構都比較宏大，並且腳本在改變HTML接口的時候你又難以跟蹤元素HTML的狀態。使用斷點，這些都不是問題。右鍵菜單中便可把這一功能呼喚出來。

多種方法修改CSS

elements面板的右側便是展現所選擇元素的css樣式的地方。然而右側不止是修改和展現css樣式的地方。實際上，右側包括瞭如下集中功能：

• 展現和修改CSS樣式
• 展現實際計算結果的樣式
• 顯示當前元素的事件監聽狀況
• 顯示當前元素包含的dom斷點
• 顯示當前元素的對象屬性

這些功能都在面板右側的tab上有顯示。另外，若是你有給Chrome開發工具安裝插件，那麼插件的功能區也會成爲一個新的tab顯示在後面。例如博主我就安裝了jQuery Audit和JS Runtime這兩個插件。

利用elements面板修改CSS樣式是很簡單的事情，但裏面也有一些小竅門能夠分享給你們。在CSS樣式的屬性值上，若是是數字的屬性值，則能夠經過按上下方向快捷鍵來給屬性值加一，經過按住shift鍵的同時按上下方向快捷鍵，能夠給屬性值遞增十。

一樣，在elements面板的樣式區域也能夠給元素強制設置狀態（active/hover/focus/visited）。作法和原理跟上面說的同樣。

總結

總而言之，經過Chrome開發工具的elements面板能夠很輕鬆地修改你的頁面。

寫在最後的話：本文基本上是在參考了Google的DevTools文檔以後，結合本身的經驗來寫的，目的是把文檔中說到的一些特別的方法介紹給你們，若是想多點了解，能夠到Google的DevTools文檔看看。致謝！

參考文獻

https://developers.google.com/chrome-developer-tools/?hl=zh-cn