EP03. “Console 面板：看懂错误讯息、执行 JavaScript”

首页 › PC 工具 › Developer Tools · Browser DevTools · EP03

约 8 分钟· #EP03#Browser DevTools

网页上的按钮点了没反应、表单送不出去、滑块不会动？十次有八次，Console 里已经有一行红字写着原因
Console 有两个用途：看讯息（错误、警告、网站自己打印的日志）和执行 JavaScript（像计算机一样即时跑代码）
看不懂错误内容也没关系，能截图或复制红字给开发者 / 插件客服，问题通常就解决了一半
常见的 WordPress 问题（jQuery 没载入、插件冲突、Mixed Content）在 Console 都有固定的错误讯息，认得出来就能快速定位

重点内容

打开 Console

直接打开：Ctrl+Shift+J（macOS Cmd+Option+J）
在其他面板时按 Esc，下方抽屉（Drawer）也会出现 Console，可以边看 Elements 边看错误
右上角如果显示红色 ❌ 数字，代表这个页面有错误

讯息的等级

等级	颜色	意思	要不要理
Error	红色	出错了，某段功能可能坏掉	✅ 要看
Warning	黄色	可能有问题，或用了将被淘汰的写法	视情况
Info / Log	白色 / 灰色	网站或插件自己打印的讯息	一般不用
Verbose	灰色	很细的调试讯息，默认隐藏	不用

上方 Default levels 下拉可以选只显示哪些等级
上方 Filter 输入框可以打关键字筛选
左边的 侧边栏图标 会把讯息按类别和来源文件分组，讯息很多时比较好找

常见错误讯息对照（WordPress 网站）

错误讯息（关键字）	意思	通常怎么处理
`Uncaught ReferenceError: jQuery is not defined` / `$ is not defined`	代码在 jQuery 载入之前就执行了	检查缓存/优化插件的「延迟 JS」「合并 JS」设定，把 jQuery 排除
`Uncaught TypeError: Cannot read properties of null`	代码要找的元素不存在	常见于插件冲突、元素被删掉；逐个停用插件测试
`Failed to load resource: the server responded with a status of 404`	某个文件找不到	点右边的文件名看是哪个，检查路径或重新上传
`Mixed Content: The page at 'https://…' was loaded over HTTPS, but requested an insecure …`	HTTPS 网页里载入了 `http://` 的资源	用 Better Search Replace 把旧网址改成 https
`Access to fetch … has been blocked by CORS policy`	跨网域请求被浏览器挡下	通常要在服务器 / API 端设定，交给开发者
`Refused to load … Content Security Policy`	被网站的安全政策挡下	检查安全插件或 Cloudflare 的 CSP 设定

📌 点错误讯息右边的文件名:行号（例如 main.js:42），会跳到 Sources 面板的那一行，开发者用来定位问题。

实操示例：按钮点了没反应

按 Ctrl+Shift+J 打开 Console
按 Clear console（🚫 图标）清空旧讯息
回到网页，再点一次那个按钮
看有没有新的红字出现
有的话，看右边的文件名：如果是某个插件的文件（网址里有 /wp-content/plugins/插件名/），问题多半跟那个插件有关
把错误讯息复制或截图，发给插件客服或开发者

💡 在错误讯息上按右键 → Copy message（或 Save as… 存整份 log），比截图更完整。

保留讯息：Preserve log

默认每次换页或重新整理，Console 会清空
表单送出后跳到另一页、看不到刚才的错误时：按右上角 ⚙（Console settings） → 勾选 Preserve log

当计算机用：执行 JavaScript

在 > 后面打代码按 Enter 就会执行：

1250 * 0.08                       // 算 8% 服务税：100
document.title                    // 目前网页的标题
document.querySelectorAll('img').length   // 这一页有几张图片
document.body.style.zoom = '50%'  // 把网页缩小一半看整体排版

快捷键	作用
`Enter`	执行
`Shift+Enter`	换行（写多行代码）
`↑` / `↓`	叫出之前打过的指令
`Ctrl+L`	清空 Console
`$0`	代表在 Elements 面板当前选取的元素

💡 上方的 👁 Create live expression 可以固定一个表达式，数值会即时更新，例如盯着 window.scrollY 看滚动位置。

⚠️ 在 Console 执行的代码可以读取你在这个网站登录的资料。Facebook 等网站会在 Console 显示大大的 Stop! 警告，就是为了防止「贴这段代码就能看谁看过你的主页」这类诈骗。来路不明的代码不要贴。

学完你会

✅ 分辨 Error、Warning、Info 讯息
✅ 认得 WordPress 常见的 Console 错误并知道处理方向
✅ 用 Preserve log 保留换页前的错误
✅ 用 Console 执行简单的 JavaScript

常见错误

❌ 一看到黄色 Warning 就紧张：很多是浏览器提醒，不影响功能，先处理红色 Error。
❌ 错误出现在上一页，跳页后就不见了：开 Preserve log。
❌ 只截一小部分红字发给客服：要包括完整的讯息和右边的文件名。
❌ Console 里一堆旧讯息分不清：先 Clear console，再重做一次出问题的动作。
❌ 执行陌生人给的代码：可能被盗取账号。

Sources

官方文档：

📝 测验一下共 6 题