Javascript调试之console对象——你不知道的一些小技巧

前言

写过前端Javascript代码的同学肯定不会对console对象感到陌生，在调试的过程中我们经常会用console对象在控制台输出一些常量或者变量。

但是相信很多人也就只用过console.log()这一个方法，今天我们就一起来看看console对象还有哪些比较有用的方法。由于本篇文章是跟控制台有关，代码就直接在控制台展现而没有另外用新文件展示。

不同级别日志

通过console对象的不同方法，可以在控制台上输出不同级别的日志信息，它们会采用不同的标志来展示，如下图所示。

不同级别的日志

Javascript调试之console对象，它的一些小技巧你都知道吗？

包含占位符

在输出信息时可以通过%占位符来指定对应的值，而不用总是采用拼接字符串的方法。支持的占位符包括以下几种。

  • %s - 字符
  • %d - 整数
  • %f - 浮点数
  • %o - 对象

通过以下一个简单的例子可以看出其用法。

包含占位符

Javascript调试之console对象，它的一些小技巧你都知道吗？

打印分组信息

通过group()方法可以以分组的形式展示出信息，类似于列表结构。

打印分组信息

Javascript调试之console对象，它的一些小技巧你都知道吗？

表达式判断

在一些测试框架中，经常会用assert断言来判断一个表达式的值是否为真。同样在console对象中也有assert方法，在断言为真时并不会输出任何信息，而在断言为false时，直接抛出异常。

表达式判断

上述代码中前两条语句判断结果都为true，所以没有输出任何信息，第三条语句判断结果为false，所以会直接抛出异常。

表格打印

console对象有个table方法，可以直接将对象类型的数据以表格展示。

表格打印

函数调用栈信息

通过console.trace()方法可以展示出函数调用栈的信息，来查看函数调用过程，一般会选择将这个方法放在最后执行的函数的方法体中。

函数调用栈信息

由于栈是先进后出机制，所以先执行的方法会在后面输出，因此上述代码结果会按照sum, f2, f1的顺序输出。

计时

一般统计一段代码执行耗时，方法会是通过Date对象获取毫秒数，然后将两个毫秒数进行相减。

一般计时方法

在上述代码中通过endTime和startTime两个变量的差值来计算出中间执行代码的耗时，我们可以看出往一个数组中添加100000个字符串耗时为15毫秒。

同样可以通过console对象的time()和timeEnd()方法来统计代码段的执行耗时。time()和timeEnd()可以接收一个字符串作为标识，而且两个方法接收的字符串必须一样，如果没有传入字符串则默认为‘default'字符串。

console对象计时方法

上述代码执行结果为16毫秒，与之前那个方法产生的结果大致一样。

性能分析

通过console.profile()和console.profileEnd()方法，可以展示出代码中各个函数执行所消耗的时间，可以用来评估代码性能。

我们使用以下测试代码来进行说明。

打开chrome浏览器的控制台会有一个Javascript Profile菜单栏，如果默认情况下没有的话，可以按照以下方法打开。

Javascript Profile

打开这个菜单选项后，我们可以看出每个方法执行消耗的时间。

时间消耗

以上所述是小编给大家介绍的Javascript调试之console对象——你不知道的一些小技巧，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • js调试工具Console命令详解

    js调试工具Console命令详解

    一.显示信息的命令 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="te

  • 9个让JavaScript调试更简单的Console命令

    9个让JavaScript调试更简单的Console命令

    一.显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascri

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

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

  • 深入分析javascript中console命令

    深入分析javascript中console命令

    一.显示信息的命令 代码如下: <!DOCTYPE html> <html> <head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/ja

  • Javascript调试之console对象——你不知道的一些小技巧

    Javascript调试之console对象——你不知道的一些小技巧

    前言 写过前端Javascript代码的同学肯定不会对console对象感到陌生,在调试的过程中我们经常会用console对象在控制台输出一些常量或者变量. 但是相信很多人也就只用过console.log()这一个方法,今天我们就一起来看看console对象还有哪些比较有用的方法.由于本篇文章是跟控制台有关,代码就直接在控制台展现而没有另外用新文件展示. 不同级别日志 通过console对象的不同方法,可以在控制台上输出不同级别的日志信息,它们会采用不同的标志来展示,如下图所示. 不同级别的日志

  • js 对象使用的小技巧实例分析

    js 对象使用的小技巧实例分析

    本文实例讲述了js 对象使用的小技巧.分享给大家供大家参考,具体如下: js中中,Object,Array ,Function 等都属于引用类型,他们的变量名都是指向对象的指针. 这样就有一个好处,当处理一个复杂json树的时候,想要单独改变其中某一个子对象属性时,不需要根据对象id遍历查找到这个对象了,而是可以直接通过事件方式将这个对象通过参数的方式赋值给一个专属变量,这个变量就指向这个对象,这样就可以随意改变对象属性了.改变这个变量对应的对象,整个json树中的这个对象也被相应的改变. 下面

  • 处理JavaScript值为undefined的7个小技巧

    前言 我刚刚开始学习JavaScript时,大约是八年前,当时我对于undefined 和 null 比较困惑 ,因为他们都表示空值. 他们有什么明确的区别吗?他们似乎都可以定义一个空值,而且 当你进行 在做null ===undefined 的比较时,结果是true. 现在的大多数语言,像Ruby, Python or Java,他们有一个单独的空值(nil 或 null),这似乎才是一个合理的方式. 而在JavaScript里,当你要获取一个变量或对象(未初始化)的值时,js引擎会返回 un

  • 学习JavaScript一定要知道的3个小技巧

    目录 一.神奇的扩展运算符 1.拷贝数组 2.合并数组 3.展开对象 二.进行空检查的最佳方法 1.可选链操作符 2.空值合并运算符 三.使用 .map()..reduce() 和 .filter() 前言: 通常在 Angular 或 React 项目中,code review 时看到一些老式的 JavaScript 代码,就会将开发人员归类为初学者.但是,如果您知道以下 3 个技巧,您将被视为现代 JavaScript 的尤达大师.那么,让我们开始我们的旅程吧! 一.神奇的扩展运算符 扩展运

  • JavaScript前端开发时数值运算的小技巧

    1.格式化金钱值 const ThousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); const money = ThousandNum(20190214); // money => "20,190,214" 2.取整代替正数的Math.floor(),代替负数的Math.ceil() const num1 = ~~ 1.69; const num2 = 1.6

  • JavaScript调试之console.log调试的一个小技巧分享

    JavaScript调试之console.log调试的一个小技巧分享

    前言 对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻断JavaScript程序的执行,从而造成副作用: alert弹出框需要点击确认比较麻烦,而console.log()仅在控制台中打印相关信息,因此不会造成类似的顾虑. 最重要的是alert只能输出字符串,不能输出对象里面的结构,console.log()可以接受任何字符串.数字和JavaScript对象,可以看到清楚的对象属性结构,在ajax返回jso

  • 总结两个Javascript的哈稀对象的一些编程技巧

    我喜欢从最基础的内容讲起,然后慢慢深入,高手可能要给点耐心啊. 先看一个最简单的应用.在下面的代码中,我们需要实现一个功能,就是点击每个按钮显示相应的网址 复制代码 代码如下: <input type="button" value="百度" onclick="javascript:showUrl(this)">  <input type="button" value="Google" on

  • javascript同步服务器时间和同步倒计时小技巧

    javascript同步服务器时间和同步倒计时小技巧

    之前在网上看到有人提问,如何在页面上同步显示服务器的时间,其实实现方法有几种,可能 一般人立马就想到可以使用Ajax每隔一秒去请求服务器,然后将服务器获取到时间显示在页面上,这样虽然能够实现,但存在一个很大的问题,那就是每隔一秒 去请求服务器,这样如果用户多了,服务器就会崩溃(内存占用率会很大),所以在我看来,这种方法不可行,我这里给出一种解决方案,能够实现同步服务器时间.同步倒计时,却不占用服务器太多资源,下面我给写实现的思路: 第一步,当用户第一次浏览页面时,服务器首先获取当前时间并显示在页

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

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

  • javascript json对象小技巧之键名作为变量用法分析

    本文实例讲述了javascript json对象小技巧之键名作为变量用法.分享给大家供大家参考,具体如下: 有时候在项目开发过程中,我们需要json对象的键名作为一个变量,键名可变,传统的json格式不支持这个,怎么办呢? 传统的json数据格式 <script type="text/javascript"> var json={ name : "谭勇" } console.log(json.name); </script> 这样是没有问题的

随机推荐