常见用法console.log( ) | info( ) | debug( ) | warn( ) | error( )console.log("console log")

console.info("console info")

console.debug("console debug")

console.warn("console warn")

console.error("console error")

这些控制台将根据提供给它们的事件类型，直接以适当的颜色打印原始字符串

测试Demo

Title

console.log("console log")

console.info("console info")

console.debug("console debug")

console.warn("console warn")

console.error("console error")

console.log("%cText color is green and increased font size", "color: green; font-size: 2rem;")

console.log("Multiple styles: %cred %corange", "color: red", "color: orange", "Additional unformatted message");

let info1 = [["Suprabha"], ["Frontend Dev"], ["Javascript"]]

console.table(info1)

console.group()

console.log("Test 1st message")

console.group("info")

console.log("Suprabha")

console.log("Frontend Engineer")

console.groupEnd()

console.groupEnd()

let info2 = {

"name": "Suprabha",

"designation": "Frontend Engineer",

"social": "@suprabhasupi"

}

console.dir(info2)

console.log打印触发对象

console.dir打印触发对象

console.log(document.body, 'bodyHtml');

console.dir(document.body);

let oButton = document.getElementsByTagName('button');

oButton[0].onclick = function(event){

console.log(event.target, 'button1');

}

oButton[1].onclick = function(event){

console.dir(event.target, 'button2');

}

console.assert(false, "Log me!")

let name = "supi"

let msg = "Its not a number"

console.assert(typeof msg === "number", {name: name, msg: msg})

console.count("Hey")

console.count("Hey")

console.count("Hey")

console.count("Hey")

for (let i = 0; i < 5; i++) {

console.count()

}

console.time("Time")

let l = 0;

for (let i = 0; i < 5; i++) {

l += i

}

console.log("total", l)

console.timeEnd("Time")

样式控制台输出

可以使用% c 指令将 CSS 样式应用于控制台输出console.log("%cText color is green and increased font size", "color: green; font-size: 2rem;")

我们可以多次添加% cconsole.log("Multiple styles: %cred %corange", "color: red", "color: orange", "Additional unformatted message");

console.table( )

Table ()允许我们在控制台中生成一个表。输入必须是一个数组或一个对象，该对象将以表的形式显示let info = [["Suprabha"], ["Frontend Dev"], ["Javascript"]]

console.table(info)

group("group") & groupEnd("group")

要组织控制台，让我们使用 console.group () & console.groupEnd ()

使用控制台组，将控制台日志分组在一起，而每个分组在层次结构中创建另一个级别。调用 groupEnd 减少了一个console.group()

console.log("Test 1st message")

console.group("info")

console.log("Suprabha")

console.log("Frontend Engineer")

console.groupEnd()

console.groupEnd()

console.dir( )

打印指定对象的 JSON 表示形式let info = {

"name": "Suprabha",

"designation": "Frontend Engineer",

"social": "@suprabhasupi"

}

console.dir(info)

直接打印json可能不明显，用来打印dom对象就明显对比console.log打印触发对象

console.dir打印触发对象

console.log(document.body, 'bodyHtml');

console.dir(document.body);

let oButton = document.getElementsByTagName('button');

oButton[0].onclick = function(event){

console.log(event.target, 'button1');

}

oButton[1].onclick = function(event){

console.dir(event.target, 'button2');

}

console.assert( )

如果第一个参数为 false，则记录消息并将跟踪堆栈到控制台

它只会打印错误的参数，如果第一个参数是真的，它什么也不会做console.assert(false, "Log me!")let name = "supi"

let msg = "Its not a number"

console.assert(typeof msg === "number", {name: name, msg: msg})

console.count ( )

这个函数记录调用 count ()的次数。这个函数接受一个可选的参数标签

如果提供了 label，此函数将记录使用该特定标签调用 count ()的次数console.count("Hey")

console.count("Hey")

console.count("Hey")

console.count("Hey")

如果省略标签，函数将记录在这一行中调用 count ()的次数for (let i = 0; i < 5; i++) {

console.count()

}

time( ) and timeEnd( )

检查代码在执行时的性能,Time ()是一种更好的方法来跟踪 JavaScript 执行所花费的微时间console.time("Time")

let l = 0;

for (let i = 0; i < 5; i++) {

l += i

}

console.log("total", l)

console.timeEnd(