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() 就是你前端开发的“眼睛”你看不到代码运行时变量的值靠它就能“看”到。刚开始学的时候哪里不确定就打印哪里这是最笨也最有效的学习方法。

相关新闻

最新新闻

计算机毕业设计之基于SpringBoot的全民健康守护平台设计与实现

计算机毕业设计之基于SpringBoot的全民健康守护平台设计与实现

摘要基于Spring Boot的全民健康守护平台,采用Java语言进行开发,利用Spring Boot框架的简洁性和高效性,构建出稳定且易于维护的后端服务。前端则运用Vue框架,提供流畅且用户友好的交互界面。数据存储方面,平台选用MySQL…

2026/7/22 17:03:00
AI副业最后窗口期(仅剩18个月):头部技术IP正在抢占搜索/语音/Agent三大入口,错过再无低成本入场机会

AI副业最后窗口期(仅剩18个月):头部技术IP正在抢占搜索/语音/Agent三大入口,错过再无低成本入场机会

更多请点击: https://intelliparadigm.com 第一章:AI副业最后窗口期的战略判断 当前,大模型能力正经历从“技术奇点”向“工具平权”的关键跃迁。API成本下降超80%(2023 Q3至2024 Q2),开源模型在消费级显卡…

2026/7/22 17:03:00
工业无线传感器网络标准

工业无线传感器网络标准

1. IEEE 802.15.4 — 底层物理/ MAC 层标准🎯 低速率、低功耗无线个人区域网(LR-WPAN)是几乎所有其他上层工业协议的基础工作频段:2.4GHz、915MHz、868MHz数据速率:250 kbps(2.4GHz)2. ISA100.1…

2026/7/22 17:03:00
被退稿后才懂:AI查重辅助不是“一键降重”,而是构建个人学术指纹系统(含GitHub开源工具链v2.3.1)

被退稿后才懂:AI查重辅助不是“一键降重”,而是构建个人学术指纹系统(含GitHub开源工具链v2.3.1)

更多请点击: https://intelliparadigm.com 第一章:被退稿后才懂:AI查重辅助不是“一键降重”,而是构建个人学术指纹系统(含GitHub开源工具链v2.3.1) 投稿被拒信里那句“文本相似度超标,且改写痕…

2026/7/22 17:03:00
花仙子科技详解:小游戏合规开发完整要点

花仙子科技详解:小游戏合规开发完整要点

做小游戏,很多老板恨不得把90%的精力都砸在怎么让游戏好玩、怎么多搞点钱上,却偏偏忽略了一个最不起眼、但能瞬间要命的东西——合规。别以为合规是可有可无的加分项,这玩意儿就是咱们的生死线!圈子里栽跟头的人太多了&#xff0c…

2026/7/22 17:03:00
TuneUp JS高级技巧:如何用screen.js实现复杂UI元素定位

TuneUp JS高级技巧:如何用screen.js实现复杂UI元素定位

TuneUp JS高级技巧:如何用screen.js实现复杂UI元素定位 【免费下载链接】tuneup_js A JavaScript library to ease automated iOS UI testing with UIAutomation and Instruments. 项目地址: https://gitcode.com/gh_mirrors/tu/tuneup_js TuneUp JS是一款强…

2026/7/22 16:58:00

月新闻