10个用Console来Debug的高级技巧
译者按: 我们往往会局限在自己熟悉的知识圈,但也应担偶尔拓展一下,使用一些不常见而又有用的技巧,扩大自己的舒适圈。
- 原文: 10 Tips for Javascript Debugging Like a PRO with Console
- 译者: Fundebug
为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。
在过去的十年中,我最热衷的事情之一就是前端开发(特别是JavaScript)。作为一个“匠人”,我喜欢专研各种工具。在本文,我会为你介绍一些用老式console来debug的技巧。
是的,我们都知道下面基本的技巧:
console.log(‘Hello World!’);console.info(‘Something happened…’); console.warn(‘Something strange happened…’); console.error(‘Something horrible happened…’); |
从现在开始,我将教会你一些你不知道的技巧,让你成为老司机!
1. console.trace()
如果你想知道消息是哪里打印出来的,使用console.trace()
来获取要打印的数据的stacktrace。
2. console.time() && console.timeEnd()
如果你想分析函数的性能,可以使用console.time()
来计时,console.timeEnd()
来结束计时,控制台会打印出两次之间的时间差。
3. console.memory
如果你发现性能问题很难分析,可能还要考虑是否有内存泄露,你可以使用console.memory
(注意memory是console的属性,不是函数),来查看当前的堆的使用情况。
Fundebug助你更好地debug,欢迎试用!
4. console.profile(‘profileName’) & console.profileEnd(‘profileName’)
虽然不是一个标准的做法,不过被广泛接受使用。你可以使用这两个命令来启动和停止profiling。这样有助你你在代码中做精准的profiling。而不依赖于手动的鼠标点击。你可以在浏览器控制台Javacript Profiler
中找到刚刚的profile。
5. console.count(“STUFF I COUNT”)
有时候为了记录一个函数或则一段代码重复执行了多少次,可以使用console.count('?')
来记录。每一次执行到该代码,就会自动加1。
6. console.assert(false, “Log me!”)
你可以使用console.assert
来在某些为假的条件下输出消息,而不是用if-else。
注意:在Node.js下会报错(Assertion Error)。
7. console.group(‘group’) & console.groupEnd(‘group’)
如果你想对打印的log做一个格式化的整理,可以使用console.group()
和console.groupEnd()
。使用console.group可以将log聚合成组,并且形成嵌套的层级。请看示例:
8. String substitutions
你可以使用console.log
打印变量(%s = string, %i = integer, %o = object, %f = float)。
9. console.clear()
我们已经在控制台输出了很多记录,来使用console.clear()
清空一下。
10. console.table()
最后一个压轴的!你可以使用console.table()
将对象以表格的形式打印出来。
版权声明: 转载时请注明作者Fundebug以及本文地址: https://blog.fundebug.com/2018/03/19/10-tips-for-debugging-with-console/
转载于:https://www.cnblogs.com/liangzhixiaolaohu/p/8600905.html
10个用Console来Debug的高级技巧相关推荐
- (立下flag)每日10道前端面试题-15 关于【高级技巧】十问
第一问:安全类型检测--typeof和instanceof 区别以及缺陷,以及解决方案 这两个方法都可以用来判断变量类型 区别:前者是判断这个变量是什么类型,后者是判断这个变量是不是某种类型,返回的是 ...
- 通过两个实例来理解 devtool: 'source-map' 是什么意思
小编推荐:Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java实时BUG监控.真的是一个很好用的bug监控费服务,众多大佬公司都在使用. 正如标题所说,有时候, ...
- SourceMap 使用教程
小编推荐:Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java实时BUG监控.真的是一个很好用的bug监控费服务,众多大佬公司都在使用. 1. 前言 Sourc ...
- 前端资源分享-只为更好前端
一.团队组织 网站 说明 腾讯 AlloyTeam 团队 腾讯Web前端团队,代表作品WebQQ,致力于前端技术的研究 ISUX 腾讯社交用户体验设计,简称ISUX,腾讯设计团队网站 CDC 腾讯用户 ...
- php有哪些debug方式,Console有哪些Debug方法
这次给大家带来Console有哪些Debug方法,使用ConsoleDebug的注意事项有哪些,下面就是实战案例,一起来看一下. 前言 在过去的十年中,我最热衷的事情之一就是前端开发(特别是JavaS ...
- JS高级群的日常!写一个从10到0的倒计时,用console.log打印,不可以用 setInterval!本来说好的研究avalonJS最后演变成了看着大神在那边互相比拼实力。。...
JS高级群的日常!写一个从10到0的倒计时,用console.log打印,不可以用 setInterval!本来说好的研究avalonJS最后演变成了看着大神在那边互相比拼实力.. 小森 执行一个函数 ...
- sniffer 和 debug flow
sniffer 和 debug flow sniffer 和 debug flow 复制模板,直接修改IP即可使用: diagnose sys session filter clear diagnos ...
- iframe调用父页面js方法_JS高级技巧
本篇是看的<JS高级程序设计>第23章<高级技巧>做的读书分享.本篇按照书里的思路根据自己的理解和经验,进行扩展延伸,同时指出书里的一些问题.将会讨论安全的类型检测.惰性载入函 ...
- lumen php命令,laravel/lumen —— Artisan Console 命令行
1. 简介 laravel和lumen提供了artisan命令行接口,以便我们来进行命令行操作. 我们可以通过php artisan list来查看框架为我们提供了哪些接口. root@chen-Ub ...
最新文章
- Compass 编译.scss文件的问题
- Asp.net mvc中的Ajax处理
- gsoap生成webservice调用客户端接口
- php sha256hex,crypto/sha256(加密/sha256)
- 代挂系统去授权, 支持燃鹅代抽,安全无后门
- Connection对象 Statement对象 ResultSet对象
- netty发送对象消息
- 美国NIST仍在与财政部和国防部就区块链支付跟踪项目合作
- 【TDA4系列】硬件分析与刷写程序的几种方式
- 美通企业日报 | 阿迪发布星战系列球鞋;安进27亿美元收购百济神州20.5%股份
- STM32CubeMx之硬件SPI驱动W25Q64
- 脚本病毒---实验十二:脚本病毒
- 会议流程安排以及详细的资料。
- (轉貼) 完全用Linux工作,摈弃Windows (OS) (Linux)
- python最小二乘法_最小二乘法(least sqaure method)
- Axure RP 9 基础教程 元件基础1
- 一文看懂π型滤波电路原理
- Arduino基础项目十四:红外对管模块
- python海龟漂亮图案代码大全_带有海龟图案的Python花
- 给一个向量进行归一化
热门文章
- python识别收件地址_Python3 自动识别地址信息
- java jar包存放位置_获得运行jar包存放路径的方法
- python3打包app_python3打包脚本
- linux 777权限_认识Linux之Linux命令-用户、权限管理(8)
- python常用算法有哪些_python常见排序算法基础教程
- 渣男,你为什么有这么多小姐姐的照片?因为我Python爬虫学的好啊❤️!
- 如何在CentOS 7上安装Varnish Cache
- jsf tree组件_JSF表单组件示例教程
- linux中awk命令_Linux / Unix中的AWK命令
- Python ConfigParser