Console命令，让js调试更简单

短命女 2022-03-02 17:06 321阅读 0赞

# [Console命令，让js调试更简单][Console_js] #

一、显示信息的命令

console.log("normal");           // 用于输出普通信息
    console.info("information");     // 用于输出提示性信息
    console.error("error");          // 用于输出错误信息
    console.warn("warn");            // 用于输出警示信息

![777145-20160910141032129-2030936765.png][]

二、点位符：字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o);

![复制代码][copycode.gif]

console.log("%s","string");                 //字符(%s)
    console.log("%d年%d月%d日",2016,8,29);       //整数(%d或%i)
    console.log("圆周率是%f",3.1415926);         //浮点数(%f)
    var dog = {};
    dog.name = "大毛";
    dog.color = "黄色";
    dog.sex = "母狗";
    console.log("%o",dog);                      //对象(%o)

![复制代码][copycode.gif]

![777145-20160910141206551-1909725216.png][]

三、信息分组 (console.group(),console.groupEnd())

![复制代码][copycode.gif]

console.group("第一组信息");
        console.log("第一组第一条：我的博客");
        console.log("第一组第二条：CSDN");
    console.groupEnd();
    
    console.group("第二组信息");
        console.log("第二组第一条：程序爱好者QQ群");
        console.log("第二组第二条：欢迎你加入");
    console.groupEnd();

![复制代码][copycode.gif]

![777145-20160910141307207-216281946.png][]

四、将对象以树状结构展现 (console.dir()可以显示一个对象所有的属性和方法)

![复制代码][copycode.gif]

var info = {
        name : "Alan",
        age : "27",
        grilFriend : "nothing",
        getName : function(){
            return this.name;
        }
    }
    console.dir(info);

![复制代码][copycode.gif]

![777145-20160910141426738-396986549.png][]

五、显示某个节点的内容 (console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码)

var node = document.getElementById("info");
    node.innerHTML += "<p>追加的元素显示吗</p>";
    console.dirxml(node);

![777145-20160910141623910-593033857.png][]

六、判断变量是否是真 (console.assert()用来判断一个表达式或变量是否为真，只有表达式为false时，才输出一条相应作息，并且抛出一个异常)

var testObj = false;
    console.assert(testObj, '当testObj为false时才输出！');

![777145-20160910141732238-1708682523.jpg][]

七、计时功能 (console.time()和console.timeEnd()，用来显示代码的运行时间)

console.time("控制台计时器");
    for(var i = 0; i < 10000; i++){
        for(var j = 0; j < 10000; j++){}       
    }
    console.timeEnd("控制台计时器");

![777145-20160910141845504-32611280.png][]

八、性能分析performance profile (就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()和console.proileEnd();)

![复制代码][copycode.gif]

![复制代码][copycode.gif]

详细的信息在chrome控制台里的"profile"选项里查看

![777145-20160910141958957-84051636.jpg][]

九、console.count()统计代码被执行的次数

![复制代码][copycode.gif]

function myFunction(){
        console.count("myFunction 被执行的次数");
    }
    myFunction();       //myFunction 被执行的次数: 1
    myFunction();       //myFunction 被执行的次数: 2
    myFunction();       //myFunction 被执行的次数: 3

![复制代码][copycode.gif]

![777145-20160910142250441-1981258369.jpg][]

十、keys和values，要在浏览器里输入

![777145-20160910142314988-1073223360.jpg][]

十一、console.table表格显示方法

![复制代码][copycode.gif]

var mytable = [
        {
            name: "Alan",
            sex : "man",
            age : "27"
        },
        {
            name: "Wu",
            sex : "gril",
            age : "28"
        },
        {
            name: "Tao",
            sex : "man and gril",
            age : "29"
        }
    ]
    console.table(mytable);

![复制代码][copycode.gif]

![777145-20160910142355848-1537368736.png][]

十二、Chrome 控制台中原生支持类jQuery的选择器，也就是说你可以用$加上熟悉的css选择器来选择DOM节。

$("body");           //选择body节点

![777145-20160910142430504-1813497996.jpg][]

十三、copy通过此命令可以将在控制台获取到的内容复制到剪贴板

copy(document.body);                      //复制bodycopy(document.getElementById("info"));    //复制某id元素的的节点

![777145-20160910142507519-684399550.jpg][]

十四、$\_命令返回最近一次表达式执行的结果，$0-$4代表了最近5个你选择过的DOM节点

![777145-20160910142644848-1329402825.gif][]

十五、利用控制台输出文字,图片,以%c开头，后面的文字就打印的信息，后面一个参数就是样式属性；

console.log("请在邮件中注明%c 来自:console","font-size:16px;color:red;font-weight:bold;");

![777145-20160910142724629-65894045.png][]

[Console_js]: https://www.cnblogs.com/alantao/p/5859358.html
[777145-20160910141032129-2030936765.png]: /images/20220302/6446d0b9ddf54811b3b34e31a0cfcc04.png
[copycode.gif]: /images/20220302/e3bbee265ed74609b5bd160ffcbac630.png
[777145-20160910141206551-1909725216.png]: /images/20220302/cffd4af206f4463db51ef9fabfa8f68d.png
[777145-20160910141307207-216281946.png]: /images/20220302/0f554e802d5b42d5bf6e85ab76a4539f.png
[777145-20160910141426738-396986549.png]: /images/20220302/289656b36270482684c1d3d1933d5206.png
[777145-20160910141623910-593033857.png]: /images/20220302/c319f26ce8c04a98b854d0757fdd6400.png
[777145-20160910141732238-1708682523.jpg]: /images/20220302/0f7dcc9d2c644a639700554a54eec704.png
[777145-20160910141845504-32611280.png]: /images/20220302/0428ca1994104e9ba25050917ec842b0.png
[777145-20160910141958957-84051636.jpg]: /images/20220302/a248bf8201da4010bbc8a1a3b9c2e866.png
[777145-20160910142250441-1981258369.jpg]: /images/20220302/e49cc11ce19c49eb973b89419eac316f.png
[777145-20160910142314988-1073223360.jpg]: /images/20220302/967146298e4b49bd802bb324d836991e.png
[777145-20160910142355848-1537368736.png]: /images/20220302/c565bbc8858642d59e6e7fa4082abe22.png
[777145-20160910142430504-1813497996.jpg]: /images/20220302/90faef9522274dcfa3c4656088963aa9.png
[777145-20160910142507519-684399550.jpg]: /images/20220302/653c469716b0478fbe8535ec785232f7.png
[777145-20160910142644848-1329402825.gif]: /images/20220302/50e983d941914f1e8d00aa60d9d943bb.png
[777145-20160910142724629-65894045.png]: /images/20220302/c2c18c1170a249f698a87c6517c7fd93.png