资讯专栏INFORMATION COLUMN

Javascript调试命令——你只会Console.log() ?

Ocean / 3106人阅读

摘要:调试命令你只会对象提供对浏览器控制台的接入如的。分类输出不同类别信息的输出文字信息提示信息警告信息错误信息分组输出使用和包裹分组内容。中的参数作为计时器的标识,具有唯一性。应该需要其他的调试工具。

Javascript调试命令——你只会Console.log() ?
Console 对象提供对浏览器控制台的接入(如:Firefox 的 Web Console)。不同浏览器上它的工作方式是不一样的,但这里会介绍一些大都会提供的接口特性。
Console对象可以在任何全局对象中访问,如 Window,WorkerGlobalScope 以及通过属性工作台提供的特殊定义。
它被浏览器定义为 Window.Console,也可被简单的 Console 调用。

最常用的方法就是Console.log(),就是在控制台输出内容。刚开始学前端的时候看到大家都是用的Console.log(),几乎没有见过Console的其他用法,难道Console真的没有别的用法了?查了一下后发现Console还是非常强大的,至于为什么很少看到有人用可能是因为用过都删掉了吧。在此记录一下Console的其他用法。

注意:因为Console 对象提供对浏览器控制台的接入 所以在不同浏览器中的支持及表现形式可能不太一样,但是调试内容只有我们开发者会看,所以保证开发环境能用这些方法就可以了,下面演示全部都为Chrome上面的效果。

分类输出

不同类别信息的输出

console.log("文字信息");
console.info("提示信息");
console.warn("警告信息");
console.error("错误信息");

分组输出

使用Console.group()Console.groupEnd()包裹分组内容。

还可以使用Console.groupCollapsed()来代替Console.group()生成折叠的分组。

console.group("第一个组");
    console.log("1-1");
    console.log("1-2");
    console.log("1-3");
console.groupEnd();

console.group("第二个组");
    console.log("2-1");
    console.log("2-2");
    console.log("2-3");
console.groupEnd();

Console.group()还可以嵌套使用

console.group("第一个组");
    console.group("1-1");
        console.group("1-1-1");
            console.log("内容");
        console.groupEnd();
    console.groupEnd();
    console.group("1-2");
        console.log("内容");
        console.log("内容");
        console.log("内容");
    console.groupEnd();
console.groupEnd();

console.groupCollapsed("第二个组");
    console.group("2-1");
    console.groupEnd();
    console.group("2-2");
    console.groupEnd();
console.groupEnd();

表格输出

使用console.table()可以将传入的对象,或数组以表格形式输出。适合排列整齐的元素

var Obj = {
    Obj1: {
        a: "aaa",
        b: "bbb",
        c: "ccc"
    },
    Obj2: {
        a: "aaa",
        b: "bbb",
        c: "ccc"
    },
    Obj3: {
        a: "aaa",
        b: "bbb",
        c: "ccc"
    },
    Obj4: {
        a: "aaa",
        b: "bbb",
        c: "ccc"
    }
}

console.table(Obj);

var Arr = [
    ["aa","bb","cc"],
    ["dd","ee","ff"],
    ["gg","hh","ii"],
]

console.table(Arr);

查看对象

使用Console.dir()显示一个对象的所有属性和方法
在Chrome中Console.dir()Console.log()效果相同

var CodeDeer = {
    nema: "CodeDeer",
    blog: "www.xluos.com",
        
}
console.log("console.dir(CodeDeer)");
console.dir(CodeDeer);

console.log("console.log(CodeDeer)");
console.log(CodeDeer);

查看节点

使用Console.dirxml()显示一个对象的所有属性和方法
在Chrome中Console.dirxml()Console.log()效果相同

百度首页logo的节点信息

条件输出

利用console.assert(),可以进行条件输出。

当第一个参数或返回值为真时,不输出内容

当第一个参数或返回值为假时,输出后面的内容并抛出异常

console.assert(true, "你永远看不见我");
console.assert((function() { return true;})(), "你永远看不见我");

console.assert(false, "你看得见我");
console.assert((function() { return false;})(), "你看得见我");

计次输出

使用Console.count()输出内容和被调用的次数

(function () {
    for(var i = 0; i < 3; i++){
        console.count("运行次数:");
    }
})()

追踪调用堆栈

使用Console.trace()来追踪函数被调用的过程,在复杂项目时调用过程非常多,用这个命令来帮你缕清。

function add(a, b) {
    console.trace("Add function");
    return a + b;
}

function add3(a, b) {
    return add2(a, b);
}

function add2(a, b) {
    return add1(a, b);
}

function add1(a, b) {
    return add(a, b);
}

var x = add3(1, 1);

计时功能

使用Console.time()Console.timeEnd()包裹需要计时的代码片段,输出运行这段代码的事件。

Console.time()中的参数作为计时器的标识,具有唯一性。

Console.timeEnd()中的参数来结束此标识的计时器,并以毫秒为单位返回运行时间。

最多同时运行10000个计时器。

console.time("Chrome中循环1000次的时间");
for(var i = 0; i < 1000; i++)
{

}
console.timeEnd("Chrome中循环1000次的时间");

性能分析

使用Console.profile()Console.profile()进行性能分析,查看代码各部分运行消耗的时间,但是我在Chrome自带的调试工具中并没有找到在哪里查看这两个方法生成的分析报告。应该需要其他的调试工具。

具体参考这里:
http://www.oschina.net/transl...

有趣的Console.log()

最后再来介绍一下强大的Console.log(),这个方法有很多的用法(其他输出方法的用法,如error()等,可以参照log()使用)。

一、提示输出

可以再输出的对象、变量前加上提示信息,增加辨识度

var ans = 12345;
console.log("这是临时变量ans的值:",ans);

二、格式化输出
占位符 含义
%s 字符串输出
%d or %i 整数输出
%f 浮点数输出
%o 打印javascript对象,可以是整数、字符串以及JSON数据

样例:

var arr = ["小明", "小红"];

console.log("欢迎%s和%s两位新同学",arr[0],arr[1]);

console.log("圆周率整数部分:%d,带上小数是:%f",3.1415,3.1415);

三、自定义样式

使用%c为打印内容定义样式,再输出信息前加上%c,后面写上标准的css样式,就可以为输出的信息添加样式了

console.log("%cMy stylish message", "color: red; font-style: italic");

console.log("%c3D Text", " text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");

console.log("%cRainbow Text ", "background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;");

console.log("%cMy name is classicemi.", "color: #fff; background: #f40; font-size: 24px;");

总结

Console的用法很多,有些再调试过程中非常实用,可以节省很多时间。当然我知道debug还是用断点调试的方法比较好,但是小问题用“printf大法”也是很好用的(滑稽脸)。

参考资料

https://developer.mozilla.org...

http://www.jb51.net/article/5...

https://segmentfault.com/a/11...

https://www.cnblogs.com/liyun...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92727.html

相关文章

  • AST抽象语法树——最基础的javascript重点知识,99%的人根本不了解

    摘要:抽象语法树,是一个非常基础而重要的知识点,但国内的文档却几乎一片空白。事实上,在世界中,你可以认为抽象语法树是最底层。通过抽象语法树解析,我们可以像童年时拆解玩具一样,透视这台机器的运转,并且重新按着你的意愿来组装。 抽象语法树(AST),是一个非常基础而重要的知识点,但国内的文档却几乎一片空白。本文将带大家从底层了解AST,并且通过发布一个小型前端工具,来带大家了解AST的强大功能 ...

    godiscoder 评论0 收藏0
  • 提高 JavaScript 开发效率的高级 VSCode 扩展之二!

    摘要:将这些命令绑定到键盘快捷键是有帮助的,例如向上箭头用于平衡向外,而向下箭头用于平衡向内。是和的快速原型开发平台。 本系列的第一篇可以在这里看到: 提高 JavaScript 开发效率的高级 VSCode 扩展! showImg(https://segmentfault.com/img/bVbnn2j?w=1254&h=768); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质...

    cyrils 评论0 收藏0
  • 一些你所不知道的VS Code插件

    摘要:摘要你所不知道的系列。允许你写入缩写代码并返回的相应标记,目前已经内置,所以不用配置了。自从年双十一正式上线,累计处理了亿错误事件,付费客户有金山软件百姓网等众多品牌企业。摘要: 你所不知道的系列。 原文:提高 JavaScript 开发效率的高级 VSCode 扩展之二! 作者:前端小智 Fundebug经授权转载,版权归原作者所有。 作为一名业余爱好者、专业人员,甚至是每月只有一次编...

    Near_Li 评论0 收藏0
  • 实用Javascript调试技巧分享

    摘要:见过太多同学调试只会用简单的甚至,看着真为他们捉鸡。。下面我就分享一些实用且聪明的调试技巧,希望能让大家调试自己代码的时候更加从容自信。其实提供了文件的搜索功能,只不过大部分时候我们给忽略了。。 见过太多同学调试Javascript只会用简单的console.log甚至alert,看着真为他们捉鸡。。因为大多数同学追求优雅而高效地写代码,却忽略了如何优雅而高效地调试代码,不得不说是有点...

    jk_v1 评论0 收藏0
  • JavaScript 编程精解 中文第三版 八、Bug 和错误

    摘要:幸运的是,使用符号创建的构造器,如果在不使用来调用,则始终会报错,即使在非严格模式下也不会产生问题。 来源:ApacheCN『JavaScript 编程精解 中文第三版』翻译项目原文:Bugs and Errors 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了《JavaScript 编程精解(第 2 版)》 调试的难度是开始编写代码的两倍。 因此,如...

    wujl596 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<