Chrome的開發(fā)者工具是個(gè)很強(qiáng)大的東西，相信程序員們都不會(huì)陌生，不過有些小功能可能并不為大眾所知，所以，寫下這篇文章羅列一下可能你所不知道的功能，有的功能可能會(huì)比較實(shí)用，有的則不一定，也歡迎大家補(bǔ)充交流。

話不多話，我們開始。

代碼格式化

有很多css/js的代碼都會(huì)被 minify 掉，你可以點(diǎn)擊代碼窗口左下角的那個(gè)?{ }??標(biāo)簽，chrome會(huì)幫你給格式化掉。

強(qiáng)制DOM狀態(tài)

有些HTML的DOM是有狀態(tài)的，比如<a> 標(biāo)簽，其會(huì)有 active，hover， focus，visited這些狀態(tài)，有時(shí)候，我們的CSS會(huì)來定關(guān)不同狀態(tài)的樣式，在分析網(wǎng)頁查看網(wǎng)頁上DOM的CSS樣式時(shí)，我們可以點(diǎn)擊CSS樣式上的?:hov?這個(gè)小按鈕來強(qiáng)制這個(gè)DOM的狀態(tài)。

?

?

動(dòng)畫

現(xiàn)在的網(wǎng)頁上都會(huì)有一些動(dòng)畫效果。在Chrome的開發(fā)者工具中，通過右上角的菜單中的?More Tools?=>?Animations?呼出相關(guān)的選項(xiàng)卡。于是你就可以慢動(dòng)作播放動(dòng)畫了（可以點(diǎn)選?25%?或?10%），然后，Chrome還可以幫你把動(dòng)畫錄下來，你可以拉動(dòng)動(dòng)再畫的過程，甚至可以做一些簡單的修改。

?

直接編輯網(wǎng)頁

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

1	document.designMode =?"on"

于是你就可以直接修改網(wǎng)頁上的內(nèi)容了。

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

?

網(wǎng)絡(luò)限速

你可以設(shè)置你的網(wǎng)絡(luò)的訪問速度來模擬一個(gè)網(wǎng)絡(luò)很慢的情況。

?

復(fù)制HTTP請(qǐng)求

這個(gè)是我很喜歡 的一個(gè)功能，你可以在 network選項(xiàng)卡里，點(diǎn)擊 XHR 過濾相關(guān)的Ajax請(qǐng)求，然后在相關(guān)的請(qǐng)求上點(diǎn)鼠標(biāo)右鍵，在菜單中選擇：?Copy?=>?Copy as cURL，然后就可以到你的命令行下去 執(zhí)行?curl?的命令了。這個(gè)可以很容易做一些自動(dòng)化的測(cè)試。

?

友情提示：這個(gè)操作有可能會(huì)把你的個(gè)人隱私信息復(fù)制出去，比如你個(gè)人登錄后的cookie。

抓個(gè)帶手機(jī)的圖

這個(gè)可能有點(diǎn)無聊了，不過我覺得挺有意思的。

在device顯示中，先選擇一個(gè)手機(jī)，然后在右上角選?Show Device Frame，然后你就看到手機(jī)的樣子了，然后再到那個(gè)菜中中選 Capture snapshot，就可以抓下一個(gè)有手機(jī)樣子的截圖了。

我抓的圖如下（當(dāng)然，不是所有的手機(jī)都有frame的）

?

設(shè)置斷點(diǎn)

除了給Javascript的源代碼上設(shè)置斷點(diǎn)調(diào)試，你還可以：

給DOM設(shè)置斷點(diǎn)

選中一個(gè)DOM，然后在右鍵菜單中選 Break on … 你可以看到如下三個(gè)選項(xiàng)：

給XHR和Event Lisener設(shè)置斷點(diǎn)

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

關(guān)于Console中的技巧

DOM操作

• chrome會(huì)幫你buffer 5個(gè)你查看過的DOM對(duì)象，你可以直接在Console中用 $0, $1, $2, $3, $4來訪問。

• 你還可以使用像jQuery那樣的語法來獲得DOM對(duì)象，如：$("#mydiv")

• 你還可使用?$$(".class")?來選擇所有滿足條件的DOM對(duì)象。

• 你可以使用?getEventListeners($("selector"))?來查看某個(gè)DOM對(duì)象上的事件（如下圖所示）。

• 你還可以使用?monitorEvents($("selector"))?來監(jiān)控相關(guān)的事件。比如：

1	monitorEvents(document.body,?"click");

Console中的一些函數(shù)

1）monitor函數(shù)

使用 monitor函數(shù)來監(jiān)控一函數(shù)，如下面的示例

2）copy函數(shù)

copy函數(shù)可以把一個(gè)變量的值copy到剪貼板上。

3）inspect函數(shù)

inspect函數(shù)可以讓你控制臺(tái)跳到你需要查看的對(duì)象上。如：

更多的函數(shù)請(qǐng)參數(shù)官方文檔 –?Using the Console / Command Line Reference

Console的輸出

我們知道，除了console.log之外，還有console.debug，console.info，console.warn，console.error這些不同級(jí)別的輸出。另外一個(gè)鮮為人知的功能是，console.log中，你還可以對(duì)輸出的文本加上css的樣式，如下所示：

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

于是，你可以定義一些相關(guān)的log函數(shù)，如：

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,?'--'); }

關(guān)于console.log中的格式化，你可以參看如下表格：

指示符	輸出
%s	格式化輸出一個(gè)字符串變量。
%i or %d	格式化輸出一個(gè)整型變量的值。
%f	格式化輸出一個(gè)浮點(diǎn)數(shù)變量的值。
%o	格式化輸出一個(gè)DOM對(duì)象。
%O	格式化輸出一個(gè)Javascript對(duì)象。
%c	為后面的字符串加上CSS樣式

?

除了console.log打印js的數(shù)組，你還可以使用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)

?

關(guān)于console對(duì)象

• console對(duì)象除了上面的打日志的功能，其還有很多功能，比如：
• console.trace() 可以打出js的函數(shù)調(diào)用棧
• console.time() 和 console.timeEnd() 可以幫你計(jì)算一段代碼間消耗的時(shí)間。
• console.profile() 和 console.profileEnd() 可以讓你查看CPU的消耗。
• console.count() 可以讓你看到相同的日志當(dāng)前被打印的次數(shù)。
• console.assert(expression, object) 可以讓你assert一個(gè)表達(dá)式

這些東西都可以看看Google的Console API的文檔。

其實(shí)，還有很多東西，你可以參看Google的官方文檔 –?Chrome DevTools

關(guān)于快捷鍵

點(diǎn)擊在 DevTools的右上角的那三個(gè)堅(jiān)排的小點(diǎn)，你會(huì)看到一個(gè)菜單，點(diǎn)選?Shortcuts，你就可以看到所有的快捷鍵了

如果你知道更多，也歡迎補(bǔ)充！

（全文完）

from:?http://coolshell.cn/articles/17634.html

總結(jié)

以上是生活随笔為你收集整理的CHROME开发者工具的小技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。