浏览器开发者工具:调试必备

开发者工具是什么

浏览器内置了一套调试工具,叫「开发者工具」(DevTools)。按 `F12` 或 `Ctrl+Shift+I`(macOS 是 `Cmd+Option+I`)打开。

它是前端开发最重要的工具:看网络请求、看报错、改样式、查元素。AI 让你「看控制台」「检查网络请求」,指的就是这里。

Elements 面板:看和改页面

Elements(元素)面板显示当前页面的 HTML 结构和 CSS 样式。

• 左边是 HTML 树,展开能看到每个元素。
• 右边是选中元素的 CSS。
• 双击 CSS 属性可以临时改,实时看效果。
• 改完刷新会还原,不影响真实代码。

用途:试样式时先在这里改,满意了再写到代码里。AI 给你一段 CSS,你不确定效果,先在 Elements 里试。

Console 面板:看报错和打印

Console(控制台)显示 JavaScript 的输出和错误。

• 红色是错误(Error),通常带行号,点跳到源码。
• 黄色是警告(Warning)。
• `console.log()` 打印的内容也显示在这里。

console.log("用户点击了", user);     // 普通日志
console.error("登录失败", error);    // 错误
console.table(users);              // 表格形式显示数组

用途:AI 让你「打开控制台看报错」,就是看红色错误信息。把完整错误复制给 AI,它能帮你诊断。

Network 面板:看请求

Network(网络)面板记录所有 HTTP 请求。刷新页面后会看到一堆请求:

• **Name**:请求的 URL。
• **Method**:GET/POST 等。
• **Status**:状态码(200 成功,404 不存在,500 服务器错)。
• **Type**:请求类型(fetch、xhr、img 等)。
• **Size**:响应大小。
• **Time**:耗时。

点某个请求,右边显示详情:

• **Headers**:请求头和响应头。
• **Preview**:响应内容预览。
• **Response**:完整响应数据。
• **Timing**:各阶段耗时。

用途:API 不返回数据?先看 Network。是请求没发出、还是发出了但状态码不对、还是返回了但格式不对,一目了然。

Sources 面板:断点调试

Sources(源代码)面板可以设断点,逐行执行代码:

1. 找到要调试的文件。
2. 点行号设断点(蓝色标记)。
3. 触发操作,代码执行到断点会暂停。
4. 看当前变量的值。
5. F10 逐行执行,F11 进入函数内部,F8 继续到下一个断点。

用途:逻辑错乱时,断点能让你看每一步变量的变化,找到哪一步开始不对。

Application 面板:看存储

Application 面板查看本地存储:

• **Local Storage**:持久化存储,关浏览器还在。
• **Session Storage**:会话存储,关标签页就没了。
• **Cookies**:登录令牌通常存在这里。
• **IndexedDB**:浏览器里的数据库。

用途:登录状态不对?看 Cookies 里有没有令牌。本地缓存的数据?看 Local Storage。

Device Toolbar:模拟手机

`Ctrl+Shift+M` 切换设备工具栏,模拟手机和平板:

• 选择设备(iPhone、iPad 等)。
• 调整屏幕尺寸。
• 模拟触摸事件。

用途:做响应式时,不用真的拿手机测,这里模拟。

小白必备三招

1. **报错了**:打开 Console,看红色错误,复制完整信息给 AI。
2. **接口不对**:打开 Network,找到出问题的请求,看 Status 和 Response。
3. **样式不对**:在 Elements 里临时改,满意了写回代码。

这三个面板(Console、Network、Elements)解决 90% 的前端调试问题。AI 让你「检查一下」,基本就是用这三个。