Chrome瀏覽器控制臺(tái)console使用詳解
Chrome自帶的開(kāi)發(fā)者工具提供了強(qiáng)大的調(diào)試系統(tǒng),除了可以用來(lái)查看DOM tree結(jié)構(gòu)、CSS樣式調(diào)試、動(dòng)畫(huà)調(diào)試和JS代碼斷點(diǎn)調(diào)試等。今天不聊別的,就聊聊使用console調(diào)試那些事兒。
在使用React、Vue等需要編譯語(yǔ)法的前端框架開(kāi)發(fā)時(shí),前端調(diào)試已經(jīng)變得不那么容易,除了使用React Dev Tools,Vue Dev Tools和Redux Dev Tools等Chrome插件,就是一堆的 console.log() 來(lái)打印我們需要看到的變量,雖然也有用,但是比較單一,要調(diào)試復(fù)雜數(shù)據(jù)需要多次輸出比較才行。
如果你平時(shí)只是用console.log()來(lái)輸出一些變量的值,那你肯定還沒(méi)有用過(guò)console的強(qiáng)大的功能。下面帶你用console玩玩花式調(diào)試。
console主要函數(shù)
我們先在Chrome上看看console對(duì)象都有哪些屬性和函數(shù)(博主用的Chrome版本是: 版本 60.0.3112.90(正式版本) (64 位))。
看了才知道,除了log方法,console還有很多其他的方法。
下面,我們從一些來(lái)看下主要的調(diào)試函數(shù)及用法。
console.log(), console.error(), console.warn(), console.info()
最基本也是最常用的用法了,分別表示輸出普通信息、錯(cuò)誤信息、警示信息和提示性信息,且error和warn方法有特定的圖標(biāo)和顏色標(biāo)識(shí)。
console.assert(expression, message)
參數(shù):
expression: 條件語(yǔ)句,語(yǔ)句會(huì)被解析成 Boolean,且為 false 的時(shí)候會(huì)觸發(fā)message語(yǔ)句輸出
message: 輸出語(yǔ)句,可以是任意類(lèi)型
該函數(shù)會(huì)在 expression 為 false 的時(shí)候,在控制臺(tái)輸出一段語(yǔ)句,輸出的內(nèi)容就是傳入的第二個(gè)參數(shù) message 的內(nèi)容。當(dāng)我們?cè)谥恍枰谔囟ǖ那闆r下才輸出語(yǔ)句的時(shí)候,可以使用 console.assert。
示例如下:
function greaterThan(a,b) { console.assert(a > b, {"message":"a is not greater than b","a":a,"b":b}); } greaterThan(5,6);
console.count(label)
參數(shù):
label: 計(jì)算數(shù)量的標(biāo)識(shí)符
該函數(shù)用于計(jì)算并輸出特定標(biāo)識(shí)符為參數(shù)的console.count函數(shù)被調(diào)用的次數(shù)。下面的例子更能直觀的了解:
function login(name) { console.count(name + ' logged in'); }
console.dir(object)
參數(shù):
object:被輸出扎實(shí)的對(duì)象
該函數(shù)用于打印出對(duì)象的詳細(xì)的屬性、函數(shù)及表達(dá)式等信息。如果該對(duì)象已經(jīng)被記錄為一個(gè)HTML元素,則該HTML元素的DOM表達(dá)式的屬性會(huì)被像下面這樣打印出來(lái):
console.dir(document.body);
console.dirxml(object)
該函數(shù)將打印輸出XML元素及其子孫后代元素,且對(duì)HTML和XML元素調(diào)用 console.dirxml() 和 調(diào)用 console.log() 是等價(jià)的。
console.group([label]), console.groupEnd([label])
參數(shù):
label: group分組的標(biāo)識(shí)符
在控制臺(tái)創(chuàng)建一個(gè)新的分組,隨后輸出到控制臺(tái)上的內(nèi)容都會(huì)自動(dòng)添加一個(gè)縮進(jìn),表示該內(nèi)容屬于當(dāng)前分組,知道調(diào)用 console.groupEnd() 之后,當(dāng)前分組結(jié)束。
舉個(gè)例子:
console.log("This is the outer level"); console.group(); console.log("Level 2"); console.group(); console.log("Level 3"); console.warn("More of level 3"); console.groupEnd(); console.log("Back to level 2"); console.groupEnd(); console.log("Back to the outer level");
console.groupCollapsed(label)
該函數(shù)同console.group(),唯一的區(qū)別是該函數(shù)的輸出默認(rèn)不展開(kāi)分組,而console.group()是默認(rèn)展開(kāi)分組。
console.time([label]), console.timeEnd([label])
label: 用于標(biāo)記計(jì)時(shí)器的名稱(chēng),不填的話,默認(rèn)為 default
console.time() 會(huì)開(kāi)始一個(gè)計(jì)時(shí)器,并當(dāng)執(zhí)行到 console.timeEnd() 函數(shù)時(shí)(需要兩個(gè)函數(shù)的lable參數(shù)相同),結(jié)束計(jì)時(shí)器,并將計(jì)時(shí)器的總時(shí)間輸出到控制臺(tái)上。
再舉幾個(gè)例子:
console.time(); var arr = new Array(10000); for (var i = 0; i < arr.length; i++) { arr[i] = new Object(); } console.timeEnd(); // default: 3.696044921875ms
對(duì) console.time(label) 設(shè)置一個(gè)自定義的 label 字段,并使用console.timeEnd(label) 設(shè)置相同的 label 字段來(lái)結(jié)束計(jì)時(shí)器。
console.time('total'); var arr = new Array(10000); for (var i = 0; i < arr.length; i++) { arr[i] = new Object(); } console.timeEnd('total'); // total: 3.696044921875ms
設(shè)置多個(gè) label 屬性,開(kāi)啟多個(gè)計(jì)時(shí)器同步計(jì)時(shí)。
console.time('total'); console.time('init arr'); var arr = new Array(10000); console.timeEnd('init arr'); for (var i = 0; i < arr.length; i++) { arr[i] = new Object(); } console.timeEnd('total'); // init arr: 0.0546875ms // total: 2.5419921875ms
console.trace(object)
該函數(shù)將在控制臺(tái)打印出從 console.trace() 被調(diào)用的位置開(kāi)始的堆棧信息。
本文只是單獨(dú)講解了Chrome自帶的開(kāi)發(fā)者工具(Chrome Dev Tools)的控制臺(tái)功能與用法,下面這篇文章講解了Chrome自帶的開(kāi)發(fā)者工具(Chrome Dev Tools)的其它功能與用戶有興趣的可以看看
Chrome開(kāi)發(fā)者工具9個(gè)調(diào)試技巧詳解://www.dbjr.com.cn/article/147438.htm
相關(guān)文章
什么是網(wǎng)頁(yè)安全色與216網(wǎng)頁(yè)安全色
什么是網(wǎng)頁(yè)安全色與216網(wǎng)頁(yè)安全色...2007-03-03不需要視頻服務(wù)器,同樣可以在線播放,F(xiàn)LV制作方法
不需要視頻服務(wù)器,同樣可以在線播放,F(xiàn)LV制作方法...2007-01-01驗(yàn)證可通過(guò)正版驗(yàn)證的Office2007最新的兩個(gè)序列號(hào)
驗(yàn)證可通過(guò)正版驗(yàn)證的Office2007最新的兩個(gè)序列號(hào)...2007-12-12pt px 的概念 與 對(duì)應(yīng)關(guān)系
pt px 的概念 與 對(duì)應(yīng)關(guān)系...2007-03-03