跳到主要内容

前端工程 · 调试

开发者工具

Developer Tools

也叫:DevTools、F12、控制台、检查元素

浏览器内置的调试面板,按 F12 打开,可以查看页面结构、样式、报错信息和网络请求。

详细解释

开发者工具像汽车的仪表盘加故障诊断仪。按 F12 或右键选「检查」就能打开,新手最常用这几个面板:

Elements(元素) 查看 DOM 结构和每个元素生效的 CSS,还能临时改样式试效果;Console(控制台) 显示 JavaScript 报错和打印信息;Network(网络) 查看每个请求的地址、状态码和返回数据;Application(应用) 查看 localStorage、Cookie 等本地存储。点工具栏里的手机图标还能模拟手机屏幕。

遇到问题时,把控制台的报错原文、Network 里失败请求的状态码和返回内容一起发给 AI,比只说「页面不对」有用得多。

开发者信息
术语 ID
eng-devtools
DOM 选择器
没有 DOM 线索,这个概念不在页面上直接识别。
优先级
1 · 同一层有多条命中时,优先级高的胜出
版本
v1 · 更新于 2026/09/29