前端奇技淫巧之js调试

开发 前端
上班写bug,下班修bug。调试在日常开发中占大半,相信小伙伴们和我一样,调试只会用console.log。今天我们一起学习其他js调试工具,帮忙我们提高效率。

上班写bug,下班修bug。调试在日常开发中占大半,相信小伙伴们和我一样,调试只会用console.log。今天我们一起学习其他js调试工具,帮忙我们提高效率。

首先看下console对象中有什么我们不知道的方法

前端奇技淫巧之js调试

哎呀,不看不知道,一看吓一跳。简单的console居然有这么多方法!

console.log()

相信小伙伴们会拍着胸口说:不就是简单的输出吗?console.log("Hello World")js入门级别的代码。

但console.log()还有其他好玩小窍门

占位符:

%s对字符串进行占位

前端奇技淫巧之js调试

%o 对对象进行占位

前端奇技淫巧之js调试

%d 对数字类型进行占位,这个就不演示了

%c css占位符,利用console.log输出内容可以携带css样式

前端奇技淫巧之js调试

console.dir()

console.dir与log类似,不同之处在于dir打印对象的json表示形式

前端奇技淫巧之js调试

console.warn()

给生活添加色,console.warn()给控制台添一祙小黄色

前端奇技淫巧之js调试

console.table()

这个方法爽爽的不要不要的了,小伙伴们是否console.log输出过json数据,一长串,看得是眼花瞭乱。

前端奇技淫巧之js调试

当然这还没到眼花的地步,数据多了,对象属性多了,反正看着不爽

前端奇技淫巧之js调试

这点数据对比两种方法谁好,还不明显。

在看一种情况:我们只需要查看某个对象属性,不需要对象所有的属性都展示给我们看

console.tabel完美解决

前端奇技淫巧之js调试

不足之处在于:处理最多 1000 行的数据的能力,所以它可能并不适用于所有的数据集合。

console.assert()

console.assert当做log用只输出undefined,

assert第一个参数是一个boolean值。否则直接输出undefined

若为true,输出undefinend,其他参数并不鸟

前端奇技淫巧之js调试

若为false,输出Assertion failed:+其他参数

前端奇技淫巧之js调试

console.clear()

清空控制台

好像有点鸡肋,目前我找不到实际的用处

console.count()

写入count()在同一行与同一标签被调用的次数。

与它配套的console.countReset()重置计数

前端奇技淫巧之js调试

该方法可用于统计循环次数:

  1. var arr = [1,2,3,2,...]; 
  2. arr.forEach(()=>{ 
  3.     console.count();//不传则默认用default 
  4. }) 

console.time()

启动一个新的计时器。调用console.timeEnd()停止计时器并将运行时间在控制台

  1. console.time(); 
  2. for(let i=0;i<1000;i++){} 
  3. console.timeEnd(); 

console.debug()

console.debug与log一样,但在不同浏览器中表现不同,下面是firefox与chrome中的展现

前端奇技淫巧之js调试
前端奇技淫巧之js调试

console.error()

将对象打印到控制台,将其格式化为错误,并包括堆栈跟踪

前端奇技淫巧之js调试

console.info()

与 console.log ()相同。

console.group(label)

可视化地将消息分组在一起,直到调用 console.groupEnd (label)。 当组最初登录到控制台时,使用 console.groupcollapped (label)将其折叠。

前端奇技淫巧之js调试
前端奇技淫巧之js调试

 

责任编辑:庞桂玉 来源: 今日头条
相关推荐

2021-04-12 06:09:38

Spring扩展点应用

2017-08-18 13:30:01

前端CSS布局奇技

2022-01-07 14:50:46

VS CodeLinux代码

2023-06-26 08:05:36

2020-11-26 11:45:31

Python绘图代码

2017-10-24 13:42:55

流氓App安卓Google

2021-03-30 07:47:46

SVG 滤镜 CSS技巧

2022-09-30 12:55:14

Linux笔记

2023-09-19 08:03:50

rebase​merge

2022-04-21 15:00:53

LinuxShell

2021-06-07 12:20:14

LinuxASCII命令

2022-04-24 16:00:15

LinuxLinux命令ls命令

2021-05-18 13:05:31

LinuxRust复用器

2021-02-25 09:19:11

LinuxAppimage命令

2015-04-13 13:21:45

JavaScript JavaScript

2019-04-25 13:10:04

Java 8Stream API编程语言

2021-05-07 13:56:13

Linux器监视服务器

2021-05-31 11:45:37

LinuxRustShell

2019-05-28 14:33:07

Javascript运算符前端

2022-01-06 08:58:49

代码
点赞
收藏

51CTO技术栈公众号