寫在前面
本文包括瀏覽器調(diào)試，不包括web移動(dòng)端調(diào)試。
本文調(diào)試均在chrome瀏覽器進(jìn)行

alert

這個(gè)不用多說(shuō)了，不言自明

console

基本輸出

想必大家都在用console.log在控制臺(tái)輸出點(diǎn)東西，其實(shí)console還有其它的方法：

console.log("打印字符串");//在控制臺(tái)打印自定義字符串 console.error("我是個(gè)錯(cuò)誤");//在控制臺(tái)打印自定義錯(cuò)誤信息 console.info("我是個(gè)信息");//在控制臺(tái)打印自定義信息 console.warn("我是個(gè)警告");//在控制臺(tái)打印自定義警告信息 console.debug("我是個(gè)調(diào)試");//在控制臺(tái)打印自定義調(diào)試信息 cosole.clear();//清空控制臺(tái)（這個(gè)下方截圖中沒(méi)有）

注意上面輸出的error和throw出的error不一樣，前者只是輸出錯(cuò)誤信息，無(wú)法捕獲，不會(huì)冒泡，更不會(huì)中止程序運(yùn)行。

格式化輸出

除此以外，console還支持自定義樣式和類似c語(yǔ)言的printf形式

console.log("%s年",2016);//%s表示字符串 console.log("%d年%d月",2016,11);//%d表示整數(shù) console.log("%f",3.1415926);//%f小數(shù) console.log("%o",console);//%o表示對(duì)象console.log("%c自定義樣式","font-size:30px;color:#00f"); console.log("%c我是%c自定義樣式","font-size:20px;color:green","font-size:10px;color:red");

<todo>

DOM輸出

下面幾個(gè)比較簡(jiǎn)單的，就不舉例子了，簡(jiǎn)單說(shuō)一下：

var ul = document.getElementsByTagName("ul"); console.dirxml(ul); //樹(shù)形輸出table節(jié)點(diǎn)，即<table>和它的innerHTML，由于document.getElementsByTagName是動(dòng)態(tài)的，所以這個(gè)得到的結(jié)果肯定是動(dòng)態(tài)的

對(duì)象輸出

var o = {name:"Lily",age: 18 }; console.dir(obj);//顯示對(duì)象自有屬性和方法

對(duì)于多個(gè)對(duì)象的集合，你可以這樣，輸出更清晰：

var stu = [{name:"Bob",age:13,hobby:"playing"},{name:"Lucy",age:14,hobby:"reading"},{name:"Jane",age:11,hobby:"shopping"}]; console.log(stu); console.table(stu);

成組輸出

//建立一個(gè)參數(shù)組 console.group("start"); //引號(hào)里是組名，自己起 console.log("sub1"); console.log("sub1"); console.log("sub1"); console.groupEnd();

函數(shù)計(jì)數(shù)和跟蹤

function fib(n){ //輸出前n個(gè)斐波那契數(shù)列值if(n == 0) return;console.count("調(diào)用次數(shù)");//放在函數(shù)里，每當(dāng)這句代碼運(yùn)行輸出所在函數(shù)執(zhí)行次數(shù)console.trace();//顯示函數(shù)調(diào)用軌跡(訪問(wèn)調(diào)用棧）var a = arguments[1] || 1;var b = arguments[2] || 1;console.log("fib=" + a);[a, b] = [b, a + b];fib(--n, a, b); } fib(6);

注：Chrome開(kāi)發(fā)者工具中的Sources標(biāo)簽頁(yè)也在Watch表達(dá)式下面顯示調(diào)用棧。

計(jì)時(shí)

console.time() //計(jì)時(shí)開(kāi)始 fib(100); //用上述函數(shù)計(jì)算100個(gè)斐波那契數(shù) console.timeEnd() //計(jì)時(shí)結(jié)束并輸出時(shí)長(zhǎng)

斷言語(yǔ)句，這個(gè)c++調(diào)試?yán)锩嬉步?jīng)常用到。js中，當(dāng)?shù)谝粋€(gè)表達(dá)式或參數(shù)為true時(shí)候什么也不發(fā)生，為false時(shí)終止程序并報(bào)錯(cuò)

console.assert(true, "我錯(cuò)了"); console.assert(false, "我真的錯(cuò)了");

性能分析

function F(){var i = 0;function f(){while(i++ == 1000);}function g(){while(i++ == 100000);}f();g(); } console.profile(); F(); console.profileEnd();

注：Chrome開(kāi)發(fā)者工具中的Audits標(biāo)簽頁(yè)也可以實(shí)現(xiàn)性能分析。

debugger

這個(gè)重量級(jí)的是博主最常用的，可能是c++出身，對(duì)于單步調(diào)試由衷的熱愛(ài)。單步調(diào)試就是點(diǎn)一下，執(zhí)行一句程序，并且可以查看當(dāng)前作用域可見(jiàn)的所有變量和值。而debugger就是告訴程序在那里停下來(lái)進(jìn)行單步調(diào)試，俗稱斷點(diǎn)。

右邊按鈕如下：

• Pause/Resume script execution：暫停/恢復(fù)腳本執(zhí)行（程序執(zhí)行到下一斷點(diǎn)停止）。
• Step over next function call：執(zhí)行到下一步的函數(shù)調(diào)用（跳到下一行）。
• Step into next function call：進(jìn)入當(dāng)前函數(shù)。
• Step out of current function：跳出當(dāng)前執(zhí)行函數(shù)。
• Deactive/Active all breakpoints：關(guān)閉/開(kāi)啟所有斷點(diǎn)（不會(huì)取消）。
• Pause on exceptions：異常情況自動(dòng)斷點(diǎn)設(shè)置。

其實(shí)右側(cè)還有很多強(qiáng)大的功能

• Watch：Watch表達(dá)式
• Call Stack: 棧中變量的調(diào)用，這里是遞歸調(diào)用，肯定是在內(nèi)存棧部分調(diào)用。
• Scope：當(dāng)前作用域變量觀察。
• BreakPoints：當(dāng)前斷點(diǎn)變量觀察。
• XHR BreakPoints：面向Ajax，專為異步而生的斷點(diǎn)調(diào)試功能。
• DOM BreakPoints：主要包括下列DOM斷點(diǎn)，注冊(cè)方式見(jiàn)下圖

當(dāng)節(jié)點(diǎn)屬性發(fā)生變化時(shí)斷點(diǎn)（Break on attributes modifications）

當(dāng)節(jié)點(diǎn)內(nèi)部子節(jié)點(diǎn)變化時(shí)斷點(diǎn)（Break on subtree modifications）

當(dāng)節(jié)點(diǎn)被移除時(shí)斷點(diǎn)（Break on node removal）

• Global Listeners：全局事件監(jiān)聽(tīng)
• Event Listener Breakpoints：事件監(jiān)聽(tīng)器斷點(diǎn)，列出了所有頁(yè)面及腳本事件，包括：鼠標(biāo)、鍵盤、動(dòng)畫、定時(shí)器、XHR等等。

chrome中的調(diào)試技巧

DOM元素的控制臺(tái)書簽

Chrome開(kāi)發(fā)者工具和Firebug都提供了書簽功能，用于顯示你在元素標(biāo)簽頁(yè)（Chrome）或HTML標(biāo)簽頁(yè)（Firebug）中最后點(diǎn)擊的DOM元素。如果你依次選擇了A元素、B元素和C元素，那么&dollar;0 表示C元素，&dollar;1 表示B元素，&dollar;2 表示A元素。（這個(gè)和正則表達(dá)式的&dollar;符號(hào)類似，不過(guò)順序不同）

如果你想調(diào)試f函數(shù)，用debug(f)語(yǔ)句可以增加這種斷點(diǎn)。

Sources標(biāo)簽頁(yè)左側(cè)面板上有一個(gè)代碼片段（Snippet）子標(biāo)簽頁(yè)，可用于保存代碼片段，幫你調(diào)試代碼。

可以用Chrome開(kāi)發(fā)者工具Sources標(biāo)簽頁(yè)中的格式化按鈕（Pretty Print Button）格式化壓縮后的代碼。

在Network面板，選擇一個(gè)資源文件，右鍵Copy Response可快速?gòu)?fù)制響應(yīng)內(nèi)容。

利用媒體查詢，這個(gè)主要是在Device Mode調(diào)節(jié)不同的分辨率顯示。

選擇Elements，按 Esc > Emulation > Sensors進(jìn)行傳感器模擬。

點(diǎn)擊漸入效果樣式圖標(biāo)（紫色圖標(biāo)），可以預(yù)覽動(dòng)畫效果，并可對(duì)相應(yīng)的貝塞爾曲線(cubic-bezier)進(jìn)行調(diào)節(jié)動(dòng)畫效果。

在Source中按住Alt鍵并拖動(dòng)鼠標(biāo)進(jìn)行多列內(nèi)容選擇。

Elements面板右鍵執(zhí)行DOM元素節(jié)點(diǎn)，選擇Force Element State或者點(diǎn)擊右側(cè)Toggle Element State圖標(biāo)可以出發(fā)偽類。

Network面板中選擇一張圖片，在右側(cè)圖片上鼠標(biāo)右鍵選擇copy it as a Data URI,就可以獲取圖片的Data URL (base64編碼)。

通過(guò)按住Ctrl鍵可以添加多個(gè)編輯光標(biāo)，同時(shí)對(duì)多處進(jìn)行編輯。按下Ctrl + U可以撤銷編輯。

Elements面板右側(cè)的Style編輯器中，點(diǎn)擊顏色十六進(jìn)制編碼前的小色塊，會(huì)彈出一個(gè)調(diào)色板。

按下Alt鍵并且鼠標(biāo)雙擊選擇DOM元素前面的箭頭，就會(huì)展開(kāi)該DOM元素下的所有字節(jié)點(diǎn)元素.

快捷鍵：

• 快速定位到行：快捷鍵Ctrl+O(Mac:CMD+O),輸入：行號(hào):列號(hào) 來(lái)進(jìn)行定位
• 元素搜索：快捷鍵Ctrl+F(Mac:CMD+F),試試在搜索欄輸入ID選擇符或者類選擇符就可以定位到元素啦

調(diào)試過(guò)程注意事項(xiàng)

1.避免記錄引用類型
當(dāng)記錄對(duì)象或數(shù)組時(shí)，永遠(yuǎn)記得你在記錄什么。記錄原始類型時(shí)，使用帶斷點(diǎn)的watch表達(dá)式。如果是異步代碼，避免記錄引用類型。

var arr = [{ num: 0 }]; setInterval(function(){ console.log(arr); arr[0].num += 1; }, 1000);

這里，第一個(gè)屬性中對(duì)象引用的值是不可靠的。當(dāng)你第一次在開(kāi)發(fā)者工具中顯示這個(gè)屬性時(shí)，num的值就已經(jīng)確定了。之后無(wú)論你對(duì)同一個(gè)引用重新打開(kāi)多少次都不會(huì)變化。

2.盡可能使用 source map。有時(shí)生產(chǎn)代碼不能使用source map，但不管怎樣，你都不應(yīng)該直接對(duì)生產(chǎn)代碼進(jìn)行調(diào)試。

總結(jié)

以上是生活随笔為你收集整理的一些Chrome 调试小技巧汇总的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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