沿用【智慧城市大屏】比喻，讲解 F12 开发者工具 + document.write
沿用【智慧城市大屏】比喻，讲解 F12 开发者工具 + document.write
世界观回顾：
浏览器 = 工地；HTML=大屏图纸；DOM=内存里建好的公示大屏；document= 大屏物业总管；JS=大屏运维员。
document.write()：指挥物业总管，直接往正在搭建的公示大屏上写字、贴广告牌。
示例代码：
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
document.write("标题");
核心一句话理解 document.write
document 是大屏物业总管；.write() 就是命令总管直接在DOM公示大屏上追加内容，可以写普通文字，也可以写HTML标签（h1/p广告牌）。
⚠️重要特性：
- 页面正在加载阶段调用：直接往正在建造的大屏上面贴广告牌。
- 页面已经全部加载完毕之后再执行
document.write：会清空整个已经建好的DOM大屏，重新生成一页空白页面，再写入内容（把建好的楼房推倒重建！）
F12 开发者工具各个面板比喻（智慧城市配套讲解）
打开浏览器，F12调出【工地检修操作台】，下面每一个面板就是检修台上的不同检测仪表。
新建一个html文件，直接测试代码：
<!DOCTYPE html>
<html>
<body>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
document.write("标题");
</script>
</body>
</html>
1. Elements【元素面板 → 公示大屏实景检查窗口】
比喻：直接观察内存里已经建好的DOM公示大屏，看到所有广告牌、板块的真实结构（DOM树）
- 你会看到：
<h1>、<p>已经出现在DOM树里面，就是document.write动态贴上去的广告牌。 - 在这里可以临时手动修改文字、删标签（相当于临时涂改大屏，刷新页面就失效）
- 区分重点：
- Elements = 当前内存里活着的DOM楼房（实时生效）
- 不是原始图纸源码！JS用document.write修改后，Elements会跟着变化。>
随堂实验：在Elements里双击h1文字，改成【智慧小区通知】，浏览器大屏立刻变化。
2. Console【控制台面板 → 运维员工作台 + 日志记录本】
比喻：直接现场给运维员（JS）下达临时指令，查看工作日志。
- 可以直接在控制台输入JS代码，回车立刻执行：
document.write("我在控制台现场写文字！")
注意：页面加载完后在控制台执行这句，原有页面全部清空（推倒楼房）
console.log()的打印信息全部在这里输出（运维员写的工作笔记）- 报错红色信息：运维员工作出错的报警提示。
3. Sources【源代码面板（源码） → 原始施工图纸档案】
比喻：从服务器下载回来最原始的HTML图纸文件，不会被JS修改！
- 这里看到的是文件原本内容。
- ⭐关键区分（学生最容易混淆考点）
- Sources源码：原始图纸，
document.write不会修改这份原始文件！ - Elements：内存里建好的DOM楼房，
document.write修改的是这里。>
类比：图纸文件不会变，但是盖好的楼房（DOM大屏）可以被运维员现场改动。
- Sources源码：原始图纸，
4. Network【网络面板 → 互联网公路的物流监控台】
比喻：监控所有来往城市数据中心的包裹（网络数据包）
- 查看浏览器下载HTML、JS、图片等文件花了多久、文件大小、请求状态
- 刷新页面，可以看到HTML文档的请求记录；看图纸文件从服务器下载耗时。>
本示例是本地页面，网络请求很少；访问线上网站时，可以看到请求API窗口的数据传输。
5. Performance【性能面板 → 工地施工测速仪】
比喻：记录建造大屏、执行JS、渲染画面全过程的时间线。
- 点击录制，刷新页面：看浏览器花多久解析HTML、执行JS（document.write）、渲染DOM大屏。
- 用来排查：运维员JS干活太慢，导致大屏卡顿。
6. Memory【内存面板 → 工地仓库占用检测仪】
比喻：查看电脑内存仓库占用多少空间。
- DOM广告牌、JS变量（收纳盒）都会占用内存；
- 检测有没有废弃广告牌没有清理，堆积垃圾内存（内存泄漏）。
7. Application【应用面板 → 工地储物仓库管理柜】
比喻：管理浏览器本地储物柜
- LocalStorage / SessionStorage：浏览器本地临时储物柜
- Cookie：小纸条凭证（类似JWT通行卡）
- 缓存、本地数据库等。>
本示例没有存储内容，这里是空的；登录网站时会存放身份凭证。
8. Security【安全面板 → 安检台】
比喻：检查本次通信是否加密（HTTPS安检）
- 查看页面连接是否安全，证书是否有效；
- HTTP不安全、HTTPS加密会在这里标记。
9. Lighthouse【灯塔 → 工地质量验收检查员】
比喻：独立质量巡检员，一次性打分评测页面：性能、无障碍、SEO、最佳实践。
- 一键检测：大屏加载速度、代码规范、页面优化情况，给出优化建议。
10. 计量器（Rendering里面的Rendering计量）【渲染计量仪表】
比喻：实时监控大屏渲染帧率FPS。
- FPS：画面刷新速度；数值越高页面越流畅。
- 观察DOM修改会不会造成频繁重绘、页面卡顿。
✅ 课堂核心对比（必讲！学生最大误区）
- Sources源代码：原始图纸，不会被JS修改，永久不变
- Elements元素面板：内存DOM楼房，document.write修改的是这里，实时变化>
一句话口诀：源码是图纸，Elements是盖好的房子；JS只能改房子，不能改图纸。
动手实操步骤（课堂上机练习，一步一步）
- 新建HTML，粘贴代码，浏览器打开页面
- F12打开开发者工具
- 切换到Elements：看到h1、p标签，就是document.write贴上去的广告牌
- 切换Sources：查看原始源码，源码里面没有h1和p标签！>
✨ 重点现象：源码看不到h1，但是Elements里面存在！
原因：h1、p是JS运行后，动态生成到DOM楼房，没有写入原始图纸。
- 切换Console控制台，输入
document.write("新文字")回车，页面全部清空，写入新文字，观察Elements变化。 - 切换Network，刷新页面，观察HTML文件下载记录。
随堂提问
- document.write修改的是Sources源码，还是Elements里的DOM？>
修改Elements里面内存中的DOM楼房，不会改动Sources原始图纸。
- 页面加载完成后，控制台执行document.write会发生什么？>
清空整个DOM大屏，推倒楼房，重新写入新内容。
- Elements面板和Sources源码的区别？>
Sources：服务器下载的原始图纸；Elements：浏览器内存中实时渲染好的DOM楼房。
简短口述稿（上课一口气讲）
我们打开F12开发者工具，就像打开工地检修操作台。
document.write 是指挥物业总管document，往DOM公示大屏上贴标题、段落广告牌。
Elements面板，就是观察内存建好的DOM大屏，能看到JS动态添加的h1和p标签；
Sources源代码，是下载回来的原始图纸，document.write不会修改这份图纸，所以源码里看不到动态生成的h1。
Console控制台，是现场给JS运维员下达临时指令的地方，可以直接执行document.write代码；
Network面板监控网络数据包；Performance记录页面施工耗时；Memory查看内存占用；Application管理本地存储；Security检查HTTPS安全加密；Lighthouse是页面质量检查员；计量器实时监控页面渲染流畅度。
记住关键：JS只能修改内存建好的DOM楼房，不能改动原始HTML图纸。
要不要我给你准备一道课堂上机思考题，专门用来测试学员有没有搞懂「Sources源码 vs Elements DOM」这个核心考点？
浙公网安备 33010602011771号