利用Console来Debug的10个高级技巧汇总

前言

在过去的十年中，我最热衷的事情之一就是前端开发（特别是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的属性，不是函数），来查看当前的堆的使用情况。

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()将对象以表格的形式打印出来。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

您可能感兴趣的文章:

  • 通过chrome浏览器控制台(Console)进行PHP Debug的方法
赞 (0)

相关推荐

  • 通过chrome浏览器控制台(Console)进行PHP Debug的方法

    通过chrome浏览器控制台(Console)进行PHP Debug的方法

    效果如下图 PHP Console是一款可以帮助用户模拟真实的PHP网站运行环境,帮助用户使用Chrome插件对PHP代码进行调试的Chrome插件,用户在Chrome中安装了PHP Console插件以后,可以在自己的PHP项目中引用PHP Console项目代码,并输出调试信息,让PHP Console插件进行捕获,这样在网站发布成功以后,还可以使用PHP Console插件进行输出调试信息到Chrome浏览器中,用户可以通过PHP Console插件来查看这些来自于PHP服务器发来的调试日

  • 利用Console来Debug的10个高级技巧汇总

    利用Console来Debug的10个高级技巧汇总

    前言 在过去的十年中,我最热衷的事情之一就是前端开发(特别是JavaScript).作为一个"匠人",我喜欢专研各种工具.在本文,我会为你介绍一些用老式console来debug的技巧. 是的,我们都知道下面基本的技巧: console.log('Hello World!'); console.info('Something happened-'); console.warn('Something strange happened-'); console.error('Somethin

  • Node.js利用console输出日志文件的方法示例

    通常我们在写Node.js程序时,都习惯使用console.log打印日志信息,但这也仅限于控制台输出,有时候我们需要将信息输出到日志文件中,实际上利用console也可以达到这个目的的,今天就来简单介绍一下. 我们首先创建如下文件: // index.js let fs = require('fs'); let options = { flags: 'a', // append模式 encoding: 'utf8', // utf8编码 }; let stdout = fs.createWri

  • 关于Vue Router的10条高级技巧总结

    关于Vue Router的10条高级技巧总结

    前言 Vue Router 是 Vue.js官方的路由管理器. 它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌. 包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数.查询.通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式,在 IE9 中自动降级 自定义的滚动条行为 本文是作者是实际项目中遇到的一些总结,主要包括: 响应路由参数变化 路由匹配 高级匹配模

  • Js利用console计算代码运行时间的方法示例

    前言 本文主要给大家介绍了关于Js用console计算代码运行时间的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 需求 如果学习前端一定时间以后,就会考虑性能方面的问题.那么问题来了,我们怎么计算出一段代码的运行时间呢? 使用console.log配合Date对象计算 比如,我们计算sort方法排序十万个随机数组成的数组需要用多长时间的话,可以这么写: var arr = []; for(var i=0; i<100000; i++){ arr.push(Math.

  • 利用Jacob将Excel转换PDF的问题汇总

    目录 前言 问题一.Excel数据列较多时,PDF中列打印不全, 问题二.大量数据时,PDF页模糊解决 总结 前言 好久不见,分享一个近期在项目开发中遇到的一个新问题,关于使用easyexcel生成Excel,并且使用jacob转换成PDF的需求,最开始的时候在网上找了一些相关的教程,经过筛选之后发现还是使用jacob调用office软件来进行转换是最可靠的.然后就和大家出了一篇关于使用jacob将Excel文件转换PDF的教程,Excel转换PDF两种方法总结 但是后来我在实践操作中发现,原来

  • 除Console.log()外更多的Javascript调试命令

    Console 对象提供对浏览器控制台的接入(如:Firefox 的 Web Console).不同浏览器上它的工作方式是不一样的,但这里会介绍一些大都会提供的接口特性. Console对象可以在任何全局对象中访问,如 Window,WorkerGlobalScope 以及通过属性工作台提供的特殊定义. 它被浏览器定义为 Window.Console,也可被简单的 Console 调用. 最常用的方法就是Console.log(),就是在控制台输出内容.刚开始学前端的时候看到大家都是用的Cons

  • JavaScript高级程序设计（第3版）学习笔记10 再访js对象

    1.对象再认识 (1)对象属性和特性 什么是属性(Property),什么是特性(Attribute),这有什么区别?我不想也不会从语义学上去区分,对于这系列文章来说,属性就是组成对象的一个部分,广义上也包括对象的方法,而特性则是指被描述主体所具有的特征,换句话说,属性是我们可以通过编码来访问的具体存在,而特性则主要是为了便于理解概念的抽象存在,当然,特性也可以通过相应的属性来具体外化.这一小节所讲的对象属性的特性就是对对象属性特征的一个描述,主要来自于ECMA-262规范的第5版,该规范使用两

  • 前端开发不得不知的10个最佳ES6特性

    为了保证可读性,本文采用意译而非直译,并且对源代码进行了大量修改.另外,本文版权归原作者所有,翻译仅用于学习. ES6,正式名称是ECMAScript2015,但是ES6这个名称更加简洁.ES6已经不再是JavaScript最新的标准,但是它已经广泛用于编程实践中.如果你还没用过ES6,现在还不算太晚- 下面是10个ES6最佳特性,排名不分先后: 函数参数默认值 模板字符串 多行字符串 解构赋值 对象属性简写 箭头函数 Promise Let与Const 类 模块化 函数参数默认值 不使用ES6

  • 一步步教你3个月打造10万IP的流量（实战演练）

    最近很想写一篇这样的文章,想总结出所有常用的和不常用的推广方法．分析如何在短期内打造高流量网站．昨天在公司写了一个前言部分,但是公司的安全系统太强了,超过200字就不能发．所以准备整理一下再发,除了前言部分,还打算分为第一讲,第二讲,总共打算写十讲．有一部分推广方法是大家常用的,另外一部分是自己总结和被大家忽视的．本人所讲的内容,绝对可以号称＂实战演练＂,拿一个流量为0的网站三个月做到10万IP给家看,但我每天只能最多用一个小时上落伍,因为其它时间都用来推广和策划的.(写于2005-11-18)

随机推荐