前端调试这事儿，说白了就是一场“找茬”游戏。当你在宙斯浏览器里遇到表单提交没反应、按钮点不动、动态内容一片空白，别急着怀疑人生——先打开开发者工具，控制台里的红字报错才是真正的“作案现场”。

按下 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（macOS）打开开发者工具，切到 Console 标签页，顺手刷新一下页面。

如果顶部冒出一行带文件名和行号的红色报错，比如 Uncaught ReferenceError: $ is not defined at script.js:8:12，恭喜你，问题就在当前页的Ja vaScript里。

如果只有灰色文字或者一个干巴巴的 Script error.，那大概率是跨域脚本、第三方资源或者浏览器扩展在捣乱，跟当前页面的JS没直接关系。

这一步必须做——【Tampermonkey不会为语法错误提供友好提示，全靠Console定位】。

精准跳转到报错代码行

在Console里点击报错信息末尾的文件链接，比如 main.js:23:5，DevTools会直接带你飞到Sources面板对应行，还会把出错的语句高亮出来。

这时候看错误前缀就能猜个八九不离十：ReferenceError 开头，多半是变量没声明或者拼写错了；TypeError 通常是因为调用了不存在的方法，或者访问了 null/undefined 的属性；SyntaxError 就比较直白了——括号没配对、引号漏写了、分号丢了，这类硬伤一般发生在脚本加载阶段，而不是运行时。

验证 DOM 元素是否存在再操作

• 方法一：在疑似出错的JS语句前面加一行 console.log(document.querySelector('#submit-btn'));，看控制台输出的是不是 null。如果是，要么元素还没渲染出来，要么选择器写错了。
• 方法二：把脚本挪到HTML文件的 标签前面，或者用 document.addEventListener('DOMContentLoaded', () => { ... }); 包起来——这能避免因执行过早而撞上DOM还没准备好的尴尬。

对于可能为空的对象链式访问，改用可选链操作符：把 user.profile.name 写成 user.profile.name，这样一来，中间任何一层是 undefined 都不会直接报错中断，优雅又安全。

检查网络请求是否返回预期数据

1. 第一步：Console里出现 Uncaught (in promise) TypeError: data.forEach is not a function 时，先别急着改JS代码。点开 Network 面板，刷新页面，筛选XHR或Fetch请求，找到对应的那个接口。
2. 第二步：点击请求，看右侧 Response 标签页——返回的是正经JSON数据，还是一张404错误页面被当成了JSON解析？再去 Headers 标签页核对 Content-Type 是不是 application/json。
3. 第三步：如果响应体是 {"error":"not found"} 这种非数组结构，代码里却写了 data.forEach(...)，那必然触发TypeError——【forEach 只能作用于数组，不能用于对象或字符串】，这点牢记在心就好。

《夸克》非常好用的免费AI浏览器

下载APP查看