console.log() 之外的调试技巧

console.log( ) 是JS开发时常用的小工具,输出一些信息来辅助调试,console 还有很多有用的方法,下面介绍几个方便调试的用法

跟踪堆栈

例如想找出某个函数是被谁调用,如果调用层级较深的话,会让人非常痛苦

使用 console.trace() 可以跟踪他的调用轨迹,明确知道是从哪儿开始调用

function func_A () {

func_B(1, 2);

}

function func_B (arg1, arg2) {

console.trace();

}

func_A();

用表格显示对象信息

使用 console.log() 打印对象信息时,可读性并不太好,例如下面的代码,输出一个数组的内容

var books = [

{ title: "Java", author: "Abc" },

{ title: "C", author: "Obj" },

{ title: "C++", author: "Cof" }

];

console.log (books);

结果如下

如果换成

console.table (books);

可读性就提高很多

计算一段代码的执行时间

如何知道一段代码的运行消耗时间?console.time() 可以轻松解决,例如

console.time ('timer');

for (var i = 0; i < 100000; i++) {

// ...

}

console.timeEnd ('timer');

查看CPU的消耗

通过 console.profile() 可以查看 CPU 的消耗,找出费时的代码,例如

function func_A (num){

for(var i=0;i<num;i++){

console.log('A');

}

}

function func_B (x,y){

for(var i=0;i<x;i++){

for(var j=0;j<y;j++){

console.log('B');

}

}

}

function test (){

func_A(100);

func_B(3,10);

}

console.profile('test');

test ();

console.profileEnd();

test() 函数中调用了 A 和 B 两个函数,查看 test() 分析结果

从中就可以看出哪个函数的执行时间长

self 是函数自身的执行时间

total 表示此函数总执行时间,包括其中调用的函数的执行时间

内容整理自

https://medium.com/outsystems-experts/beyond-console-debugging-tricks-f7d0d7f5df4#.mabwbd28p

是一个国外工程师总结的,其中还有一些其他小技巧,有兴趣的可以去了解下

原文发布于微信公众号 - 性能与架构(yogoup)

原文发表时间:2016-07-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏猿人谷

内存泄露

1.简介       在计算机科学中,内存泄漏(memory leak)指由于疏忽或错误造成程序未能释放已经不再使用的内存的情况。内存泄漏并非指内存在物理...

2288
来自专栏西枫里博客

thinkPHP5模版页面volist循环offset不能使用变量

有这样一个应用场景:当volist循环需要排除前面几个数据的时候,我们通常使用offset来操作。而假设前面要排除的数据是根据当前页面占位符来确定的,而需要排除...

892
来自专栏前端知识分享

第217天:深入理解Angular双向数据绑定的原理

双向绑定是新的前端框架中频繁出现的一个新词汇,也是mvvm的核心原理。angularjs五条核心信念中的数据驱动,便是由双向绑定进行完成。

1642
来自专栏开源优测

RobotFramework怎么写好用例

github地址:https://github.com/robotframework/HowToWriteGoodTestCases/blob/master/H...

2732
来自专栏锦小年的博客

python学习笔记5.2-包和模块的导入

在理解什么是包以及什么是模块之后,就要学会如何去导入包或者模块了,本文主要介绍如何导入包以及在导入包的过程中需要注意一些什么。导入包的核心是使用关键词impor...

2066
来自专栏Python攻城狮

Redis的安装及基本使用1.Redis2.Redis安装3.redis常见配置4.redis数据操作5.redis发布订阅6.主从双备

Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库、缓存和消息中间件。它支持多种类型的数据结构,如 字符串(strings), ...

721
来自专栏屈定‘s Blog

工作--如何封装第三方服务?

业务开发中经常会对接某某第三方服务,因此会经常写一些SDK供服务使用,一种比较好的做法就是使用命令模式封装第三方服务,命令模式对于调用方来说简洁明了,也正是封装...

2312
来自专栏一“技”之长

iOS代码运行的磨刀石-预编译指令 原

所谓预编译,就是程序代码在编译之前,开发工具为我们预先做的一些工作。不要小瞧这些指令,没有它们,我们的代码可能寸步难行。

1002
来自专栏开源优测

RobotFramework怎么写好用例

github地址:https://github.com/robotframework/HowToWriteGoodTestCases/blob/master/H...

1002
来自专栏会跳舞的机器人

java并发编程的艺术笔记第一章——并发编程的挑战

单核处理器也支持多线程执行代码,CPU通过给每个线程分配CPU时间片来实现这个机制。时间片是CPU分配给各个线程的时间,因为时间片非常短,所以CPU通过不停地切...

1063

扫码关注云+社区

领取腾讯云代金券