JavaScript日志调试应避免直接console.log(value)，推荐用对象字面量包裹变量（如{userName, userAge}）以自动显示属性名和结构；辅以typeof与JSON.stringify增强类型和格式化输出；对同结构数据用console.table()可视化对比；进阶可封装带调用位置的debug函数。
在 JavaScript 日志调试中，让变量值带上清晰的上下文（比如变量名、所在作用域、类型、结构等），关键不是只用 console.log(value)，而是用可读性强、信息丰富、不易混淆的方式输出。下面几种方法实用且容易落地。
用对象字面量包裹变量，自动带属性名
这是最简单也最常用的方法：把变量作为对象的一个属性输出，浏览器控制台会显示属性名 + 值，一目了然。
例如：
✅ 推荐写法：const userName = "Alice";
const userAge = 28;
console.log({ userName, userAge }); // 输出：{ userName: "Alice", userAge: 28 }
这样既避免了手写字符串拼接出错，又保留了变量原始结构（包括 null、undefined、数组、嵌套对象等），还能点击展开查看细节。
立即学习“Java免费学习笔记（深入）”；
用模板字符串 + typeof + JSON.stringify 做轻量级增强
当需要明确知道类型、或想预览深层结构（比如防止循环引用崩溃）时，可以组合使用：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
-
typeof判断基础类型（注意：typeof null === 'object'是历史遗留问题） -
JSON.stringify(value, null, 2)格式化输出对象/数组（对函数、undefined、Symbol 会忽略） - 对特殊值（如
undefined、NaN、正则、日期）单独处理更稳妥
示例：
function logWithCtx(label, value) {
const type = typeof value;
let preview = value;
if (type === 'object' && value !== null) {
try {
preview = JSON.stringify(value, null, 2);
} catch (e) {
preview = '[Circular]' || value.toString();
}
}
console.log(`【${label}】(${type}):`, preview);
}
logWithCtx('user', { name: "Bob", tags: ["admin"] });
// 输出：【user】(object): { "name": "Bob", "tags": ["admin"] }
利用 console.table() 快速对比多个同结构变量
当你有一组相似对象（比如 API 返回的用户列表、表单字段状态等），console.table() 能自动生成表格，列名即对象 key，每行是对应数据，视觉上极其清晰。
例如：
const users = [
{ id: 1, name: "Tom", active: true },
{ id: 2, name: "Jerry", active: false }
];
console.table(users); // 浏览器中显示为带表头的交互式表格
支持传入第二个参数指定要显示的列：console.table(users, ['name', 'active'])。
封装一个带调用位置的调试函数（进阶）
如果希望日志里还包含「在哪一行、哪个文件触发的」，可用 console.trace() 或 Error.stack 提取堆栈，再配合正则提取位置信息。不过更轻量的做法是加个注释标记：
// ✅ 简单有效：手动标注上下文
console.log('? [login.js:42] userInfo before submit:', userInfo);
// ✅ 自动化一点：用 new Error().stack 提取（适合工具函数）
function debug(label, value) {
const stack = new Error().stack.split('\n')[2];
const match = stack.match(/at\s+(.*)\s+\((.*):(\d+):(\d+)\)/) || [];
const loc = match[2] ? `${match[2]}:${match[3]}` : 'unknown';
console.group(`[${label}] ${loc}`);
console.log(value);
console.groupEnd();
}
这样每次调用 debug('formState', state) 都会自动附带来源位置，方便快速定位。
