译者按: 我们往往会局限在自己熟悉的知识圈,但也应担偶尔拓展一下,使用一些不常见而又有用的技巧,扩大自己的舒适圈。

  • 原文: 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的高级技巧相关推荐

  1. (立下flag)每日10道前端面试题-15 关于【高级技巧】十问

    第一问:安全类型检测--typeof和instanceof 区别以及缺陷,以及解决方案 这两个方法都可以用来判断变量类型 区别:前者是判断这个变量是什么类型,后者是判断这个变量是不是某种类型,返回的是 ...

  2. 通过两个实例来理解 devtool: 'source-map' 是什么意思

    小编推荐:Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java实时BUG监控.真的是一个很好用的bug监控费服务,众多大佬公司都在使用. 正如标题所说,有时候, ...

  3. SourceMap 使用教程

    小编推荐:Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java实时BUG监控.真的是一个很好用的bug监控费服务,众多大佬公司都在使用. 1. 前言 Sourc ...

  4. 前端资源分享-只为更好前端

    一.团队组织 网站 说明 腾讯 AlloyTeam 团队 腾讯Web前端团队,代表作品WebQQ,致力于前端技术的研究 ISUX 腾讯社交用户体验设计,简称ISUX,腾讯设计团队网站 CDC 腾讯用户 ...

  5. php有哪些debug方式,Console有哪些Debug方法

    这次给大家带来Console有哪些Debug方法,使用ConsoleDebug的注意事项有哪些,下面就是实战案例,一起来看一下. 前言 在过去的十年中,我最热衷的事情之一就是前端开发(特别是JavaS ...

  6. JS高级群的日常!写一个从10到0的倒计时,用console.log打印,不可以用 setInterval!本来说好的研究avalonJS最后演变成了看着大神在那边互相比拼实力。。...

    JS高级群的日常!写一个从10到0的倒计时,用console.log打印,不可以用 setInterval!本来说好的研究avalonJS最后演变成了看着大神在那边互相比拼实力.. 小森 执行一个函数 ...

  7. sniffer 和 debug flow

    sniffer 和 debug flow sniffer 和 debug flow 复制模板,直接修改IP即可使用: diagnose sys session filter clear diagnos ...

  8. iframe调用父页面js方法_JS高级技巧

    本篇是看的<JS高级程序设计>第23章<高级技巧>做的读书分享.本篇按照书里的思路根据自己的理解和经验,进行扩展延伸,同时指出书里的一些问题.将会讨论安全的类型检测.惰性载入函 ...

  9. lumen php命令,laravel/lumen —— Artisan Console 命令行

    1. 简介 laravel和lumen提供了artisan命令行接口,以便我们来进行命令行操作. 我们可以通过php artisan list来查看框架为我们提供了哪些接口. root@chen-Ub ...

最新文章

  1. Compass 编译.scss文件的问题
  2. Asp.net mvc中的Ajax处理
  3. gsoap生成webservice调用客户端接口
  4. php sha256hex,crypto/sha256(加密/sha256)
  5. 代挂系统去授权, 支持燃鹅代抽,安全无后门
  6. Connection对象 Statement对象 ResultSet对象
  7. netty发送对象消息
  8. 美国NIST仍在与财政部和国防部就区块链支付跟踪项目合作
  9. 【TDA4系列】硬件分析与刷写程序的几种方式
  10. 美通企业日报 | 阿迪发布星战系列球鞋;安进27亿美元收购百济神州20.5%股份
  11. STM32CubeMx之硬件SPI驱动W25Q64
  12. 脚本病毒---实验十二:脚本病毒
  13. 会议流程安排以及详细的资料。
  14. (轉貼) 完全用Linux工作,摈弃Windows (OS) (Linux)
  15. python最小二乘法_最小二乘法(least sqaure method)
  16. Axure RP 9 基础教程 元件基础1
  17. 一文看懂π型滤波电路原理
  18. Arduino基础项目十四:红外对管模块
  19. python海龟漂亮图案代码大全_带有海龟图案的Python花
  20. 给一个向量进行归一化

热门文章

  1. python识别收件地址_Python3 自动识别地址信息
  2. java jar包存放位置_获得运行jar包存放路径的方法
  3. python3打包app_python3打包脚本
  4. linux 777权限_认识Linux之Linux命令-用户、权限管理(8)
  5. python常用算法有哪些_python常见排序算法基础教程
  6. 渣男,你为什么有这么多小姐姐的照片?因为我Python爬虫学的好啊❤️!
  7. 如何在CentOS 7上安装Varnish Cache
  8. jsf tree组件_JSF表单组件示例教程
  9. linux中awk命令_Linux / Unix中的AWK命令
  10. Python ConfigParser