- 对前端开发者来说,Chrome Dev Tools(开发者工具,以下简称CDT)是一个不可或缺的开发调试工具,但是你可能只用过console.log(),却不知道console还有很多功能强大的调试方法。
- 接下来带你用CDT做下花式控制台调试。阅读全文约五分钟。
CDT 提供了强大的调试系统,除了可以用来查看 DOM tree 结构、CSS 样式调试、动画调试和 JS 代码断点调试等。今天不聊别的,就聊聊使用 console 调试那些事儿。
在使用 React、vue 等需要编译语法的前端框架开发时,前端调试已经变得不那么容易,除了使用 React Dev Tools,Vue Dev Tools 和 Redux Dev Tools 等 Chrome 插件,就是一堆的 console.log() 来打印我们需要看到的变量,虽然也有用,但是比较单一,要调试复杂数据需要多次输出比较才行。
如果你平时只是用 console.log() 来输出一些变量的值,那你肯定还没有用过 console 的强大的功能。下面带你用 console 玩玩花式调试。
我们先在 Chrome 上看看 console 对象都有哪些属性和函数(博主用的 Chrome 版本是: 版本 60.0.3112.90(正式版本) (64 位)) 。
看了才知道,除了 log 方法,console 还有很多其他的方法。
下面,我们从一些来看下主要的调试函数及用法。
console.log(), console.error(), console.warn(), console.info()
最基本也是最常用的用法了,分别表示输出 普通信息 、 错误信息 、 警示信息 和 提示性信息 ,且 error 和 warn 方法有特定的图标和颜色标识。
参数:
expression: 条件语句,语句会被解析成 Boolean,且为 false 的时候会触发 message 语句输出
message: 输出语句,可以是任意类型
该函数会在 expression 为 false 的时候,在控制台输出一段语句,输出的内容就是传入的第二个参数 message 的内容。当我们在只需要在特定的情况下才输出语句的时候,可以使用 console.assert。
示例如下:
- function greaterThan(a,b) {
- console.assert(a > b, {"message":"a is not greater than b","a":a,"b":b});
- }
- greaterThan(5,6);
参数:
label: 计算数量的标识符
该函数用于计算并输出特定标识符为参数的 console.count 函数被调用的次数。下面的例子更能直观的了解:
- function login(name) {
- console.count(name + ' logged in');
- }
参数:
object:被输出扎实的对象
该函数用于打印出对象的详细的属性、函数及表达式等信息。如果该对象已经被记录为一个 html 元素,则该 HTML 元素的 DOM 表达式的属性会被像下面这样打印出来:
- console.dir(document.body);
该函数将打印输出 XML 元素及其子孙后代元素,且对 HTML 和 XML 元素调用 console.dirxml() 和 调用 console.log() 是等价的。
参数:
label: group 分组的标识符
在控制台创建一个新的分组,随后输出到控制台上的内容都会自动添加一个缩进,表示该内容属于当前分组,知道调用 console.groupEnd() 之后,当前分组结束。
举个: chestnut::
- console.log("This is the outer level");
- console.group();
- console.log("Level 2");
- console.group();
- console.log("Level 3");
- console.warn("More of level 3");
- console.groupEnd();
- console.log("Back to level 2");
- console.groupEnd();
- console.log("Back to the outer level");
该函数同 console.group(),唯一的区别是该函数的输出默认不展开分组,而 console.group() 是默认展开分组。
label: 用于标记计时器的名称,不填的话,默认为 default
console.time() 会开始一个计时器,并当执行到 console.timeEnd() 函数时(需要两个函数的 lable 参数相同),结束计时器,并将计时器的总时间输出到控制台上。
再举几个: chestnut::
- console.time();
- var arr = new Array(10000);
- for (var i = 0; i < arr.length; i++) {
- arr[i] = new Object();
- }
- console.timeEnd();
- // default: 3.696044921875ms
对 console.time(label) 设置一个自定义的 label 字段,并使用 console.timeEnd(label) 设置相同的 label 字段来结束计时器。
- console.time('total');
- var arr = new Array(10000);
- for (var i = 0; i < arr.length; i++) {
- arr[i] = new Object();
- }
- console.timeEnd('total');
- // total: 3.696044921875ms
设置多个 label 属性,开启多个计时器同步计时。
- console.time('total');
- console.time('init arr');
- var arr = new Array(10000);
- console.timeEnd('init arr');
- for (var i = 0; i < arr.length; i++) {
- arr[i] = new Object();
- }
- console.timeEnd('total');
- // init arr: 0.0546875ms
- // total: 2.5419921875ms
该函数将在控制台打印出从 console.trace() 被调用的位置开始的堆栈信息。
今天的主要内容就到这,Chrome Dev Tools 中还有很多其他好的特性,请大家多去尝试,多去探索。
来源: http://www.tuicool.com/articles/3MJjQri