前端页面基本已经写好了，师父让我先做一下 Mock 测试，调用接口看看数据是否能够正常传递。我照着流程来，很快就发现了一个非常奇怪的问题：Edge 浏览器的控制台一直没有任何输出。

明明函数执行了，但控制台就是没反应

一开始我以为是代码根本没跑到接口调用这里。

于是我在调用函数里加了一个 alert，想确认函数是否被执行。
结果 弹窗正常弹出，说明函数确实执行了。

那问题就更奇怪了：函数执行了，为什么 console.log 完全没反应？

怀疑浏览器：是不是控制台根本没在“听”

接着我又加了几个 console.log，想一步步确认代码是否真的执行到了这里：

console.log('step 1');
console.log('step 2');
console.log('result is:', result);

我甚至把它们当成断点来用，但控制台依旧一片空白。这时候我开始怀疑是不是自己哪里写错了，反复检查代码逻辑、接口路径和 Mock 配置，折腾了大半天，还是没有任何结果。

冷静下来后，我突然意识到一个问题：会不会问题根本不在代码上，而是在浏览器上？
于是我在登录页面一定会执行的地方加了一句：

console.log('LOGIN COMPONENT RENDERED');

刷新页面之后，Edge 控制台仍然没有任何输出。这一刻我基本可以确定：
 不是代码没有执行，而是控制台根本没有把日志显示出来。

换浏览器，真相出现了

我直接换成了 Google Chrome，重新打开页面。结果：

✅ 所有 console.log 一次性全出来了
✅ Mock 接口返回数据也正常
✅ 页面逻辑完全没问题

那问题来了：
为什么 Edge 浏览器不显示？

真正的“坑”：控制台被 Filter 过滤了

我重新回到 Edge，仔细检查控制台的设置，才发现：

Console 的 Filter 被筛选成了 .container

也就是说：

• 当前控制台只监听某个容器下的日志

• 登录页面的日志根本不在这个范围内

• 所以不管我怎么 console.log，都不会显示

控制台不是没输出，而是我根本没让它“听”登录页面的内容。

反思：工具不熟，比写错代码更致命

这次问题本质上和 Mock、接口、代码逻辑完全无关，
真正的问题是：
我对浏览器开发者工具不够熟。

这也给我这个前端小白狠狠上了一课：

很多“诡异 Bug”，其实不是代码写错了，而是你用错了工具。

前端常用开发者工具功能区

趁着这次踩坑，也简单梳理一下浏览器开发者工具里最常用的几个功能区，算是给自己做个总结。

功能区	主要用途	常见使用场景
Elements （元素面板）	查看页面 DOM 结构；实时修改 HTML / CSS	排查页面布局问题、样式不生效、元素定位异常
Console （控制台）	查看 console.log 和报错信息；支持代码调试	调试业务逻辑、检查变量值，⚠️注意 Filter 筛选条件
Network （网络面板）	查看接口请求是否发送；查看请求参数和返回数据	Mock 测试、接口联调、排查请求失败原因
Sources （源码）	查看加载的 JS 文件；支持打断点调试	排查复杂逻辑问题、逐步跟踪代码执行流程
Application	查看 LocalStorage / SessionStorage；管理 Cookie 和缓存	调试登录状态、Token、缓存相关问题