还是只使用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/
还是只使用console.log()进行调试?好吧,其实还有更多。的更多相关文章
- js日志输出还是只会console.log么,那你就out了
几乎所有的javascript开发者最常使用的日志打印调试api都是console.log(),其实还有很多的选项供我们选择,笔者下面就为大家一一介绍. 一.console.table() conso ...
- 【调试】js调试console.log使用总结图解(重要)
0.介绍 先上图:不知道有多少人发现,在浏览器开发工具的“Console”上的百度首页的关于百度招聘的信息: 今天要给大家介绍的就是是Web前端调试工具中的Console面板,应该说只要是个浏览器就会 ...
- JavaScript调试技巧之console.log()详解
JavaScript调试技巧之console.log()详解 对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻 ...
- js调试console.log使用总结图解
一 实例 打印字符串和对象: 可展开对象查看内部情况: 看一下console对象本身的定义情况: 输出对象情况: utag对象所在文件: 输出对象: 二 Console.log 总结 1 如果你j ...
- JavaScript调试技巧之console.log()详解--2015-08-07
对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻断 JavaScript程序的执行,从而造成副作用:而cons ...
- console.log的应用
这两天在学javascript,但是有个问题老是觉得很疑惑,那就是这两个表达式到底有啥区别,虽然结果输出都差不多,但是我想这个两个表达式被开发出来,肯定是有意义的吧!哪位高手解答下吧!Thanks i ...
- 如何实现监听 console.log
var lastLog; console.oldLog = console.log; console.log = function(str) { console.oldLog(str); lastLo ...
- IE 8 下小心使用console.log()
我们很多情况下会使用console.log() 对代码调试.在chrome下和Firefox下都不会有太大问题,但是在最近我在IE8 下调试时使用了console.log(),就出现一些问题.在IE8 ...
- vue-cli3.0 生产包去除console.log
目前负责的公众号又迭代了一个版本,之前打生产包,配置总是和测试包搞混,所以使用了vue-cli3.0的环境变量来控制配置. 但是又发现了一个新问题,写代码的过程中写了很多console.log 来调试 ...
随机推荐
- 吴裕雄--天生自然 PHP开发学习:在centos7操作系统下使用命令安装ThinkPHP 5框架
前提条件是系统已经安装好了php,一般来说安装好的php根目录是:/var/www/html 系统安装composer(我使用的系统是centos7) .使用命令下载 curl -sS https:/ ...
- 不装逼地说,在 Google 到底能学到啥?
不装逼地说,在 Google 到底能学到啥? 2017-03-17 PHP开发者 (点击上方蓝字,快速关注我们) 本文转自公众号「半轻人」(ID:ban-qing-ren),伯乐在线/PHP开发者已获 ...
- gerrit Q&A
One or more refs/for/ names blocks change upload 原因 这是错误的原因是底层的git仓库有一些不正确的引用,通常是有些开发者使用过程中,直接推送到git ...
- LNMP环境搭建--Centos7
LNMP环境搭建--Centos7 | 刘鹏--博客 盒子 盒子 博客 分类 搜索 文章目录 在Centos7环境安装LAMP环境,备忘哈哈. 准备 首先去官网下载php,nginx 编译安装php ...
- Oracle字段
pl/sql查看当前数据库编码语句:select userenv('language') from dual; 测试结果:数据库字符集编码是utf-8 1.nvarchar2(size) ,size不 ...
- 基本类型和引用类型的值 [重温JavaScript基础(一)]
前言: JavaScript 的变量与其他语言的变量有很大区别.JavaScript 变量松散类型的本质,决定了它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何种数据类 ...
- [React技术内幕] setState的秘密
对于大多数的React开发者,setState可能是最常用的API之一.React作为View层,通过改变data从而引发UI的更新.React不像Vue这种MVVM库,直接修改data并不能视图的改 ...
- H5多列布局
多列布局 基本概念 1.多列布局类似报纸或杂志中的排版方式,上要用以控制大篇幅文本. 2.跨列属性可以控制横跨列的数量 /*列数*/ -webkit-column-count: 3; /*分割线*/ ...
- JavaScript面向对象class
JavaScript面向对象class 本周逆战班学习的主题是“面向对象”,很多人觉得面向对象很难理解,但其实我们早就在面向对象的思想之中了,今天就让我们再重新认识一下他,主要介绍一下ES6中新增的c ...
- Nacos 数据持久化 mysql8.0
一.问题描述 直接下载的稳定版本nacos编译后的文件,不支持mysql8及其以上版本,按照官网文档:https://nacos.io/zh-cn/docs/deployment.html 执行完成之 ...