12种 console 相关的方法,帮你快速提高调试效率!(建议收藏)
作者:Craig Buckler
译者:前端小智
来源:.openreplay
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
我现在在调试代码的时候基本用的都是console.log()
调试法,虽然低级,但好用呀。当然,遇到复杂点的就会借助其它工具,但日常开发中 console.log()
基本够用了。
前缀铺垫的差不多了,今天我们来看看 console.log()
中还有哪些花里胡哨的写法。
1. 用ES6解构赋值输出变量名
如果打印多个值的,为了区别我们一般会连同变量名打印出来:
const variableX = 42;
console.log('variableX:', variableX);
// 或者
console.log(`variableX: ${ variableX }`);
其实,还有一种很简洁的方式就是使用解构的方式:
const variableX = 42;
console.log({ variableX }); // { variableX: 42 }
2. 使用适当的打印类型
console.log()
一般这样用:
console.log('no-frills log message');
但它不是唯一的类型。消息可以被归类为information (其处理方式与console.log()
相同)。
console.info('this is an information message');
警告:
console.warn('I warned you this could happen!');
错误:
console.error('I\'m sorry Dave, I\'m afraid I can\'t do that');
或不太重要的调试信息:
console.debug('nothing to see here - please move along');
console.table()
可以以更友好的格式输出对象的值。
const obj = {propA: 1,propB: 2,propC: 3};
console.table( obj );
或对象的数组:
const arr2 = [{ a: 1, b: 2, c: 3 },{ a: 4, b: 5, c: 6 },{ a: 7, b: 8, c: 9 }];console.table( arr2 );
其他选项包括:
console.dir( obj )
显示一个 JS 对象的交互式属性列表console.dirxml( element )
显示指定的HTML或XML节点的子代元素的互动树。console.clear()
清除控制台之前的所有信息。
3.过滤日志消息
浏览器以适当的颜色显示日志信息,但也可以进行过滤,以显示特定的类型。点击控制台窗格左上方的图标,就可以打开Chrome的侧边栏。
注意,console.debug()
信息只有在查看 verbose
选项时才会显示。
4. 使用 printf-type
的信息
所有的日志类型都可以使用c 语言风格的printf
消息格式,该格式定义了一个模板,其中包含一个变量被替换的%
指示器。例如
console.log('The answer to %s is %d.','life, the universe and everything',42
);
// The answer to life, the universe and everything is 42.
带样式的风格
console.log('%cOK, things are really bad now!',`font-size: 2em;padding: 0.5em 2em;margin: 1em 0;color: yellow;background-color: red;border-radius: 50%;`
);
控制台中的结果:
6. 使用类似测试的断言
类似于测试的console.assert()
命令可以用来在条件失败时输出一个信息。可以用一个条件和一个或多个对象来定义断言,当该条件失败时输出,例如
console.assert(life === 42,'life is expected to be',42,'but is set to',life
);
另外,也可以使用一个信息和替换值。
console.assert(life === 42,'life is expected to be %s but is set to %s',42,life
);
当条件失败时,这两个选项都会显示一个断言错误。
7. 运行堆栈跟踪
可以使用 console.trace()
输出构成当前执行点的所有函数调用的日志。
function callMeTwo() {console.trace();return true;
}
function callMeOne() {return callMeTwo();
}
const r = callMeOne();
跟踪显示每次调用是哪一行,并且可以在控制台窗格中折叠或展开:
8. 组日志消息
打印日志时,可以在开头使用console.group( label )
和结尾使用 console.groupEnd()
将日志消息分成命名组。 消息组可以嵌套和折叠或展开(console.groupCollapsed( label )
最初显示处于折叠状态的组):
// start log group
console.group('iloop');for (let i = 3; i > 0; i--) {console.log(i);// start collapsed log groupconsole.groupCollapsed('jloop');for (let j = 97; j < 100; j++) {console.log(j);}// end log group (jloop)console.groupEnd();}// end log group (iloop)
console.groupEnd();
9. 使用定时器
console.time
和console.timeEnd
这两个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间。随着WEB应用越来越重要,JavaScript的执行性能也日益受到重视,WEB开发人员知道一些性能测试机器是必须的。
console.time
方法是开始计算时间,console.timeEnd
是停止计时,输出脚本执行的时间。
// 启动计时器
console.time('testForEach');// (写一些测试用代码)// 停止计时,输出时间
console.timeEnd('testForEach');// 4522.303ms
这两个方法中都可以传人一个参数,作为计时器的名称,它的作用是在代码并行运行时分清楚各个计时器。对console.timeEnd
的调用会立即输出执行总共消耗的时间,单位是毫秒。
10. 按名称调试和监控函数
DevTools Sources 面板(或 Firefox 中的调试器)允许打开一个文件,并通过单击行号设置断点。基于chrome的浏览器也允许你通过在控制台中输入debug(functionName)
来设置断点,例如:
debug( doSomething );
该函数必须在全局命名空间中可用,并且浏览器将在调用它时立即启动调试器。可以使用undebug(functionName)
或重新加载页面来取消调试。
monitor(function)
,它接收一个函数名作为参数,比如function a
,每次a
被执行了,都会在控制台输出一条信息,里面包含了函数的名称a
及执行时所传入的参数。
而unmonitor(function)
便是用来停止这一监听。
11. 查找和修复事件监听器
Firefox DevTools Inspector 面板会在任何附加了处理程序的DOM元素旁边显示一个 event 图标。单击图标查看函数名,然后单击左边的箭头图标展开代码。或者,“在调试器中打开”图标将在“调试器”窗格中定位处理程序,以便可以设置断点
Chrome的实现没有那么好,但可以通过getEventListeners()
函数传递一个DOM节点来查看所有事件监听器。例如,getEventListeners($0)
显示应用于当前Elements面板中高亮显示的DOM节点的侦听器
12. 复制属性到剪贴板
控制台的copy()
命令可以复制任何值到剪贴板。它可以是一个原始值、数组、对象或DOM节点。
当传递一个DOM节点时,copy()
将该元素及其所有子元素的HTML放在剪贴板上。这与右键点击一个节点并选择复制,然后选择复制外层HTML是一样的。
命令 copy( document.documentElement )
复制整个 HTML 文档。 这可以粘贴到文本编辑器中并进行美化增强可读性。
~~完,方法是很多,自己选着用,我是小智,刷碗去了,我们下期见~
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文:https://blog.openreplay.com/12-ways-to-improve-your-devtools-console-logging
交流
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
12种 console 相关的方法,帮你快速提高调试效率!(建议收藏)相关推荐
- console 相关的方法
在调试代码的时候基本用的都是console.log() 调试法,遇到复杂点的就会借助其它工具,但日常开发中 console.log() 基本够用了. 12种 console 相关的方法 用ES6解构赋 ...
- ML之FE:利用【数据分析+数据处理】算法对国内某平台上海2020年6月份房价数据集【12+1】进行特征工程处理(史上最完整,建议收藏)
ML之FE:利用[数据分析+数据处理]算法对国内某平台上海2020年6月份房价数据集[12+1]进行特征工程处理(史上最完整,建议收藏) 目录 利用[数据分析+数据处理]算法对链家房价数据集[12+1 ...
- 电脑速度慢怎么办?这些方法帮你快速提速!
案例:电脑速度太慢了 "各位朋友,不知道大家有没有遇到电脑卡到崩溃的情况,我的电脑用了还不到两年,现在运行的速度真的超级慢,打开一个文件都需要花好几分钟等待,我实在是受不了了,想问问大家有什 ...
- iphone文件连接smb服务器,实用!三种iPhone与Windows电脑互传文件操作技巧,建议收藏...
如果你是苹果全家桶用户,一定会对 「AirDrop(隔空投送)」 功能赞誉有加,使用 AirDrop 可以在 iPhone 与 MacBook.iPad 等设备之间快速传递照片.视频或文件. 遗憾的是 ...
- 12个超好用的免费在线工具,大大提高生产力,建议收藏!
好的工具,能够帮助我们更高效地完成工作,节省时间和精力; 节省出更多的摸鱼时间! 本文将介绍12款绝佳的免费效率工具,这些工具可以让你事半功倍,提高工作效率.无论你是一名程序员.设计师.学生还是白领, ...
- 惊呆了,Spring中竟然有12种定义bean的方法
前言 在庞大的 Java 技术体系中,Spring 有着举足轻重的地位,它给每位开发者带来了极大的便利和惊喜. 我们都知道 Spring 是创建和管理bean的工厂,它提供了多种方式定义 bean,能 ...
- 运维基础(12)服务器12种基本故障+排查方法
定义举例 从上电(或复位)到自检完成这一段过程中电脑所发生的故障. 可能的故障现象 1. 主机不能加电(如:电源风扇不转或转一下即停等).有时不能加电.开机掉闸.机箱金属部分带电等; 2. 开机无显, ...
- 服务器 12 种基本故障+排查方法
加电类故障 定义举例 从上电(或复位)到自检完成这一段过程中电脑所发生的故障. 可能的故障现象 1. 主机不能加电(如:电源风扇不转或转一下即停等).有时不能加电.开机掉闸.机箱金属部分带电等; 2. ...
- 12种高效的管理方法
注:分析找到问题根本原因的方法:将问题可能出现的原因分成几大类,在大类之下,查找可能的细分原因,从而锁定真正的问题原因. 1.PDCA法则-每一种事物发展或者推进都应该包括计划.执行.检查.行动四个环 ...
最新文章
- ASP.NET Web API Model-ModelBinder
- idea网页预览功能_IDEA 2020.2 重磅发布,动画级新功能预览!
- LeetCode 528. 按权重随机选择(前缀和+二分查找)
- java ajax报错500,(Struts2+JSON+Ajax) XMLHttpRequest ==500如何解决
- 嵌入式开发板02---点亮LED升级版
- Keepalived实现高可用Nginx反向代理
- perl CGI::Session
- MongoDB高级设计模式:数据即服务
- 数据库文件有哪些格式以及类型呢?
- 2018通达信l2服务器源码,很后悔购买了通达信L2看盘软件,大家不要再买进这个软件了...
- 怎么用java打开.jar文件
- feiyanghaotian(飞扬浩天)的csdn博客
- 华为披露手机出货超1亿台的“两点”意图
- HTML Purifier解决XSS问题
- python爬取动态加载的网页之爬取猫眼电影实时票房
- Lr_debug_message,Lr_output_message,Lr_error_message,Lrd_stmt,Lrd_fetch
- Origin Pro2017使用PatchOriginPro.exe破解提示Patch unsuccessfully or already
- 基于MT6261行车记录仪
- 作为面试官,如何考察工程师的软素质
- OO第四单元小结暨2019春季学期OO课程总结