Lecture08-浏览器开发者工具实战

管理员
2026-10-17
前端-基础语法
62
0
文章目录

    [toc]

    单词词性音标含义
    DevToolsn./ˈdev tuːlz/浏览器开发者工具，F12 打开，是排查 Bug 的第一武器
    Consolen./kənˈsəʊl/控制台面板，看报错和打印日志，排查第一步
    Elementsn./ˈelɪmənts/元素面板，查看/临时修改页面的结构与样式
    Networkn./ˈnetwɜːk/网络面板，查看页面加载的所有请求和各自状态
    Sourcesn./sɔːsɪz/源代码面板，用于查看源码、断点调试 JS
    CORSn./kɔːs/跨域资源共享，跨域问题借助 Network 面板排查（见第 28 节）
    status coden./ˈsteɪtəs kəʊd/状态码，200=成功、404=没地址、500=后端挂了

    Lecture08-浏览器开发者工具实战

    1、本节讲什么

    学会用浏览器自带的"诊断工具"看报错、查网络、改样式——这是你后面定位 Bug 的第一武器，也是把报错"讲给 AI 听"的信息来源。

    2、概念速览

    什么是开发者工具：浏览器自带的"诊断仪表盘"（F12 打开），能看到页面结构、报错、网络请求——是你排 Bug 的第一武器。

    类比：相当于后端里的日志 + 断点 + 监控面板，三合一。

    正确 vs 误区：它不是"高级功能"，而是必修的"看现场"能力——绝大多数 Bug 都能靠它定位到"哪一行、哪个请求"。

    3、先看效果

    按 F12 打开开发者工具，看到一排标签：Elements / Console / Network / Sources。本节省下时间都花在这三个上。

    4、照着做

    ① Console（控制台）——看报错

    1. 故意让代码报错：在 dom-demo.html 里写一句 console.log(userName)（不存在的变量）。
    2. 打开 Console，看到红色报错，指出哪个文件、哪一行、什么错误。点错误文字能跳到对应代码。
    3. 排查第一步永远是：先看 Console 有没有红字。

    ② Elements（元素）——看/改页面结构

    1. 切到 Elements，每个元素都能点开看 HTML 和样式。
    2. 在 Elements 里临时改样式（改颜色、宽高），立刻看到效果——适合快速验证"是不是样式问题"，刷新即还原，不影响代码。

    ③ Network（网络）——看接口请求（这里先认识，真正联调用得最多）

    1. Network 里能看到页面加载的所有请求、各自的状态（200=成功，404=没地址，500=后端挂了）。
    2. 第 28 节查 CORS、实战查接口，都用它。

    image-20260930104340345

    5、常见疑问

    • Q：报错太长，看不懂怎么办？ A：复制第一行 + 含文件名和行号的关键行，后面教你原样丢给 AI，比你自己猜快得多。
    • Q：Console 里全是自己的日志，怎么找报错？ A：Console 顶部筛选选 Errors，只看报错。
    • Q：页面没反应，不知道哪里出了问题？ A：三层自查：① Console 有没有报错？② Network 请求成功没？③ Elements 元素在不在？过一遍，绝大多数能定位。

    6、规范要点

    • 排查按顺序：先 Console → 再 Network → 最后 Elements，别乱点。
    • 报错信息保留原文，这是你交给 AI 的核心素材（第 39 节）。
    • 正式交付前删掉调试用的 console.log，别让日志刷屏。

    7、本节验证

    • 会按 F12 打开开发者工具，认识 Elements / Console / Network / Sources 面板 ✅
    • 会用 Console 看红色报错，并能定位到哪个文件、哪一行 ✅
    • 会在 Elements 里临时改样式，快速验证"是不是样式问题" ✅
    • 会在 Network 里看请求及状态码（200 成功 / 404 没地址 / 500 后端挂了）✅
    • 记住排查顺序：先 Console → 再 Network → 最后 Elements ✅
    end