九个让JavaScript调试更简单的console命令_javascript console增强-优快云博客

本文链接：https://blog.youkuaiyun.com/u014346301/article/details/52261008

本文详细介绍了浏览器控制台中常用的Console命令，包括显示信息、占位符使用、信息分组、对象展示、节点内容显示、变量真假判断、函数调用追踪、计时及性能分析等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、显示信息的命令

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>常用console命令</title>
</head>

<body>
<script>
    console.log("hello");
    console.info("info");
    console.error("error");
    console.warn("warn");
</script>
</body>
</html>

效果如下：
console命令

二、占位符

console的上述命令都支持printf的占位符格式，支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）。

<script>
    console.log("%d年%d月%d日",2016,8,20);
</script>

效果如下：
占位符

三、信息分组

<script>
    console.group("第一组");
    console.log("第一组第一个");
    console.log("第一组第二个");
    console.groupEnd();

    console.group("第二组");
    console.log("第二组第一个");
    console.log("第二组第二个");
    console.groupEnd();

</script>

效果如下：
信息分组

四、查看对象的信息

console.dir()可以显示一个对象的所有属性和方法。

<script>
    var o = {
        naem:"weiqi",
        age:23,
        job:"banzhuan"
    };
    console.dir(o)
</script>

效果如下：
显示信息

五、显示某个节点的内容

console.dirxml()用来显示某个节点(node)所包含的HTML/XML代码。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>常用console命令</title>
</head>

<body>
<div id="dir">
    <h1>我的博客</h1>
    <p>内容</p>
</div>
<script>
    var dir = document.getElementById("dir");
    console.dirxml(dir);
</script>
</body>
</html>

效果如下：
dirxml

六、判断变量是否是真

console.assert()方法用来判断一个表达式或者变量是否是真。如果结果为否，则控制台输出相应的信息并抛出一个异常。

<script>
    var s1 = 2014;
    console.assert(s1 == 2014);
    console.assert(s1 == 2015);
</script>

效果如下：
assert

七、追踪函数的运行轨迹

console.trace()可以用来追踪函数的调用轨迹。

<script>
    function fn(){
        console.trace();
    }
    fn();
    function fn1(){
        fn();
    }
    fn1();
</script>

效果如下，可以看出在哪里调用过这个函数：
console.trace

八、计时功能

console.time()和console.timeEnd()用来显示代码的运行时间。

<script>
    console.time("计时器一");
    var count = 0;
    for(var i = 0; i<100 ;i++){
            count+=i;
    }
    console.log(count);
    console.timeEnd("计时器一");
</script>

效果如下：
计时器

九、性能分析

console.profile()用于性能分析，分析程序各部分运行的时间，找出瓶颈所在。

<script>
    function All(){
        c1();
        c2();
    }

    function c1(){
        var count = 0;
        for(var i = 0; i<100 ;i++){
            count+=i;
        }
        console.log(count);

    function c2(){
        var count = 0;
        for(var i = 0; i<1000 ;i++){
            count+=i;
        }
        console.log(count);
    }

    console.profile("性能分析");
    All();
    console.profileEnd();
</script>