文档章节

【JS调试】Console使用详解

冷冷gg
 冷冷gg
发布于 2016/12/09 15:10
字数 1190
阅读 65
收藏 0
点赞 0
评论 0

1.凡人视角

打印字符串

代码:

console.log("I am a 凡人");

打印提示消息

代码:

console.info("Yes, you arm a 凡人");

打印警告消息

代码:

console.warn("凡人你居然敢窥视我");

打印错误消息

代码:

console.error("天兵天将,把这个凡人给我打入地狱");

打印调试信息

console.debug("我就是传说中的debug");

2.上帝视角

查看所有方法

console 除了上面的几个方法还有什么方法呢?log 除了能打印字符串外,还能打印出对象,我们可以利用 console.log 打印自己。

代码:

console.log(console);

输出:

Object {
    assert: ...,
    clear: ...,
    count: ...,
    debug: ...,
    dir: ...,
    dirxml: ...,
    error: ...,
    group: ...,
    groupCollapsed: ...,
    groupEnd: ...,
    info: ...,
    log: ...,
    markTimeline: ...,
    profile: ...,
    profileEnd: ...,
    table: ...,
    time: ...,
    timeEnd: ...,
    timeStamp: ...,
    timeline: ...,
    timelineEnd: ...,
    trace: ...,
    warn: ...
}

啊咧咧?怎么这么多方法。其实上面的 console 方法 不一定每个浏览器 都有实现,我这边使用的是 chrome浏览器 。所以说,这个特性是非标准的,请尽量不要在 生产环境 中使用它。

但是我们可以在 开发环境 中,合理的利用 这些方法来帮助我们开发。

清理控制台

如果我们在控制台调试的时候,难免 强迫症 发作想清理掉已经乱七八糟的控制台。浏览器和命令行 clear 一样提供了一个清理函数

console.clear() 

当然我们也可以用 chrome 的 command line api 来清理控制台。

clear()

又或者可以使用按键Mac上 cmd + k ,Win ctrl + l(我用的是chrome浏览器)。

分组

当代码非常长,或者我们需要把一个函数,或者一个文件中的函数等区分出来。我们可以使用分组来实现。

代码:

console.group('凡人');
console.log("手");
console.log("脚");
console.groupEnd();

console.group('神');
console.log("法力无边");
console.log("腾云架雾");
console.groupEnd();

输出:

如果想要输出为折叠,我们可以使用

console.groupCollapsed

,用法和 console.group 类似。

查看对象信息

有时候我们需要打印出对象信息,可以使用 console.log 来进行简单的输出。

代码:

var person = {
    head: 1,
    hand: 2,
    leg: 2
};
console.log(person);

呜呜,可是这个显示得好丑,我们这个时候就可以使用传说中的神器 console.table 来帮助我们清楚的显示 关联数组信息。

var data = [
    {
        '姓名': '幼儿园', 
        '性别': '女'
    },
    {
        '姓名': '李狗嗨',
        '数量': 1
    }
];
console.table(data);

但是如果想要看详细的对象信息,我们可以使用 console.dir,将一个 JavaScript 对象的所有属性和属性值显示成一个可交互的列表,它还能打印出函数等。

console.dir(clear);

什么?你想看某个节点中的html代码?没事,我们可以用 console.dirxml 来查看页面中对应元素的 html/xml 内容。

html代码:

<div id='person'>
    <p>I am a 凡人</p>
</div>

javascirpt代码:

var person = document.getElementById('person');
console.dirxml(person);

性能测试

雷军粑粑老是喜欢说:“不服?跑个分。”有时候,我们也需要对代码跑个分。这个时候,我们可以使用console.time和console.timeEnd,他们可以记录代码运行所花费的时间。

console.time("神机妙算");
(function () {
    for(var i = 0; i < 10; i++) {
        var sum = (function () {
            var flog = 0;
            for(var i = 0; i < 10; i++) {
                flog+=i;
            }
        })();
    }
})();
console.timeEnd("神机妙算");

啊咧咧?你这个顶多就是 计时器 怎么能说是 性能测试 。客官别急,我们这还有一个叫做 console.profile 和 console.profileEnd 姐妹呢~~

console.profile("神机妙算");
(function () {
    for(var i = 0; i < 10; i++) {
        var sum = (function () {
            var flog = 0;
            for(var i = 0; i < 10; i++) {
                flog+=i;
            }
        })();
    }
})();
console.profileEnd("神机妙算");

输出会显示在 profile

什么还是不够?你还想知道运行时的结果栈?可以可以,我们这还有一位 console.trace 哦。他可以看透大爷你的一局一动哦。 代码:

function add(num) {
    if (0 < num) {
        console.trace("现在num的值为", num);
        return num + add(num - 1);
    } else {
        return 0;
    }
}

var a =3;
add(3);

判断真假

平时我们在写代码是时候,经常需要判断一下当前值的真假情况,使用if或者三元表达式来达到目的。我们现在也可以使用 console.assert 来判断,该方法会在条件为错误时,返回一个 console.error 的输出。 断言

console.assert(1 == 1);
console.assert(1 == 0);
console.assert(!(1 == 0));

####统计次数

有时候我们需要统计一个函数或者被调用了几次,我们通常会增加一个变量 count 来记录,然后在控制台中查看。这样相当的麻烦,我们可以使用 console.count 函数来帮忙我们记录次数,并输出。

function hi(name) {
    console.count(name);
    return "hi " + name;
}

for(var i = 0; i < 10; i++) {
    if(i < 4) {
        hi("person");
    } else {
        hi("god");
    }
}

总结

console 中有很多对我们调试代码有帮助的函数,我们可以在开发环境中配合 console 来调试代码,使得我们测试更加便利。

本文转载自:https://segmentfault.com/a/1190000006721606

共有 人打赏支持
冷冷gg
粉丝 246
博文 106
码字总数 46179
作品 1
潍坊
UI设计师
Qt Quick调试之显示代码行号

QML 文档可以使用 console 对象来打印日志信息,可默认是无法输出行号的。帮助文档中说需要设置 QMLCONSOLEEXTENDED 环境变量即可,测试了一下不管用。后来找到 qt.gitorious.org 上的一个文...

foruok ⋅ 2014/10/31 ⋅ 0

Firebug 控制台详解

感觉很有用,下文转自:http://www.ruanyifeng.com/blog/2011/03/firebugconsole_tutorial.html 作者: 阮一峰 日期: 2011年3月26日 Firebug是网页开发的利器,能够极大地提升工作效率。 但...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

Firebug 控制台详解

感觉很有用,下文转自:http://www.ruanyifeng.com/blog/2011/03/firebugconsole_tutorial.html 作者: 阮一峰 日期: 2011年3月26日 Firebug是网页开发的利器,能够极大地提升工作效率。 但...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

Firebug控制台详解

Firebug控制台详解 作者:阮一峰 控制台(Console)是Firebug的第一个面板,也是最重要的面板,主要作用是显示网页加载过程中产生各类信息。 一、显示信息的命令 Firebug内置一个console对象...

k_k_anna ⋅ 2015/03/17 ⋅ 0

Firebug控制台详解

Firebug是网页开发的利器,能够极大地提升工作效率。 但是,它不太容易上手。我曾经翻译过一篇《Firebug入门指南》,介绍了一些基本用法。今天,继续介绍它的高级用法。 ==================...

阮一峰 ⋅ 2011/03/26 ⋅ 0

bootargs参数详解

U-boot的环境变量值得注意的有两个: bootcmd 和bootargs。 u-bootcmd 前面有说过bootcmd是自动启动时默认执行的一些命令,因此你可以在当前环境中定义各种不同配置,不同环境的参数设置,然...

WXXGoodJob ⋅ 2017/09/20 ⋅ 0

JavaScript之apply、call详解

call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向。 call 和 apply二者的作用完全一样,只是接受参数的方式不太一样。...

飛飛飛jjs ⋅ 2016/11/22 ⋅ 0

hadoop日志:项目日志输出级别和日志存放路径详解

1.hadoop项目日志输出级别 首先了解log4j的基本知识,参考之前的博客。 对于hadoop来说,日志很繁杂。对于输出日志的级别,首先查看hadoop的日志文件log4j.properties log4j.rootLogger=${h...

cjun1990 ⋅ 2015/07/27 ⋅ 0

this详解:JAVASCRIPT中的this到底是谁?

this详解:JAVASCRIPT中的this到底是谁? 语法 this 全局对象 在全局执行上下文(函数之外),this引用的是全局对象. 函数 在函数里面,this这个值,得看怎么来调用这个函数 简单的调用 在这个例子中...

517270667 ⋅ 2017/06/27 ⋅ 0

JQUERY的Deferred应用

1)与$.when()一起调用 $.when()提供了一种根据Defererred对象的状态来执行回调函数的办法。它接受一个或者多个Defeered对象。 $(function(){ $.when($.ajax('test.html')).then(function(da...

墙头草 ⋅ 2011/07/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

聊聊spring cloud gateway的LoadBalancerClientFilter

序 本文主要研究一下spring cloud gateway的LoadBalancerClientFilter GatewayLoadBalancerClientAutoConfiguration spring-cloud-gateway-core-2.0.0.RELEASE-sources.jar!/org/springfram......

go4it ⋅ 43分钟前 ⋅ 0

详解:Nginx反代实现Kibana登录认证功能

Kibana 5.5 版后,已不支持认证功能,也就是说,直接打开页面就能管理,想想都不安全,不过官方提供了 X-Pack 认证,但有时间限制。毕竟X-Pack是商业版。 下面我将操作如何使用Nginx反向代理...

问题终结者 ⋅ 49分钟前 ⋅ 0

002、nginx配置虚拟主机

一、nginx配置虚拟主机可分为三种方式,分别为: 1、基于域名的虚拟主机,通过域名来区分虚拟主机——应用:外部网站 2、基于端口的虚拟主机,通过端口来区分虚拟主机——应用:公司内部网站...

北岩 ⋅ 52分钟前 ⋅ 0

shell脚本之死循环写法

最近在学习写shell脚本,在练习if while等流程控制时,突然它们的死循环写法是怎么样的?经过百度与亲测记录如下: for死循环 #! /bin/bashfor ((;;));do date sleep 1d...

hensemlee ⋅ 54分钟前 ⋅ 0

苹果的ARKit2.0有多可怕,看了就知道

序言 ARKit主要由三部分组成: 跟踪(Tracking) 跟踪是ARKit的核心组件之一,其提供了设备在物理世界中的位置与方向信息,并对物体进行跟踪,如人脸。 2.场景理解(Scene Understanding) 场...

_小迷糊 ⋅ 55分钟前 ⋅ 0

5.1 vim介绍 5.2 vim移动光标 5.3 ,5.4vim一般模式下移动光标,复制粘贴

vim命令 vim是vi的一个升级版;vim可以显示文字的颜色 安装vim这一个包vim-enhanced 如果不知道安装包,可以使用 命令下面命令来查看vim命令是那个包安装的。 [root@linux-128 ~]# yum prov...

Linux_老吴 ⋅ 59分钟前 ⋅ 0

vim一般模式

vim 是什么 vim是什么 ? 在之前接触Linux,编辑网卡配置文件的时候我们用过了vi ,vim简单说就是vi的升级版,它跟vi一样是Linux系统中的一个文本编辑工具。 如果系统中没有vim ,需要安装一...

李超小牛子 ⋅ 今天 ⋅ 0

docker实战

构建企业级Docker虚拟化平台实战 重点剖析虚拟化和云计算概念; 分析Docker虚拟化的概念和原理; 从0开始实战Docker虚拟化平台; 基于Docker构建Nginx WEB服务器和CentOS虚拟机; 基于开源监...

寰宇01 ⋅ 今天 ⋅ 0

vim介绍、vim颜色显示和移动光标、vim一般模式下移动光标、一般模式下复制粘贴剪切

VIM Vim 是 UNIX 文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff),语法高亮,全面的帮助系统,本地脚本(Vimscript),和便于选择的...

蛋黄Yolks ⋅ 今天 ⋅ 0

springboot+mockito测试controller层遇到的问题

使用MockitoJUnitRunner测试的一个例子,原来报错无法找到bean, 类似的异常如下:createBeanError..... 原因:是因为@Runwith使用了SpringRunner,应该修改为MockitoJUnitRunner 代码如下: ...

writeademo ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部