700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 前端小知识:控制台打印(console)- 模拟Java日志打印 表格形式打印美化输出对象

前端小知识:控制台打印(console)- 模拟Java日志打印 表格形式打印美化输出对象

时间:2019-08-31 11:37:18

相关推荐

前端小知识:控制台打印(console)- 模拟Java日志打印 表格形式打印美化输出对象

文章目录

6. 控制台打印(Console)模拟Java日志打印格式美化对象打印(表格形式打印输出)日志等级输出(让其在控制台显示时有颜色提示)代码运行时间统计打印输出

6. 控制台打印(Console)

官方文档:/zh-CN/docs/Web/API/Console#用法

模拟Java日志打印格式

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body><script>let people = {name: "lrc",year: 18}let article = {id: "423432431sfsdf",content: "测试控制台接口"}//不建议:这样打印不出对象内部结构console.log("people:" + people + " article: " + article)console.log("people:%s article: %s", people, article)//建议 == 下面两种是一样的console.log("people:", people, "article: ", article)console.log("people:%o article:%o", people, article)</script></html>

美化对象打印(表格形式打印输出)

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body><script>let people = {name: "lrc",year: 18}let article = {id: "423432431sfsdf",content: "测试控制台接口"}console.table(people)console.table(article)let arrays = [people,article]console.table(arrays)</script></html>

日志等级输出(让其在控制台显示时有颜色提示)

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body><script>console.error("错误日志哦!!!")console.warn("警告日志哦!!!")console.log("普通日志哦!!!")</script></html>

代码运行时间统计打印输出

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body><script>console.time("代码时间统计");let people = {name: "lrc",year: 18}let article = {id: "423432431sfsdf",content: "测试控制台接口"}console.timeLog("代码时间统计");//不建议:这样打印不出对象内部结构console.log("people:" + people + " article: " + article)console.log("people:%s article: %s", people, article)//建议 == 下面两种是一样的console.log("people:", people, "article: ", article)console.log("people:%o article:%o", people, article)console.timeLog("代码时间统计");console.table(people)console.table(article)let arrays = [people,article]console.table(arrays)console.timeLog("代码时间统计");console.error("错误日志哦!!!")console.warn("警告日志哦!!!")console.log("普通日志哦!!!")console.timeEnd("代码时间统计");</script></html>

前端小知识:控制台打印(console)- 模拟Java日志打印 表格形式打印美化输出对象 代码运行时间统计

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。