除Console.log()外的Javascript調(diào)試命令有哪些-創(chuàng)新互聯(lián)

這篇文章主要介紹除Console.log()外的Javascript調(diào)試命令有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

在雞西梨樹(shù)等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專(zhuān)注、極致的服務(wù)理念，為客戶(hù)提供網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站 網(wǎng)站設(shè)計(jì)制作按需制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站建設(shè),營(yíng)銷(xiāo)型網(wǎng)站建設(shè),外貿(mào)網(wǎng)站制作,雞西梨樹(shù)網(wǎng)站建設(shè)費(fèi)用合理。

Console 對(duì)象提供對(duì)瀏覽器控制臺(tái)的接入（如：Firefox 的 Web Console）。不同瀏覽器上它的工作方式是不一樣的，但這里會(huì)介紹一些大都會(huì)提供的接口特性。

Console對(duì)象可以在任何全局對(duì)象中訪問(wèn)，如 Window，WorkerGlobalScope 以及通過(guò)屬性工作臺(tái)提供的特殊定義。
它被瀏覽器定義為 Window.Console，也可被簡(jiǎn)單的 Console 調(diào)用。

最常用的方法就是Console.log(),就是在控制臺(tái)輸出內(nèi)容。剛開(kāi)始學(xué)前端的時(shí)候看到大家都是用的Console.log(),幾乎沒(méi)有見(jiàn)過(guò)Console的其他用法，難道Console真的沒(méi)有別的用法了？查了一下后發(fā)現(xiàn)Console還是非常強(qiáng)大的，至于為什么很少看到有人用可能是因?yàn)橛眠^(guò)都刪掉了吧。在此記錄一下Console的其他用法。

注意：因?yàn)镃onsole 對(duì)象提供對(duì)瀏覽器控制臺(tái)的接入 所以在不同瀏覽器中的支持及表現(xiàn)形式可能不太一樣，但是調(diào)試內(nèi)容只有我們開(kāi)發(fā)者會(huì)看，所以保證開(kāi)發(fā)環(huán)境能用這些方法就可以了，下面演示全部都為Chrome上面的效果。

分類(lèi)輸出

不同類(lèi)別信息的輸出

console.log('文字信息');
console.info('提示信息');
console.warn('警告信息');
console.error('錯(cuò)誤信息');

分組輸出

使用Console.group()和Console.groupEnd()包裹分組內(nèi)容。

還可以使用Console.groupCollapsed()來(lái)代替Console.group()生成折疊的分組。

console.group('第一個(gè)組');
 console.log("1-1");
 console.log("1-2");
 console.log("1-3");
console.groupEnd();
console.group('第二個(gè)組');
 console.log("2-1");
 console.log("2-2");
 console.log("2-3");
console.groupEnd();

Console.group()還可以嵌套使用

console.group('第一個(gè)組');
 console.group("1-1");
  console.group("1-1-1");
   console.log('內(nèi)容');
  console.groupEnd();
 console.groupEnd();
 console.group("1-2");
  console.log('內(nèi)容');
  console.log('內(nèi)容');
  console.log('內(nèi)容');
 console.groupEnd();
console.groupEnd();
console.groupCollapsed('第二個(gè)組');
 console.group("2-1");
 console.groupEnd();
 console.group("2-2");
 console.groupEnd();
console.groupEnd();

表格輸出

使用console.table()可以將傳入的對(duì)象，或數(shù)組以表格形式輸出。適合排列整齊的元素

var Obj = {
 Obj1: {
  a: "aaa",
  b: "bbb",
  c: "ccc"
 },
 Obj2: {
  a: "aaa",
  b: "bbb",
  c: "ccc"
 },
 Obj3: {
  a: "aaa",
  b: "bbb",
  c: "ccc"
 },
 Obj4: {
  a: "aaa",
  b: "bbb",
  c: "ccc"
 }
}
console.table(Obj);
var Arr = [
 ["aa","bb","cc"],
 ["dd","ee","ff"],
 ["gg","hh","ii"],
]
console.table(Arr);

查看對(duì)象

使用Console.dir()顯示一個(gè)對(duì)象的所有屬性和方法
在Chrome中Console.dir()和Console.log()效果相同

var CodeDeer = {
 nema: 'CodeDeer',
 blog: 'www.xluos.com',
  
}
console.log("console.dir(CodeDeer)");
console.dir(CodeDeer);
console.log("console.log(CodeDeer)");
console.log(CodeDeer);

查看節(jié)點(diǎn)

使用Console.dirxml()顯示一個(gè)對(duì)象的所有屬性和方法

在Chrome中Console.dirxml()和Console.log()效果相同

百度首頁(yè)logo的節(jié)點(diǎn)信息

條件輸出

利用console.assert(),可以進(jìn)行條件輸出。

當(dāng)?shù)谝粋€(gè)參數(shù)或返回值為真時(shí)，不輸出內(nèi)容當(dāng)?shù)谝粋€(gè)參數(shù)或返回值為假時(shí)，輸出后面的內(nèi)容并拋出異常

console.assert(true, "你永遠(yuǎn)看不見(jiàn)我");
console.assert((function() { return true;})(), "你永遠(yuǎn)看不見(jiàn)我");
console.assert(false, "你看得見(jiàn)我");
console.assert((function() { return false;})(), "你看得見(jiàn)我");

計(jì)次輸出

使用Console.count()輸出內(nèi)容和被調(diào)用的次數(shù)

(function () {
 for(var i = 0; i < 3; i++){
  console.count("運(yùn)行次數(shù)：");
 }
})()

追蹤調(diào)用堆棧

使用Console.trace()來(lái)追蹤函數(shù)被調(diào)用的過(guò)程，在復(fù)雜項(xiàng)目時(shí)調(diào)用過(guò)程非常多，用這個(gè)命令來(lái)幫你縷清。

function add(a, b) {
 console.trace("Add function");
 return a + b;
}
function add3(a, b) {
 return add2(a, b);
}
function add2(a, b) {
 return add1(a, b);
}
function add1(a, b) {
 return add(a, b);
}
var x = add3(1, 1);

計(jì)時(shí)功能

使用Console.time()和Console.timeEnd()包裹需要計(jì)時(shí)的代碼片段，輸出運(yùn)行這段代碼的事件。

Console.time()中的參數(shù)作為計(jì)時(shí)器的標(biāo)識(shí)，具有唯一性。 Console.timeEnd()中的參數(shù)來(lái)結(jié)束此標(biāo)識(shí)的計(jì)時(shí)器，并以毫秒為單位返回運(yùn)行時(shí)間。最多同時(shí)運(yùn)行10000個(gè)計(jì)時(shí)器。

console.time("Chrome中循環(huán)1000次的時(shí)間");
for(var i = 0; i < 1000; i++)
{
}
console.timeEnd("Chrome中循環(huán)1000次的時(shí)間");

性能分析

使用Console.profile()和Console.profile()進(jìn)行性能分析，查看代碼各部分運(yùn)行消耗的時(shí)間，但是我在Chrome自帶的調(diào)試工具中并沒(méi)有找到在哪里查看這兩個(gè)方法生成的分析報(bào)告。應(yīng)該需要其他的調(diào)試工具。

有趣的Console.log()

最后再來(lái)介紹一下強(qiáng)大的Console.log(),這個(gè)方法有很多的用法（其他輸出方法的用法，如error()等，可以參照l(shuí)og()使用）。

一、提示輸出

可以再輸出的對(duì)象、變量前加上提示信息，增加辨識(shí)度

var ans = 12345;
console.log("這是臨時(shí)變量ans的值：",ans);

二、格式化輸出

占位符

含義 %s 字符串輸出 %d or %i 整數(shù)輸出 %f 浮點(diǎn)數(shù)輸出 %o 打印javascript對(duì)象，可以是整數(shù)、字符串以及JSON數(shù)據(jù)

樣例：

var arr = ["小明", "小紅"];
console.log("歡迎%s和%s兩位新同學(xué)",arr[0],arr[1]);
console.log("圓周率整數(shù)部分：%d，帶上小數(shù)是：%f",3.1415,3.1415);

三、自定義樣式

使用%c為打印內(nèi)容定義樣式,再輸出信息前加上%c，后面寫(xiě)上標(biāo)準(zhǔn)的css樣式，就可以為輸出的信息添加樣式了

console.log("%cMy stylish message", "color: red; font-style: italic");
console.log("%c3D Text", " text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");
console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');
console.log('%cMy name is classicemi.', 'color: #fff; background: #f40; font-size: 24px;');

以上是“除Console.log()外的Javascript調(diào)試命令有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前標(biāo)題：除Console.log()外的Javascript調(diào)試命令有哪些-創(chuàng)新互聯(lián)
標(biāo)題URL：http://muchs.cn/article38/dhdjpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)站維護(hù)、網(wǎng)站導(dǎo)航、網(wǎng)站策劃、網(wǎng)站收錄、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)