高效前端：使用chrome的devTools

最新推荐文章于 2025-05-19 13:23:59 发布

=清风徐来=

最新推荐文章于 2025-05-19 13:23:59 发布

阅读量245

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： console

本文链接：https://blog.youkuaiyun.com/weixin_43801564/article/details/85134214

前端专栏收录该内容

28 篇文章

订阅专栏

本文介绍前端开发中常用的控制台调试技巧，包括使用console.table直观展示数组数据，利用console.dir深入查看DOM元素属性，以及如何通过console.log输出带样式的文本。同时，文章还介绍了如何运用debugger进入断点调试模式。

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

1、打印console

1.1 使用console.table

使用console.table可以将一个数组展开之后在控制台输出

let obj = [{
        key1: '12',
        key2: '12',
        key3: '12',
        key4: '12',
        key5: '12',
        key6: '12',
        key7: '12',
    },
        {
            key1: '12',
            key2: '12',
            key3: '12',
            key4: '12',
            key5: '12',
            key6: '12',
            key7: '12',
        }
    ];
    console.table(obj)

在这里插入图片描述
相比于console.log的需要层层打开，console.table更加直观

1.2 使用console.dir

console.dir可以用来解决这样一个问题：
对于获取到的dom元素，如果直接使用console.log输出，会使这样的一条记录：
在这里插入图片描述
但是如果我们需要查看这个dom元素的内部的一些属性什么的，可以使用console.dir输出，结果是这样的：

是一个可以展开的对象

1.3 输出带有样式的内容

使用%c可以将其之后的内容带样式输出：

console.log('this is %c text with style ','background:yellow;color:green')

显示为：
在这里插入图片描述

2、使用debugger进入调试模式

在程序中加入debugger，当程序执行到debugger这一步时，就会自动进入断点调试模式。

<script>
    let img=document.querySelector('.img');
    debugger;//进入断点
    console.log('this is %c text with style ','background:yellow;color:green;font-size:30px');
</script>

页面显示：
在这里插入图片描述