Chrome的開發者工具是個很強大的東西，相信程式設計師們都不會陌生，不過有些小功能可能並不為大眾所知，所以，寫下這篇文章羅列一下可能你所不知道的功能，有的功能可能會比較實用，有的則不一定，也歡迎大家補充交流。

1.程式碼格式化

有很多css/js的程式碼都會被 minify 掉，你可以點選程式碼視窗左下角的那個 { } 標籤，chrome會幫你給格式化掉。

2.強制DOM狀態

有些HTML的DOM是有狀態的，比如<a> 標籤，其會有 active，hover， focus，visited這些狀態，有時候，我們的CSS會來定關不同狀態的樣式，在分析網頁檢視網頁上DOM的CSS樣式時，我們可以點選CSS樣式上的 :hov

3.動畫

4.直接網頁編輯

在你的 console 裡 輸入下面的命令：

document.designMode = "on"

於是你就可以直接修改網頁上的內容了。

P.S. 下面這個抓屏中還演示了一個如何清空console的示例。你可以輸入 clear() 或是 按 Ctrl+L（Windows下），CMD + K (Mac下)

5.網路限速

你可以設定你的網路的訪問速度來模擬一個網路很慢的情況。

6.複製HTTP請求

這個是我很喜歡 的一個功能，你可以在 network選項卡里，點選 XHR 過濾相關的Ajax請求，然後在相關的請求上點滑鼠右鍵，在選單中選擇： Copy

友情提示：這個操作有可能會把你的個人隱私資訊複製出去，比如你個人登入後的cookie。

7.設定斷點

除了給Javascript的原始碼上設定斷點除錯，你還可以：

給DOM設定斷點，選中一個DOM，然後在右鍵選單中選 Break on … 你可以看到如下三個選項：

給XHR和Event Lisener設定斷點

在 Sources 面頁中，你可以看到右邊的那堆break points中，除了上面我們說的給DOM設定斷點，你還可以給XHR和Event Listener設定斷點，載圖如下：