console.log() 用法

发布时间:2026/7/22 15:57:58
console.log() 用法 console.log() 就是把你想看的内容“打印”到浏览器控制台Console里方便你调试和查看数据。1. 基本语法和意思javascriptconsole.log(你要打印的内容);console浏览器的“控制台”对象内置工具.表示“里面的”log()是 console 对象里的一个方法意思是“输出日志”连起来就是“调用控制台里的日志输出功能”。2. 最常用的 5 种打印方式① 打印普通字符串javascriptconsole.log(Hello World); // 输出: Hello World console.log(你好前端); // 输出: 你好前端② 打印变量这是最常用的场景——看变量的值是什么。javascriptlet userName 张三; let age 25; console.log(userName); // 输出: 张三 console.log(age); // 输出: 25③ 一次打印多个内容用逗号隔开控制台会全部显示出来。javascriptlet name 李四; let score 98; console.log(姓名:, name, 分数:, score); // 输出: 姓名: 李四 分数: 98④ 打印对象或数组重点打印对象时控制台会显示可展开的详细结构非常方便查看数据。javascriptlet person { name: 王五, age: 30, city: 北京 }; console.log(person); // 控制台会显示一个可折叠的对象点开能看到所有属性 let list [10, 20, 30]; console.log(list); // 控制台会显示可展开的数组⑤ 打印带样式的信息进阶用 %c 占位符可以给打印的文字加 CSS 样式常用于插件或框架的彩色提示。javascriptconsole.log(%c 这是一条红色大字, color: red; font-size: 20px;);3. console 的其他常用兄弟方法除了 log()console 对象还有几个调试时非常好用的方法方法作用示例console.error()输出红色的错误信息console.error(出错了)console.warn()输出黄色的警告信息console.warn(注意这个用法即将废弃)console.table()以表格形式展示数组/对象超级好用console.table([{name:a},{name:b}])console.clear()清空控制台所有内容console.clear()4. 实际开发中的 3 个核心用途① 调试代码看程序执行到哪了在关键位置放一个 console.log()确认程序是否执行到了这一步。javascriptfunction calculate(a, b) { console.log(函数被调用了a, a, b, b); // 调试用 return a b; }② 查看接口返回的数据前端请求后端API时经常用 console.log() 先打印返回结果看看数据结构对不对。javascriptfetch(/api/user) .then(res res.json()) .then(data { console.log(接口返回的数据:, data); // 先看看数据长啥样 // 然后再去渲染页面 });③ 观察变量变化在循环或事件中打印看变量怎么变。javascriptfor (let i 0; i 5; i) { console.log(当前循环第, i, 次); }5. 重要提醒开发习惯要点说明✅上线前删掉console.log()在生产环境会拖慢性能尤其循环里上线前记得删掉或用构建工具自动移除✅别在 IE 用老版 IE 浏览器没有console直接调用会报错但现代项目基本不考虑✅不只是浏览器Node.js 后端开发里同样可以用console.log()在终端打印日志举个完整例子你可以复制到浏览器试一下按 F12 打开控制台把下面代码粘贴进去回车javascriptlet user { name: 小明, age: 18, hobby: [篮球, 编程] }; console.log(--- 普通打印 ---); console.log(user); console.log(--- 表格展示 ---); console.table(user); console.log(--- 错误演示 ---); console.error(这里模拟一个错误); console.log(--- 带样式 ---); console.log(%c 调试成功, color: green; font-size: 24px; font-weight: bold;);总结一句话console.log() 就是你前端开发的“眼睛”你看不到代码运行时变量的值靠它就能“看”到。刚开始学的时候哪里不确定就打印哪里这是最笨也最有效的学习方法。