推荐几个不错的console调试技巧实现


Posted in Javascript onDecember 20, 2019

在我们的日常前端开发中,使用最频繁的莫过于使用console.log在浏览器的控制台中打印出我们需要调试的信息,但是大部分人可能跟之前的我一样,没有意识到其实console除了log方法以外,还有很多实用的方法,这些方法可以使我们的调试过程更加容易,也表达得更加直观,更加丰富多彩,下面我们就来看看有哪些实用的方法吧!

1、console.log()

我们经常会使用console.log来打印出某个变量的值或者某个实体对象,也可以传入多个变量参数,它会按照传入顺序进行打印:

1. 传入一个变量
const a = 1;
console.log(a); // -> 1

2. 传入一个对象
const foo = {a: 1};
console.log(foo); // -> {a: 1}

3. 传入多个变量
console.log(a, foo); // -> 1 {a: 1}

除此之外,它还支持格式化打印的功能,传入特定的占位符来对参数进行格式化处理,常见的占位符有以下几种:

  1. %s:字符串占位符
  2. %d:整数占位符
  3. %f:浮点数占位符
  4. %o:对象占位符(注意是字母o,不是数字0)
  5. %c: CSS样式占位符
const string = 'Glory of Kings';
const number = 100;
const float = 9.5;
const obj = {name: 'daji'};

1、%s 字符串占位符
console.log('I do like %s', string); // -> I do like Golry of Kings.

2、%d 整数占位符
console.log('I won %d times', number); // -> I won 100 times.

3、%f 浮点数占位符
console.log('My highest score is %f', float); // -> My highest score is 9.5

4、%o 对象占位符
console.log('My favorite hero is %o', obj); // -> My favorite hero is {name: 'daji'}.

5、%c CSS样式占位符
console.log('I do like %c%s', 'padding: 2px 4px;background: orange;color: white;border-radius: 2px;', string);

其中CSS样式占位符效果如下:

推荐几个不错的console调试技巧实现

2、console.warn()

你可以完全使用console.warn来代替console.log方法,但前提是该条打印信息是属于警告级别而不是普通信息级别,因此浏览器遇到一条警告级别的信息会区别对待,最明显的是它的左侧会有一个警告图标,并且背景色和文字颜色也会不一样。

推荐几个不错的console调试技巧实现

相比于普通信息,警告信息会出现在上图左侧的warning面板中,而不是info面板中,这样也有助于我们在一堆打印信息中快速筛选出警告信息,方便查看。

3、console.dir()

在大多数情况下,console.dir方法的作用和console.log作用相似,但是有一点细微的差别。

推荐几个不错的console调试技巧实现

在上图中,我们可以看到,console.log方法会将打印结果的详细信息显示完整,但是console.dir方法只会打印出对象,不会展开详细信息,当然点击之后看到的信息和前者一样。唯一差异比较大的地方是当我们打印HTML文档中的节点时,会有完全不一样的表现形式。例如我们使用console.log来打印body标签:

推荐几个不错的console调试技巧实现

我们会方便地看到DOM结构,并且鼠标移上去能够帮我们自动定位到对应的DOM节点。但是在某些情况下,其实这并不是你想要看到的效果,或许你想看到的是该DOM节点下的所有属性信息,那么你可以尝试使用console.dir方法来试试:

推荐几个不错的console调试技巧实现

4、console.table()

在我们的项目开发中经常会遇到对象数组形式的列表数据,在调试过程中我们可能会使用console.log方法打印出这些数据来进行查看,但比起前者,还可以使用一种比较可视化的方式来进行打印。例如,这里准备一些列表数据:

const response = [
 {
  id: 1,
  name: 'Marry',
  age: 18,
  sex: 0
 },
 {
  id: 2,
  name: 'John',
  age: 20,
  sex: 1
 }
];

然后我们使用console.log来进行打印:

推荐几个不错的console调试技巧实现

可以看出,我们打印出的结果并不够直接,没有给人一种一目了然的效果,接着换着使用console.table来打印:

推荐几个不错的console调试技巧实现

可以看到,我们的列表数据被清晰完整地展现在了表格当中,同时console.table提供第二个可选参数用于筛选表格需要显示的列,默认为全部列都显示。

推荐几个不错的console调试技巧实现

上图我们通过添加第二个参数,数组中为需要在表格中显示的字段名,这样就很方便地在结果数据中过滤掉我们不需要关心的信息。

5、console.assert()

assert即断言,该方法接收多个参数,其中第一个参数为输入的表达式,只有在该表达式的值为false时,才会将剩余的参数输出到控制台中。

推荐几个不错的console调试技巧实现

上图中的第二行因为arr.length > 5值为false,因此打印出后面的信息。如果在某些场景下你需要评估当前的数据是否满足某个条件,那么不妨使用console.assert()方法来在控制台中查看断言信息。

6、console.trace()

该方法用于在控制台中显示当前代码在堆栈中的调用路径,通过这个调用路径我们可以很容易地在发生错误时找到原始错误点,示例如下:

function foo(data) {
 if (data === null) {
  console.trace();
  return [];
 }
 return [data.a, data.b];
}

function bar1(data) {
 return foo(data);
}

function bar2(data) {
 return foo(data);
}

bar1({a: 1, b: 2}); // -> [1, 2]
bar2(null); // -> []

在上面代码中,我们分别在bar1和bar2函数中调用foo函数并传入不同的参数,很显然bar2函数在执行时会进入if语句并执行console.trace()方法,以下是控制台中打印结果:

推荐几个不错的console调试技巧实现

可以看到自下而上的一条调用路径,并可以快速判定是在bar2函数中传入了不合适的参数null而导致出错,方便我们跟踪发生错误的原始位置。

7、console.count()

该方法相当于一个计数器,用于记录调用次数,并将记录结果打印到控制台中。其接收一个可选参数console.count(label),label表示指定标签,该标签会在调用次数之前显示,示例如下:

for (let i = 1;i <= 5;i++) {
  if (!(i % 2)) {
    console.count('even');
  } else {
    console.count('odd');
  }
}

代码中如果i是偶数,则会对even计数器进行计数,否则对odd计数器进行计数,执行后我们会在控制台中看到如下列表:

odd: 1
even: 1
odd: 2
even: 2
odd: 3

8、console.time() & console.timeEnd()

这两个方法一般配合使用,是JavaScript中用于跟踪程序执行时间的专用函数,console.time方法是作为计算的起始时间,console.timeEnd是作为计算的结束时间,并将执行时长显示在控制台。如果一个页面有多个地方需要使用到计算器,则可以为方法传入一个可选参数label来指定标签,该标签会在执行时间之前显示。在以往我们计算程序的执行时间时,我们一般会采用如下方式:

const startTime = performance.now();
let sum = 0;
for(let i = 0;i < 100000;i++) {
  sum += i;
}
const diffTime = performance.now() - startTime;
console.log(`Execution time: ${ diffTime }`);

这是一种比较传统的做法,我们还可以使用console.time来实现:

console.time('sum');
let sum = 0;
for(let i = 0;i < 100000;i++) {
  sum += i;
}
console.timeEnd('sum');

控制台效果如下:

推荐几个不错的console调试技巧实现

相比于第一种实现方式,我们没有设置任何临时变量并且没有做任何计算。

9、console.group() & console.groupEnd()

顾名思义,对数据信息进行分组,其中console.group()方法用于设置分组信息的起始位置,该位置之后的所有信息将写入分组,console.groupEnd()方法用于结束当前的分组,示例如下:

class MyClass {
 constructor() {
  console.group('Constructor');
  console.log('Constructor executed');
  this.init();
  console.groupEnd();
 }

 init() {
  console.group('init');
  console.log('init executed');
  console.groupEnd();
 }
}
const myClass = new MyClass();

控制台效果如下:

推荐几个不错的console调试技巧实现

该方法的作用主要是让我们在控制台打印的日志更加清晰可读。

10、浏览器转为编辑器

在大部分情况下,我们在浏览器中调试DOM结构或者编辑一些文本时,会在Chrome Developer Tools的Elements选项中对DOM节点进行编辑,但是一旦节点过多,会很容易增加调试过程的困难,这里我们可以使用一种方式来将浏览器直接转换为编辑器模式:

document.body.contentEditable = true;

在控制台中输入以上代码后,可以将浏览器中的所有内容变为可编辑状态,效果图如下:

推荐几个不错的console调试技巧实现

11、Chrome Command Line API

Google的Chrome Command Line API包含了一个用于执行以下常见任务的便捷函数集合:选择和检查DOM元素,以可读格式显示数据,停止和启动分析器,以及监控DOM事件。

注意:此API只能通过浏览器控制台获取,无法通过网页脚本来进行访问。

11.1 选择DOM元素

我们使用jQuery的时候,我们可以通过各种选择器例如$('#id')和$('.class')来选择匹配的DOM元素,但是如果我们没有引入jQuery时,我们仍然可以在Chrome的控制台中进行同样的操作。Chrome Command Line API提供了以下几种选择DOM元素的方式:

  • $(selector):返回匹配指定CSS选择器的DOM元素的第一个引用,相当于document.querySelector()函数。
  • $$(selector):返回匹配指定CSS选择器的DOM元素数组,相当于document.querySelectorAll()函数。
  • $x(path):返回一个与给定XPath表达式匹配的DOM元素数组。

推荐几个不错的console调试技巧实现

$x('//p[a]')表示返回包含<a>元素的所有<p>元素。

11.2 检索最后一个结果的值

在控制台中我们经常会进行一些计算,某些情况下你可能需要跟踪你之前的计算结果来用于后面的计算,使用$_标记可用于返回最近评估的表达式的值,示例如下:

1 + 2 + 3 + 4 // -> 10

$_ // -> 10

$_ * $_ // -> 100

Math.sqrt($_) // -> 10

$_ // -> 10

11.3 查找与指定DOM元素关联的事件

当我们需要查找DOM中与某个元素关联的所有事件时,控制台提供了getEventListeners方法来帮助我们找到这些关联的事件。

getEventListeners($('selector'))返回在指定DOM元素上注册的事件监听器。返回值是一个对象,对象的key为对应的事件类型(例如click,focus),对象的value为一个数组,其包含了对应事件类型下的所有事件监听器。例如,下面列出了在document上注册的所有事件监听器:

推荐几个不错的console调试技巧实现

如果我们需要找到某个特定的事件监听器,可以通过如下方式进行访问:

// eventName表示对应的事件类型
// index表示该事件类型下的事件监听器数组的索引
getEventListeners($('selector')).eventName[index].listener

// 例如获取document下click事件监听器数组的第一项
getEventListeners(document).click[0].listener

11.4 监控事件

如果你希望在执行绑定到DOM中特定元素的事件时监视它们,控制台提供了monitorEvents方法来帮助你使用不同的命令来监控其中的一些或者所有事件:

  1. monitorEvents($('selector')):将监视与选择器匹配的元素关联的所有事件,当这些事件被触发时会将它们打印到控制台。例如monitorEvents($('#content'))将监视id为content的元素关联的所有事件。
  2. monitorEvents($('selector'), 'eventName'):将监视选择器匹配的元素的某个特定的事件。 例如,monitorEvents($('#content'), 'click')将监视id为content的元素关联的click事件。
  3. monitorEvents($('selector'), [eventName1, eventName2, ...]):将监视选择器匹配的元素的某些特定的事件。与上述不同的是,第二项可以传入一个字符串数组,包含所有需要监听的事件类型名称,以此达到自定义监听的目的。例如monitorEvents($('#content'), ['click', 'focus'])将监视id为content的元素关联的click和focus事件。
  4. unmonitorEvents($('selector')):将停止监视选择器匹配的元素关联的所有事件。例如unmonitorEvents($('#content'))将停止监视id为content的元素关联的所有事件。

效果图如下:

推荐几个不错的console调试技巧实现

11.5 检查DOM元素

控制台提供了inspect()方法让我们可以直接从控制台中检查一个DOM元素。

inspect($('selector')):将检查与选择器匹配的元素,并且会自动跳转到Chrome Developer Tools的Elements选项卡中。例如inspect($('#content'))将检查id为content的元素。

效果图如下:

推荐几个不错的console调试技巧实现

交流

这篇主要是分享了几个笔者觉得不错的console调试技巧,希望在你的前端代码调试过程中能对你有所帮助,觉得文章不错的话,欢迎关注笔者的公众号,每周都会原创和整理一些前端技术干货,希望和大家一起互相交流学习,共同进步。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery Easyui实现左右布局
Jan 26 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
JS代码实现table数据分页效果
May 26 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
详解vue中移动端自适应方案
May 05 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 #Javascript
node使用request请求的方法
Dec 20 #Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 #Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 #Javascript
js正则匹配多个全部数据问题
Dec 20 #Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 #Javascript
Vuex实现数据共享的方法
Dec 20 #Javascript
You might like
用php+javascript实现二级级联菜单的制作
2008/05/06 PHP
php生成图片验证码
2015/06/09 PHP
php探针不显示内存解决方法
2019/09/17 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
Python实现简单状态框架的方法
2015/03/19 Python
python实现web方式logview的方法
2015/08/10 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
python之拟合的实现
2019/07/19 Python
Python如何进行时间处理
2020/08/06 Python
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
Python是如何进行类型转换的
2013/06/09 面试题
小学语文国培感言
2014/03/04 职场文书
工作目标责任书
2014/07/23 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
最美乡村教师观后感
2015/06/11 职场文书
创业计划书之酒厂
2019/10/14 职场文书