- 使用
debugger语句：在代码中插入debugger语句，当代码执行到该语句时，浏览器会自动暂停，允许你在开发者工具中检查变量、单步执行代码等。例如：
function validateForm(data) {
debugger;
if (data.name === '') {
return 'Name required';
}
return 'Valid';
}
const result = validateForm({ name: '' });
- 条件断点：在Chrome DevTools的Sources面板中，右键点击行号可以设置条件断点。只有当满足特定条件时，代码才会暂停执行。比如在循环中，你可以设置当
i === 50时暂停，方便排查特定条件下的问题。
- 性能分析工具：利用Chrome DevTools的Performance面板，可以录制代码的执行过程，生成火焰图等可视化信息，帮助你分析代码的性能瓶颈，找出耗时较长的函数和操作。
- 异步调试：对于Promise和async/await的调试，可以在await语句后添加
debugger语句，配合DevTools的Async模式，能够清晰地查看异步操作的调用栈，方便追踪异步操作中的错误。
console的其他方法：
console.info()：用于输出信息性消息，会以特定的样式显示，比如在某些浏览器中是蓝色文字，便于与其他类型的日志区分。console.warn()：输出警告信息，通常会带有黄色背景或图标，方便快速识别潜在问题。console.error()：输出严重的错误信息，以红色背景或图标显示，能让开发者迅速关注到错误情况。console.table()：当需要展示数组或对象的数据时，console.table()可以将数据以表格的形式呈现，使数据更加清晰易读。console.dir()：用于查看JavaScript对象或DOM元素，会以可展开的树状结构展示对象的属性和方法。console.group()和console.groupEnd()：可以将相关的日志分组，使控制台的日志更加有条理，方便查看和管理。console.time()和console.timeEnd()：用于测量代码块的执行时间，帮助你了解代码的性能情况。
console.trace()：该方法可以跟踪代码的调用链，显示函数是如何被调用的，有助于理解代码的执行路径，当你想要弄清楚某个函数的调用来源时非常有用。- 源映射（source maps）：在使用TypeScript、Babel或Webpack/Vite等打包工具时，启用源映射可以将编译后的代码与原始源代码关联起来，使调试工具能够在生产环境中显示引发错误的实际代码行和文件，方便调试压缩或转译后的代码。
- 结构化日志记录：采用JSON等机器可读的格式记录日志，使日志包含用户ID、路由、日志级别、时间戳等元数据，便于搜索、过滤和可视化分析。例如：
console.log(JSON.stringify({
level: "error",
message: "API调用失败",
route: "/checkout",
userId: "abc123",
timestamp: new Date().toISOString()
}));
- 全局错误处理器：通过
window.onerror和window.onunhandledrejection可以捕获未被处理的异常或Promise拒绝，将这些错误转发到监控服务，以便在生产环境中及时发现问题。
- 用户行为追踪（面包屑追踪）：记录用户的操作行为，如按钮点击、页面浏览、表单提交等，当错误发生时，将这些行为信息与错误报告一起发送，帮助重建导致错误的操作路径，便于重现和解决问题。
