善用浏览器开发者工具
打开 Chrome 或 Edge 浏览器，按 F12 就能进入开发者工具。很多人只用来看元素结构，其实它的功能远不止如此。比如 Network 面板可以监控所有请求，查看接口是否正常返回数据。如果用户反馈“提交没反应”，先来这里看看有没有 404 或 500 错误。
有时候页面加载慢，也可以在 Network 里按耗时排序，一眼看出是图片大还是接口卡。勾选 Disable cache 还能模拟首次访问，避免缓存干扰判断。
Console 不只是打印日志
除了 console.log，还可以用 console.table 显示数组对象，排版更清晰。比如从接口拿回一堆用户信息，直接 table 一下，比层层展开方便多了。
遇到报错别慌，点开 Console 的错误信息，通常会告诉你出错的文件和行号。点击还能跳转到 Sources 面板对应代码位置，边改边试。
打断点让代码暂停执行
Sources 面板里可以给 JS 文件加断点。比如某个函数算出来的值不对，就在关键行打上断点，刷新页面，代码运行到这里会自动暂停。这时候鼠标悬停在变量上，就能看到当前值。
配合右侧的 Scope 面板，能清楚看到局部变量、闭包、全局变量的状态。一步步按 F10 单步执行，逻辑哪里跑偏一目了然。
巧用 Local Overrides 本地修改线上资源
有些问题是线上环境才有，但你又不能直接改生产代码。这时可以在开发者工具里启用 Local Overrides，把线上 JS 文件保存一份到本地磁盘，然后随意修改，浏览器会优先加载你改过的版本。
比如怀疑某段加密逻辑有问题，就可以重写它，测试不同输出对后续流程的影响。改完刷新依然生效，调试效率高了不少。
监听 DOM 变化和事件绑定
页面元素突然消失或样式错乱，可能是 JS 动态操作了 DOM。在 Elements 面板右键选中元素，可以设置 “Break on” -> “subtree modifications”，一旦这个节点被修改，代码就会暂停，帮你定位到操作它的脚本。
事件监听也能查。选中按钮，在 Event Listeners 标签里能看到绑定了哪些 click、input 事件，点进去直接看源码，避免“点了没反应”却找不到原因。
移动端调试不用靠猜
手机上出问题，光靠用户描述很难还原。可以用 Chrome 的 Device Mode 模拟各种机型，甚至调节网速，测试弱网下的表现。真机调试也简单，在安卓手机开启 USB 调试，连电脑后在 Chrome 的 Remote Devices 里就能实时查看页面状态。
iOS 稍麻烦点，但 Safari 开发者菜单打开后，也能连接 iPhone 查看控制台和元素结构。
代码示例：捕获未处理的异常
有些错误不容易复现，可以在全局监听：
window.addEventListener('error', function(e) {
console.error('页面错误:', e.message, e.filename, e.lineno);
});
window.addEventListener('unhandledrejection', function(e) {
console.error('Promise 错误未捕获:', e.reason);
});把这些加上，线上出现的奇怪崩溃至少能留下线索。
别忘了审查第三方脚本
现在很多网站引入广告、统计、客服等外部脚本。这些代码质量参差不齐，可能偷偷改了全局变量，或者发起可疑请求。在 Network 和 Console 里多留意来源，发现异常域名要及时排查。
曾经有个项目总在深夜报错，最后发现是某个统计脚本被劫持，注入了恶意代码。定期检查外链资源，也是保障安全的一环。