使用console.log()输出变量值是调试JavaScript的基础方法，结合断点、异常捕获和debugger语句可高效定位问题，建议分段验证代码并及时清理调试语句。
调试HTML中的JavaScript脚本是前端开发中非常关键的一环。通过有效的调试方法，可以快速定位和修复代码中的错误。现代浏览器提供了强大的开发者工具，尤其是控制台（Console），让调试变得直观高效。
使用浏览器控制台输出信息
最基础也最常用的调试方式是使用 console.log() 输出变量或执行流程：
- 在代码中插入 console.log(变量名) 查看其值
- console.error() 显示错误，console.warn() 显示警告，console.info() 显示提示信息
- 用 console.table() 显示数组或对象的表格形式，更清晰
例如：
<script>
const user = { name: 'Alice', age: 25 };
console.log(user);
console.table(user);
</script>
设置断点进行逐步调试
在浏览器开发者工具的“Sources”（或“Debugger”）面板中，可以对JavaScript代码设置断点：
立即学习“Java免费学习笔记（深入）”；
- 打开开发者工具（F12 或右键“检查”）
- 切换到 “Sources” 标签，找到对应的JS文件
- 点击行号设置断点，刷新页面后代码会在该行暂停
- 使用步进按钮：单步执行（Step over）、进入函数（Step into）、跳出函数（Step out）
- 观察作用域内的变量值，实时查看调用栈
适合排查逻辑错误、异步执行顺序等问题。
捕获并处理运行时错误
JavaScript 提供了 window.onerror 和 try...catch 来捕获异常：
- 使用 try...catch 包裹可能出错的代码块
- 全局监听错误，便于日志收集：
<script>
window.onerror = function(message, source, lineno, colno, error) {
console.error('Error:', message, 'at line', lineno);
return true; // 阻止默认错误提示
};
</script>
注意：跨域脚本错误可能显示为 "Script error."，需添加 crossorigin 属性并配置CORS头。
利用调试器语句（debugger）
在代码中插入 debugger; 语句，浏览器运行到此处会自动暂停：
<script>
function calculateTotal(items) {
debugger;
return items.reduce((a, b) => a + b.price, 0);
}
</script>
- 无需手动设断点，适合临时调试
- 发布前记得删除或注释掉，避免影响用户
基本上就这些常用方法。熟练使用控制台输出、断点调试、异常捕获和 debugger 语句，能大幅提升JavaScript调试效率。不复杂但容易忽略的是：养成分段验证的习惯，别等一堆代码写完再查错。
