JavaScript的console命令使用實(shí)例
這篇文章主要介紹了javascript的console命令使用實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
1.分類輸出
console.log('文字信息');
console.info('提示信息');
console.warn('警告信息');
console.error('錯(cuò)誤信息');

2.分組輸出
console.group('1');
console.log("1-1");
console.log("1-2");
console.groupEnd();
console.group('2');
console.log("2-1");
console.log("2-2");
console.groupEnd();

生成折疊的分組
console.group('1');
console.log("1-1");
console.log("1-2");
console.groupEnd();
console.group('2');
console.log("2-1");
console.log("2-2");
console.groupEnd();

嵌套
console.group('1');
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.groupEnd();
console.groupEnd();
console.groupCollapsed('2');
console.group("2-1");
console.log('內(nèi)容');
console.groupEnd();
console.group("2-2");
console.groupEnd();
console.groupEnd();

3.表格輸出
console.table()將傳入的對(duì)象,或數(shù)組以表格形式輸出
var Obj = {
Obj1: {
a: "a1",
b: "b1",
c: "c1"
},
Obj2: {
a: "a2",
b: "b2",
c: "c2"
},
Obj3: {
a: "a3",
b: "b3",
c: "c3"
}
}
console.table(Obj);

var Arr = [ ["a1","b1","c1"], ["a2","b2","c2"], ["a3","b3","c3"], ] console.table(Arr);

4.查看對(duì)象
顯示一個(gè)對(duì)象的所有屬性和方法Console.dir()和Console.log()相同
var ss = {
name: 'AA',
title: 'title1',
}
console.log("console.dir(ss)");
console.dir(ss);
console.log("console.log(ss)");
console.log(ss);

5.查看節(jié)點(diǎn)
Console.dirxml()顯示一個(gè)對(duì)象的所有屬性和方法
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flowchart</title>
<meta charset="UTF-8">
</head>
<body>
<div id="sample">
<div style="width: 100%; display: flex; justify-content: space-between">
<div id="myPaletteDiv" style="width: 150px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black"></div>
<div id="myDiagramDiv" style="flex-grow: 1; height: 720px; border: solid 1px black"></div>
</div>
</div>
</body>
</html>
<script>
console.log("console.dirxml");
console.dirxml(document.getElementById("sample"));
console.log("console.log");
console.log(document.getElementById("sample"));
</script>

6.條件輸出
- 當(dāng)?shù)谝粋€(gè)參數(shù)或返回值為真時(shí),不輸出內(nèi)容
- 當(dāng)?shù)谝粋€(gè)參數(shù)或返回值為假時(shí),輸出后面的內(nèi)容并拋出異常
console.assert(true, "see");
console.assert((function() { return true;})(), "see");
console.assert(false, "not see");
console.assert((function() { return false;})(), "not see");

7.記次輸出
輸出內(nèi)容和被調(diào)用的次數(shù)
(function () {
for(var i = 0; i < 5; i++){
console.count("運(yùn)行次數(shù):");
}
})()

8.追蹤調(diào)用堆棧
function add(a, b) {
console.trace("Add");
return a + b;
}
function add2(a, b) {
return add1(a, b);
}
function add1(a, b) {
return add(a, b);
}
var x = add2(1, 1);

9.計(jì)時(shí)
- Console.time()中的參數(shù)作為計(jì)時(shí)器的標(biāo)識(shí),具有唯一性
- Console.timeEnd()中的參數(shù)來結(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í)間");

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- .NET?Core控制臺(tái)應(yīng)用ConsoleApp讀取appsettings.json配置文件
- vue-cli3在main.js中console.log()會(huì)報(bào)錯(cuò)的解決
- 如何使用JS console.log()技巧提高工作效率
- Node.js中console.log()輸出彩色字體的方法示例
- js中console在一行內(nèi)打印字符串和對(duì)象的方法
- js console.log打印對(duì)象時(shí)屬性缺失的解決方法
- JavaScript查看代碼運(yùn)行效率console.time()與console.timeEnd()用法
- js 中的console使用示例詳解
相關(guān)文章
JavaScript實(shí)現(xiàn)定時(shí)任務(wù)隊(duì)列的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)一個(gè)基于一定時(shí)間間隔連續(xù)執(zhí)行任務(wù)隊(duì)列的功能,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考下2023-11-11
原生JS 實(shí)現(xiàn)的input輸入時(shí)表格過濾操作示例
這篇文章主要介紹了原生JS 實(shí)現(xiàn)的input輸入時(shí)表格過濾操作,結(jié)合實(shí)例形式分析了JavaScript基于頁(yè)面元素遍歷、運(yùn)算、判斷實(shí)現(xiàn)的表格過濾相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
js 巧妙去除數(shù)組中的重復(fù)項(xiàng)
最近, 我在看YAHOO.util.YUILoader類的源碼, 其中有個(gè)排除數(shù)組重復(fù)項(xiàng)的方法, 讓我覺得甚為巧妙, 這里分享下…2010-01-01
javascript實(shí)現(xiàn)簡(jiǎn)單搜索功能
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)單搜索功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03
javascript實(shí)現(xiàn)多欄閉合展開式廣告位菜單效果實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)多欄閉合展開式廣告位菜單效果,可實(shí)現(xiàn)類似手風(fēng)琴切換展示效果的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
僅9張思維導(dǎo)圖幫你輕松學(xué)習(xí)Javascript 就這么簡(jiǎn)單
僅9張思維導(dǎo)圖幫你輕松學(xué)習(xí)Javascript,從javascript變量、javascript運(yùn)算符、javascript函數(shù)基礎(chǔ)等多方面了解Javascript,就這么簡(jiǎn)單2016-06-06
微信小程序開發(fā)報(bào):“app.json未找到”錯(cuò)誤的原因與解決方法
這篇文章主要介紹了微信小程序開發(fā)中常見的“app.json文件內(nèi)容錯(cuò)誤”及其解決方案,錯(cuò)誤通常由核心文件路徑錯(cuò)誤或配置問題引起,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
Ajax使用原生態(tài)JS驗(yàn)證用戶名是否存在
這篇文章主要為大家詳細(xì)介紹了Ajax使用原生態(tài)JS驗(yàn)證用戶名是否存在的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09

