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

相关新闻

最新新闻

SerenityOS 命令行选项解析指南:getopt 与 getopt_long 用法、返回值与底层实现

SerenityOS 命令行选项解析指南:getopt 与 getopt_long 用法、返回值与底层实现

SerenityOS 命令行选项解析指南:getopt 与 getopt_long 用法、返回值与底层实现 【免费下载链接】serenity The Serenity Operating System 🐞 项目地址: https://gitcode.com/GitHub_Trending/se/serenity 导读 本文以 getopt(3) 手册 为核心&a…

2026/9/29 2:52:50
轻量服务器还是ECS?大促云服务器选购与避坑实战指南

轻量服务器还是ECS?大促云服务器选购与避坑实战指南

每年大促节点,群里永远有人在问同一个问题:“38元的轻量服务器到底怎么抢?为什么我每次点进去都是已售罄?68元直购和99元的ECS我到底选哪个?”作为一个常年帮团队和自己采购云服务器的老用户,我太清楚这种纠…

2026/9/29 2:52:51
为 AI 代理的 Review 动作编写 Cedar 审批门控策略:review-agent-governance 策略编写实战指南

为 AI 代理的 Review 动作编写 Cedar 审批门控策略:review-agent-governance 策略编写实战指南

为 AI 代理的 Review 动作编写 Cedar 审批门控策略:review-agent-governance 策略编写实战指南 【免费下载链接】agents Multi-harness agentic plugin marketplace for Claude Code, Codex, Cursor, OpenCode, GitHub Copilot, and Google Antigravity 项目地址:…

2026/9/29 1:29:30
PaddleOCR 手写数学公式识别算法 CAN 实战指南:Counting-Aware Network 训练、评估与推理部署

PaddleOCR 手写数学公式识别算法 CAN 实战指南:Counting-Aware Network 训练、评估与推理部署

PaddleOCR 手写数学公式识别算法 CAN 实战指南:Counting-Aware Network 训练、评估与推理部署 【免费下载链接】PaddleOCR Turn any PDF or image document into structured data for your AI. A powerful, lightweight OCR toolkit that bridges the gap between i…

2026/9/29 1:39:24
Spring源码解析:构造器注入的类型转换与候选匹配机制

Spring源码解析:构造器注入的类型转换与候选匹配机制

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/28 17:20:49
openai-agents-python 多模型接入指南:深入解析 AnyLLMModel 适配层与 any-llm 路由

openai-agents-python 多模型接入指南:深入解析 AnyLLMModel 适配层与 any-llm 路由

openai-agents-python 多模型接入指南:深入解析 AnyLLMModel 适配层与 any-llm 路由 【免费下载链接】openai-agents-python A lightweight, powerful framework for multi-agent workflows 项目地址: https://gitcode.com/GitHub_Trending/op/openai-agents-pyth…

2026/9/29 2:52:53

日新闻

周新闻