还是只使用console.log()进行调试?好吧,其实还有更多。
时间:2022-07-24
本文章向大家介绍还是只使用console.log()进行调试?好吧,其实还有更多。,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在浏览器控制台中打印消息无疑可以拯救所有开发人员。 console.log()消息就像您的大多数疾病的药,同时调试了代码中的一些有线问题。
那里的大多数开发人员都喜欢— 让我们在浏览器中打印消息以了解有关此问题的更多信息。我敢肯定我不是唯一一个这样做的人。?
调试就像是犯罪电影中的侦探一样,在开发中您也是福尔摩斯~
除了最常用的console.log()消息在浏览器中显示消息外,还有许多其他方法可以使调试过程变得更加容易。让我们通过示例逐一查看它们。
基本打印信息console.log()| info()| debug()| warn()| error()
...控制台日志/信息/调试/警告/错误...
将CSS添加到控制台消息
您的所有控制台消息看起来都一样吗?好吧,从现在开始,情况会有所不同,让您的日志看起来更吸引人,因为这对您而言最重要。
话不多说,上代码与示例!
// 通过在文字前加上 ‘%c’, 然后在后方写入css设置即可将console。log加上CSS样式
console.log('%c这是示例的文字-Tz','color:pink;font-size:50px;font-weight: 500')
console.log('%c这是示例的文字-Tz','color:red;font-size:20px;font-weight: 600')
console.log('%c这是示例的文字-Tz','color:blue;font-size:12px;font-weight: 700')
如何为日志消息中的特定单词涂上颜色?就看这里~
// 通过在文字前加上 ‘%c’, 然后在后方写入css设置即可将console。log加上CSS样式
console.log('哪有人就哪有江湖 相持相扶%c--Tz张无忌',
'background-color:#222;font-size:24px;font-weight: 500;color:#bada55')
console.dir()
打印指定对象的JSON表示形式。
const zhangwuji = {
name: '张无忌',
age: 3,
tel: 'https://www.cnblogs.com/zhaohongcheng/'
}
console.log(zhangwuji)
控制台中的HTML元素
就像检查元素一样,在控制台中获取HTML元素。
let zhangwuji = document.getElementsByTagName('body')[0]
console.log(zhangwuji)
console.table()
是否想以正确且易于理解的方式查看JSON?
const bolg =[
{
name: '张无忌',
age: 3,
tel: 'https://www.cnblogs.com/zhaohongcheng/'
},
{
name: '令狐冲',
age: 12,
tel: 'https://www.baidu.com'
},
{
name: '扫地僧',
age: 22,
tel: 'https://www.didi.com'
}
]
console.table(bolg)
console.group()和console.groupEnd()
很有可能用控制台将消息分组
// 利用console.group()和console.groupEnd()将console.log分成一组一组
console.group();
console.log('Dream')
console.groupEnd()
console.group();
console.log('5')
console.log('2')
console.log('1')
console.groupEnd()
console.group();
console.log('1')
console.log('3')
console.log('1')
console.log('4')
console.groupEnd()
console.count()
此函数记录此特定调用count()
已被调用的次数。该函数带有一个可选参数label
。
如果label
提供了该函数,则该函数记录该count()
特定调用的次数label
。
如果label
省略,则函数记录在此特定行count()
上被调用的次数。
for (let i = 0; i < 11; i++) {
console.count();
}
console.assert()
当您只想打印一些选定的日志时,这非常方便,例如,它将仅打印false参数。如果第一个参数为true,则完全不执行任何操作。
const errorMsg = '不符合';
for (let number = 2; number <= 5; number += 1) {
console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg});
}
console.time()
console.time()是一个专用于跟踪操作所花费时间的函数,它是跟踪JavaScript执行所花费的微时间的更好方法。
console.time("This");
let total = 0;
for (let j = 0; j < 10000; j++) {
total += j
}
console.log("Result", total);
console.timeEnd("This");
如果大家有任何疑问即可留言反馈,会在第一时间回复反馈,谢谢大家!
本文为Tz张无忌原创文章,读后有收获可以右侧边栏请作者喝咖啡,转载请文章注明出处:https://www.cnblogs.com/zhaohongcheng/
- hive具体操作
- hive中配置hwi
- 从零开始内网安全渗透学习
- hive启动后相关操作
- 开源API测试工具 Hitchhiker v0.10 - 中文版
- 强大的API测试工具Hitchhiker v0.9 基于UI的断言测试,回顾2017
- 开源API测试工具 Hitchhiker v0.8 - 自动化测试结果统计
- 开源API测试工具 Hitchhiker v0.7更新 - Schedule的对比diff
- com.mysql.jdbc.exceptions.jdbc4.CommunicationsE...
- 简陋的swift carthage copy-frameworks 辅助脚本
- 【自问自答】关于 Swift 的几个疑问
- 高级PHP应用程序漏洞审核技术【一】
- 【读书笔记】The Swift Programming Language (Swift 4.0.3)
- Ubuntu 下mysql常用操作
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法