1. debugger;

正如我之前提到的，你可以使用“debugger;”語句在代碼中加入強(qiáng)制斷點(diǎn)。
需要斷點(diǎn)條件嗎？只需將它包裝它在IF子句中：

if (somethingHappens) {    debugger;}

只需記住在上線前移除。

2. 當(dāng)節(jié)點(diǎn)變化時(shí)斷開

有時(shí)DOM像有了自己的想法。當(dāng)不可思議的變化發(fā)生時(shí)很難找到問題的根源。
Chrome開發(fā)人員工有調(diào)試這個(gè)問題的超級(jí)有用技能。這就是所謂的“Break on…”，你可以通過在元素選項(xiàng)卡上右鍵DOM節(jié)點(diǎn)找到它。

斷點(diǎn)可以在節(jié)點(diǎn)被刪除后設(shè)置，當(dāng)節(jié)點(diǎn)的屬性更改或者其子樹中的節(jié)點(diǎn)變化時(shí)。

3. Ajax斷點(diǎn)

XHR斷點(diǎn)或我稱作的Ajax斷點(diǎn)，也允許當(dāng)一個(gè)預(yù)期Ajax請(qǐng)求創(chuàng)建時(shí)斷開。
當(dāng)調(diào)試你的web應(yīng)用的網(wǎng)絡(luò)時(shí)這是個(gè)讓人吃驚的工具。

4. 模擬不同的移動(dòng)設(shè)備

Chrome增加了內(nèi)置的移動(dòng)設(shè)備模擬工具，這將簡化你的日常工作。
選擇任何非Console的選項(xiàng)卡找到它們，按鍵盤上的esc鍵并選擇你想摸你的移動(dòng)設(shè)備。

你當(dāng)然不會(huì)得到一個(gè)真正的iPhone，但尺寸、觸摸事件和agemt都會(huì)為你效仿。

5. 通過審核提升你的站點(diǎn)

YSlow是個(gè)偉大的工具。Chrome也在開發(fā)人員工具下包含一個(gè)稱作Audits的類似工具。
使用快速審核一下你的網(wǎng)站，來獲得有用實(shí)際的優(yōu)化技巧。