前端工程 · 调试
开发者工具
Developer Tools
也叫:DevTools、F12、控制台、检查元素
浏览器内置的调试面板,按 F12 打开,可以查看页面结构、样式、报错信息和网络请求。
详细解释
开发者工具像汽车的仪表盘加故障诊断仪。按 F12 或右键选「检查」就能打开,新手最常用这几个面板:
Elements(元素) 查看 DOM 结构和每个元素生效的 CSS,还能临时改样式试效果;Console(控制台) 显示 JavaScript 报错和打印信息;Network(网络) 查看每个请求的地址、状态码和返回数据;Application(应用) 查看 localStorage、Cookie 等本地存储。点工具栏里的手机图标还能模拟手机屏幕。
遇到问题时,把控制台的报错原文、Network 里失败请求的状态码和返回内容一起发给 AI,比只说「页面不对」有用得多。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
eng-devtools- DOM 选择器
- 没有 DOM 线索,这个概念不在页面上直接识别。
- 优先级
- 1 · 同一层有多条命中时,优先级高的胜出
- 版本
- v1 · 更新于 2026/09/29