浏览器开发者工具 · DevTools
英文：devtools（dev + tools）
技术栈与工具难度：进阶 ★★
🗣️一句话大白话
浏览器自带的「透视镜」：按 F12 打开，能看页面结构（Elements）、网络请求（Network）、报错（Console）、手机模拟。前端排障 80% 的答案都在里面，完全免费。
🎬真实场景
页面白屏。F12 → Console 一行红字「Cannot read properties of undefined」→ 贴给 AI，两轮对话修好。不开 Console，你只能干瞪眼。
📮你可以这样说
「「教我用 F12 排查这个问题：先看 Console 还是 Network？我把截图发给你。」」
⚠️边界与常见误解
- ▸Console 的红色报错是最重要线索：排障永远先看它
- ▸Network 面板看接口：状态码、返回内容、耗时一目了然
- ▸设备模拟能初判手机问题，但不完全等于真机