1. debugger;

我以前也說過，你可以在JavaScript代碼中加入一句debugger;來手工造成一個(gè)斷點(diǎn)效果。
需要帶有條件的斷點(diǎn)嗎？你只需要用if語句包圍它：

代碼如下:

if (somethingHappens) {
 debugger;
}

但要記住在程序發(fā)布前刪掉它們。

2. 設(shè)置在DOM node發(fā)生變化時(shí)觸發(fā)斷點(diǎn)

有時(shí)候你會(huì)發(fā)現(xiàn)DOM不受你的控制，自己會(huì)發(fā)生一些奇怪的變化，讓你很難找出問題的根源。

谷歌瀏覽器的開發(fā)工具里有一個(gè)超級(jí)好用的功能，專門可以對(duì)付這種情況，叫做“Break on…”，你在DOM節(jié)點(diǎn)上右鍵，就能看到這個(gè)菜單項(xiàng)。

斷點(diǎn)的觸發(fā)條件可以設(shè)置成這個(gè)節(jié)點(diǎn)被刪除、節(jié)點(diǎn)的屬性有任何變化，或它的某個(gè)子節(jié)點(diǎn)有變化發(fā)生。

3. Ajax 斷點(diǎn)

XHR斷點(diǎn)，或Ajax斷點(diǎn)，就像它們的名字一樣，可以讓我們?cè)O(shè)置一個(gè)斷點(diǎn)，在特點(diǎn)的Ajax調(diào)用發(fā)生時(shí)觸發(fā)它們。

當(dāng)你在調(diào)試Web應(yīng)用的網(wǎng)絡(luò)傳輸時(shí)，這一招非常的有效。

4. 移動(dòng)設(shè)備模擬環(huán)境

谷歌瀏覽器里有一些非常有趣的模擬移動(dòng)設(shè)備的工具，幫助我們調(diào)試程序在移動(dòng)設(shè)備里的運(yùn)行情況。

找到它的方法是：按F12，調(diào)出開發(fā)者工具，然后按ESC鍵(當(dāng)前tab不能是Console)，你就會(huì)看到第二層調(diào)試窗口出現(xiàn)，里面的Emulation標(biāo)簽頁里有各種模擬設(shè)備可選。

當(dāng)然，這不會(huì)就變成了真正的iPhone，只是模擬了iPhone的尺寸，觸摸事件和瀏覽器User Agent值。

5. 使用Audits改進(jìn)你的網(wǎng)站

YSlow是一個(gè)非常棒的工具。谷歌瀏覽器的開發(fā)者工具里也有一個(gè)非常類似的工具，叫Audits。

它可快速的審計(jì)你的網(wǎng)站，給你提出非常實(shí)際有效的優(yōu)化你的網(wǎng)站的建議和方法。

總結(jié)：

本文以圖文的形式為大家介紹了JavaScript中5個(gè)debug調(diào)試技巧，相信很多小伙伴可以有了很多中的選擇，希望對(duì)你工作有所幫助！

相關(guān)推薦：
PHP中調(diào)試函數(shù)debug_backtrace的使用方法介紹

php debug 安裝技巧

php debug 調(diào)試工具

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com