Chrome的開發者工具是個很強大的東西，相信程序員們都不會陌生，不過有些小功能可能并不為大眾所知，所以，寫下這篇文章羅列一下可能你所不知道的功能，有的功能可能會比較實用，有的則不一定，也歡迎大家補充交流。
話不多話，我們開始。
有很多CSS/js的代碼都會被 minify 掉，你可以點擊代碼窗口左下角的那個 { } 標簽，chrome會幫你給格式化掉。
有些HTML的DOM是有狀態的，比如<a> 標簽，其會有 active，hover， focus，visited這些狀態，有時候，我們的CSS會來定關不同狀態的樣式，在分析網頁查看網頁上DOM的CSS樣式時，我們可以點擊CSS樣式上的 :hov 這個小按鈕來強制這個DOM的狀態。
現在的網頁上都會有一些動畫效果。在Chrome的開發者工具中，通過右上角的菜單中的 More Tools => Animations 呼出相關的選項卡。于是你就可以慢動作播放動畫了（可以點選 25% 或 10%），然后，Chrome還可以幫你把動畫錄下來，你可以拉動動再畫的過程，甚至可以做一些簡單的修改。
在你的 console 里 輸入下面的命令：
| 1 | document.designMode = "on" |
于是你就可以直接修改網頁上的內容了。
P.S. 下面這個抓屏中還演示了一個如何清空console的示例。你可以輸入 clear() 或是 按 Ctrl+L（Windows下），CMD + K (Mac下)
你可以設置你的網絡的訪問速度來模擬一個網絡很慢的情況。
這個是我很喜歡 的一個功能，你可以在 network選項卡里，點擊 XHR 過濾相關的Ajax請求，然后在相關的請求上點鼠標右鍵，在菜單中選擇： Copy => Copy as cURL，然后就可以到你的命令行下去 執行curl 的命令了。這個可以很容易做一些自動化的測試。
友情提示：這個操作有可能會把你的個人隱私信息復制出去，比如你個人登錄后的cookie。
這個可能有點無聊了，不過我覺得挺有意思的。
在device顯示中，先選擇一個手機，然后在右上角選 Show Device Frame，然后你就看到手機的樣子了，然后再到那個菜中中選 Capture snapshot，就可以抓下一個有手機樣子的截圖了。
我抓的圖如下（當然，不是所有的手機都有frame的）
除了給javascript的源代碼上設置斷點調試，你還可以：
選中一個DOM，然后在右鍵菜單中選 Break on … 你可以看到如下三個選項：
在 Sources 面頁中，你可以看到右邊的那堆break points中，除了上面我們說的給DOM設置斷點，你還可以給XHR和Event Listener設置斷點，載圖如下：
$("#mydiv")你還可使用 $$(".class") 來選擇所有滿足條件的DOM對象。你可以使用 getEventListeners($("selector")) 來查看某個DOM對象上的事件（如下圖所示）。
monitorEvents($("selector")) 來監控相關的事件。比如：| 1 | monitorEvents(document.body, "click"); |
1）monitor函數
使用 monitor函數來監控一函數，如下面的示例
2）copy函數
copy函數可以把一個變量的值copy到剪貼板上。
3）inspect函數
inspect函數可以讓你控制臺跳到你需要查看的對象上。如：
更多的函數請參數官方文檔 – Using the Console / Command Line Reference
我們知道，除了console.log之外，還有console.debug，console.info，console.warn，console.error這些不同級別的輸出。另外一個鮮為人知的功能是，console.log中，你還可以對輸出的文本加上css的樣式，如下所示：
| 1 | console.log("%c左耳朵", "font-size:90px;color:#888") |
于是，你可以定義一些相關的log函數，如：
| 123456 | console.todo = function( msg){ console.log( '%c%s %s %s', 'font-size:20px; color:yellow; background-color: blue;', '--', msg, '--');}console.important = function( msg){ console.log( '%c%s %s %s', 'font-size:20px; color:brown; font-weight: bold; text-decoration: underline;', '--', msg, '--');} |
關于console.log中的格式化，你可以參看如下表格：
| 指示符 | 輸出 |
| %s | 格式化輸出一個字符串變量。 |
| %i or %d | 格式化輸出一個整型變量的值。 |
| %f | 格式化輸出一個浮點數變量的值。 |
| %o | 格式化輸出一個DOM對象。 |
| %O | 格式化輸出一個Javascript對象。 |
| %c | 為后面的字符串加上CSS樣式 |
除了console.log打印js的數組，你還可以使用console.table來打印，如下所示：
| 1234567 | varpets = [ { animal: 'Horse', name: 'Pony', age: 23 }, { animal: 'Dog', name: 'Snoopy', age: 13 }, { animal: 'Cat', name: 'Tom', age: 18 }, { animal: 'Mouse', name: 'Jerry', age: 12}];console.table(pets) |
這些東西都可以看看Google的Console API的文檔。
其實，還有很多東西，你可以參看Google的官方文檔 – Chrome DevTools
點擊在 DevTools的右上角的那三個堅排的小點，你會看到一個菜單，點選 Shortcuts，你就可以看到所有的快捷鍵了
如果你知道更多，也歡迎補充！
（全文完）
Chrome的開發者工具是個很強大的東西，相信程序員們都不會陌生，不過有些小功能可能并不為大眾所知，所以，寫下這篇文章羅列一下可能你所不知道的功能，有的功能可能會比較實用，有的則不一定，也歡迎大家補充交流。
話不多話，我們開始。
有很多css/js的代碼都會被 minify 掉，你可以點擊代碼窗口左下角的那個 { } 標簽，chrome會幫你給格式化掉。
有些HTML的DOM是有狀態的，比如<a> 標簽，其會有 active，hover， focus，visited這些狀態，有時候，我們的CSS會來定關不同狀態的樣式，在分析網頁查看網頁上DOM的CSS樣式時，我們可以點擊CSS樣式上的 :hov 這個小按鈕來強制這個DOM的狀態。
現在的網頁上都會有一些動畫效果。在Chrome的開發者工具中，通過右上角的菜單中的 More Tools => Animations 呼出相關的選項卡。于是你就可以慢動作播放動畫了（可以點選 25% 或 10%），然后，Chrome還可以幫你把動畫錄下來，你可以拉動動再畫的過程，甚至可以做一些簡單的修改。
在你的 console 里 輸入下面的命令：
| 1 | document.designMode = "on" |
于是你就可以直接修改網頁上的內容了。
P.S. 下面這個抓屏中還演示了一個如何清空console的示例。你可以輸入 clear() 或是 按 Ctrl+L（Windows下），CMD + K (Mac下)
你可以設置你的網絡的訪問速度來模擬一個網絡很慢的情況。
這個是我很喜歡 的一個功能，你可以在 network選項卡里，點擊 XHR 過濾相關的Ajax請求，然后在相關的請求上點鼠標右鍵，在菜單中選擇： Copy => Copy as cURL，然后就可以到你的命令行下去 執行curl 的命令了。這個可以很容易做一些自動化的測試。
友情提示：這個操作有可能會把你的個人隱私信息復制出去，比如你個人登錄后的cookie。
這個可能有點無聊了，不過我覺得挺有意思的。
在device顯示中，先選擇一個手機，然后在右上角選 Show Device Frame，然后你就看到手機的樣子了，然后再到那個菜中中選 Capture snapshot，就可以抓下一個有手機樣子的截圖了。
我抓的圖如下（當然，不是所有的手機都有frame的）
除了給Javascript的源代碼上設置斷點調試，你還可以：
選中一個DOM，然后在右鍵菜單中選 Break on … 你可以看到如下三個選項：
在 Sources 面頁中，你可以看到右邊的那堆break points中，除了上面我們說的給DOM設置斷點，你還可以給XHR和Event Listener設置斷點，載圖如下：
$("#mydiv")你還可使用 $$(".class") 來選擇所有滿足條件的DOM對象。你可以使用 getEventListeners($("selector")) 來查看某個DOM對象上的事件（如下圖所示）。
monitorEvents($("selector")) 來監控相關的事件。比如：| 1 | monitorEvents(document.body, "click"); |
1）monitor函數
使用 monitor函數來監控一函數，如下面的示例
2）copy函數
copy函數可以把一個變量的值copy到剪貼板上。
3）inspect函數
inspect函數可以讓你控制臺跳到你需要查看的對象上。如：
更多的函數請參數官方文檔 – Using the Console / Command Line Reference
我們知道，除了console.log之外，還有console.debug，console.info，console.warn，console.error這些不同級別的輸出。另外一個鮮為人知的功能是，console.log中，你還可以對輸出的文本加上css的樣式，如下所示：
| 1 | console.log("%c左耳朵", "font-size:90px;color:#888") |
于是，你可以定義一些相關的log函數，如：
| 123456 | console.todo = function( msg){ console.log( '%c%s %s %s', 'font-size:20px; color:yellow; background-color: blue;', '--', msg, '--');}console.important = function( msg){ console.log( '%c%s %s %s', 'font-size:20px; color:brown; font-weight: bold; text-decoration: underline;', '--', msg, '--');} |
關于console.log中的格式化，你可以參看如下表格：
| 指示符 | 輸出 |
| %s | 格式化輸出一個字符串變量。 |
| %i or %d | 格式化輸出一個整型變量的值。 |
| %f | 格式化輸出一個浮點數變量的值。 |
| %o | 格式化輸出一個DOM對象。 |
| %O | 格式化輸出一個Javascript對象。 |
| %c | 為后面的字符串加上CSS樣式 |
除了console.log打印js的數組，你還可以使用console.table來打印，如下所示：
| 1234567 | varpets = [ { animal: 'Horse', name: 'Pony', age: 23 }, { animal: 'Dog', name: 'Snoopy', age: 13 }, { animal: 'Cat', name: 'Tom', age: 18 }, { animal: 'Mouse', name: 'Jerry', age: 12}];console.table(pets) |
這些東西都可以看看Google的Console API的文檔。
其實，還有很多東西，你可以參看Google的官方文檔 – Chrome DevTools
點擊在 DevTools的右上角的那三個堅排的小點，你會看到一個菜單，點選 Shortcuts，你就可以看到所有的快捷鍵了
如果你知道更多，也歡迎補充！
（全文完）
新聞熱點
疑難解答
