CHROME開發者工具的小技巧(轉載)

原文地址 https://coolshell.cn/articles/17634.html/comment-page-1#comments
Chrome的開發者工具是個很強大的東西，相信程序員們都不會陌生，不過有些小功能可能並不爲大衆所知，因此，寫下這篇文章羅列一下可能你所不知道的功能，有的功能可能會比較實用，有的則不必定，也歡迎你們補充交流。

話很少話，咱們開始。

代碼格式化
有不少css/js的代碼都會被 minify 掉，你能夠點擊代碼窗口左下角的那個 { } 標籤，chrome會幫你給格式化掉。

強制DOM狀態
有些HTML的DOM是有狀態的，好比 標籤，其會有 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下)

網絡限速
你能夠設置你的網絡的訪問速度來模擬一個網絡很慢的狀況。

複製HTTP請求
這個是我很喜歡 的一個功能，你能夠在 network選項卡里，點擊 XHR 過濾相關的Ajax請求，而後在相關的請求上點鼠標右鍵，在菜單中選擇： Copy => Copy as cURL，而後就能夠到你的命令行下去 執行 curl 的命令了。這個能夠很容易作一些自動化的測試。

友情提示：這個操做有可能會把你的我的隱私信息複製出去，好比你我的登陸後的cookie。

抓個帶手機的圖
這個可能有點無聊了，不過我以爲挺有意思的。

在device顯示中，先選擇一個手機，而後在右上角選 Show Device Frame，而後你就看到手機的樣子了，而後再到那個菜中中選 Capture snapshot，就能夠抓下一個有手機樣子的截圖了。

我抓的圖以下（固然，不是全部的手機都有frame的）

設置斷點
除了給Javascript的源代碼上設置斷點調試，你還能夠：

給DOM設置斷點
選中一個DOM，而後在右鍵菜單中選 Break on … 你能夠看到以下三個選項：

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

關於Console中的技巧
DOM操做
chrome會幫你buffer 5個你查看過的DOM對象，你能夠直接在Console中用 $0, $1, $2, $3, $4來訪問。
你還可使用像jQuery那樣的語法來得到DOM對象，如：$("#mydiv")
你還可以使用 $$(".class") 來選擇全部知足條件的DOM對象。
你可使用 getEventListeners($("selector")) 來查看某個DOM對象上的事件（以下圖所示）。

你還可使用 monitorEvents($("selector")) 來監控相關的事件。好比：
1
monitorEvents(document.body, "click");

Console中的一些函數
1）monitor函數

使用 monitor函數來監控一函數，以下面的示例

2）copy函數

copy函數能夠把一個變量的值copy到剪貼板上。

3）inspect函數

inspect函數可讓你控制檯跳到你須要查看的對象上。如：

更多的函數請參數官方文檔 – Using the Console / Command Line Reference

Console的輸出
咱們知道，除了console.log以外，還有console.debug，console.info，console.warn，console.error這些不一樣級別的輸出。另一個不爲人知的功能是，console.log中，你還能夠對輸出的文本加上css的樣式，以下所示：

1
console.log("%c左耳朵", "font-size:90px;color:#888")

因而，你能夠定義一些相關的log函數，如：

1
2
3
4
5
6
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來打印，以下所示：

1
2
3
4
5
6
7
var pets = [
{ 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)

關於console對象
console對象除了上面的打日誌的功能，其還有不少功能，好比：
console.trace() 能夠打出js的函數調用棧
console.time() 和 console.timeEnd() 能夠幫你計算一段代碼間消耗的時間。
console.profile() 和 console.profileEnd() 可讓你查看CPU的消耗。
console.count() 可讓你看到相同的日誌當前被打印的次數。
console.assert(expression, object) 可讓你assert一個表達式
這些東西均可以看看Google的Console API的文檔。

其實，還有不少東西，你能夠參看Google的官方文檔 – Chrome DevTools

關於快捷鍵
點擊在 DevTools的右上角的那三個堅排的小點，你會看到一個菜單，點選 Shortcuts，你就能夠看到全部的快捷鍵了

若是你知道更多，也歡迎補充！

（全文完）