第29课：AI排查问题
进度 0/30
🕵️
AI排查问题
网页出bug？AI侦探来破案
📖知识引入
🐛什么是bug
代码里的小错误让网页不对劲：图片不显示、按钮失灵、排版乱掉、颜色没变……每个bug背后都藏着一个写错的地方。
📸描述问题三要素
哪里不对（图片裂了）+期望如何（应该显示猫咪照片）+怎么操作（打开页面就裂）。三要素说全，AI秒懂案情！
📋贴代码给AI
「我的网页坏了」AI帮不了你；「现象+完整代码」AI立刻开查。医生也要看化验单才能开药——代码就是化验单。
🔍F12找线索
按F12打开控制台，红色报错信息是最重要线索！看不懂没关系，原样复制给AI——线索越多，破案越快。
🔁调试循环
修改→刷新→看结果→再修改……一步步逼近真相，这叫「调试循环」。程序员一半时间都在循环里，你怕什么！
💡
提问三要素：现象+期望+代码，全给AI，破案快10倍！
🔍一起真实破案实录
<!-- ❌ 生病的代码 -->
<img src="cat.png" alt="我的猫">
<!-- 实际文件名是 cat.PNG，
部署后区分大小写，图片裂了 -->
<!-- ✅ 治愈后的代码 -->
<img src="cat.PNG" alt="我的猫">
<!-- 💡 预防针：文件名永远用
小写英文+数字，不带空格 -->案情：图片不显示 🔍
你：「医生，我网页的图片裂了！」 ❌ AI：无从下手……
换个问法： 你：「图片显示成裂图（现象）， 应该显示我的猫（期望）， 代码在下面（证据）： <img src="cat.png" alt="我的猫">」
🤖 AI侦探分析： 「img标签写法正确， 问题出在文件名： 你的图片实际叫 cat.PNG（大写）， 但代码里写的是 cat.png（小写）， 本地不区分大小写， 部署到Linux服务器后 区分大小写——所以线上裂图！」
💊 药方：把代码改成 cat.PNG （或把文件改名为cat.png）
✅ 病人痊愈，破案！
注意到了吗？ 现象+期望+代码=完美报案 AI从「无法破案」变「秒破」
🎯小测验
第1题：向AI求助修bug时，最没用的说法是？
第2题：F12控制台里的红色报错信息，应该怎么处理？
第3题：「调试循环」指的是？
📝本课知识点
- ✓bug=代码里的小错误
- ✓提问三要素：现象+期望+代码
- ✓F12报错信息是最好的线索
- ✓文件名用小写英文防坑
- ✓调试循环是程序员的日常
第29课完成！继续探索下一课吧 🚀