寫程式碼時遇到錯誤怎麼辦
本章導讀
說明
本章所有方法基於 Cursor/Trae/Claude 等 AI IDE 的實際使用經驗，可直接應用於日常開發。
1. 核心心法：截圖問 AI
為什麼這一章很重要？
很多初學者遇到報錯時的第一反應是：
- 慌張，開始瞎改程式碼
- 花半小時搜尋"xxx 錯誤怎麼解決"
- 試圖自己理解錯誤是什麼意思
- 自己 debug 到深夜
這些都是在浪費時間。
在 AI 時代，除錯已經變成了一件很簡單的事：
看到報錯 → 截圖 → 問 AI → 按 AI 說的做你不需要理解錯誤，不需要會除錯，甚至不需要知道問題出在哪裡。
你只需要學會怎麼問。
1.1 最簡單的提問方式
不需要複雜的模板，兩種方式任選：
方式一：描述現象
格式：剛才做了什麼，現在出現了什麼
剛才我修改了登入頁面的程式碼，現在頁面白屏了，怎麼辦？方式二：截圖
直接截圖當前頁面或報錯資訊
[截圖]
這個報錯怎麼解決？最好的方式：描述 + 截圖
剛才我修改了登入頁面的程式碼，現在頁面白屏了。
[截圖]
怎麼辦？記住：描述清楚上下文，加上截圖，AI 能更快幫你解決問題。
1.2 如何把問題講清楚
很多初學者知道要提問，但不知道怎麼說。其實只需要講清楚三件事：
1. 剛才做了什麼
剛才我點選了儲存按鈕
剛才我修改了登入頁面的程式碼
剛才我重新整理了頁面2. 現在看到了什麼
現在頁面是空白的
現在按鈕點了沒反應
現在顯示報錯資訊3. 想要達到什麼效果
我想讓資料儲存成功
我想讓頁面正常顯示
我想讓按鈕點選後彈出提示完整示例：
剛才我點選了儲存按鈕，現在頁面顯示"儲存失敗"的報錯。
[截圖]
我想讓表單資料成功儲存到資料庫，該怎麼辦？關鍵原則：
- 用大白話描述，不用專業術語
- 按時間順序說：先做了什麼，然後發生了什麼
- 把你的預期說出來，讓 AI 知道你想要什麼
2. 第一步：直接描述現象提問
遇到問題時，不要急著開啟 F12。先直接描述現象，截圖當前頁面，丟給 AI 看看。
很多時候，AI 看到截圖就能直接給出解決方案。
2.1 常見現象怎麼描述
直接描述即可
頁面白屏
頁面開啟是空白的，怎麼辦？
[截圖]按鈕點選沒反應
點選這個按鈕沒反應，幫我看看。
[截圖]資料儲存不了
點了儲存，資料沒存上，怎麼辦？
[截圖]樣式顯示不對
這個按鈕位置偏了，怎麼調整？
[截圖]介面報錯
呼叫介面報錯了，幫我看看。
[截圖]2.2 如果 AI 直接解決了
恭喜你，問題解決了！按照 AI 說的修改即可。
2.3 如果 AI 說"需要更多資訊"
這時候才需要開啟 F12，補充關鍵資訊。往下看。
3. 第二步：補充關鍵資訊
當 AI 說需要更多資訊時，根據問題型別，開啟 F12 擷取對應的內容。
3.1 什麼時候需要補充資訊
AI 可能會這樣回覆：
- "請開啟 Console 看看有沒有報錯"
- "截圖 Network 面板給我看看"
- "需要看具體的錯誤資訊"
這時候，根據下面的指引補充截圖。
3.2 補充 Console 資訊（頁面白屏/報錯）
操作步驟
第一步：按 F12 開啟開發者工具
Mac 是 Cmd+Option+I，或者右鍵頁面選"檢查"。
第二步：切換到 Console 標籤頁
第三步：截圖紅色報錯資訊
第四步：發給 AI
Console 報錯如下：
[截圖]3.3 補充 Network 資訊（資料問題/API 報錯）
操作步驟
第一步：按 F12 開啟開發者工具
第二步：切換到 Network 標籤頁
第三步：重新操作一遍（點儲存/重新整理頁面）
第四步：找到對應請求，截圖
- 看 URL 和狀態碼
- 看 Payload（傳的引數）
- 看 Response（返回結果）
第五步：發給 AI
Network 資訊如下：
請求：[截圖1]
引數：[截圖2]
返回：[截圖3]3.4 補充 Elements 資訊（樣式問題）
操作步驟
第一步：右鍵元素 → "檢查"
開發者工具會自動定位到該元素。
第二步：截圖 Styles 面板
第三步：發給 AI
元素樣式如下：
[截圖]4. 第三步：迭代直到解決
4.1 低效的做法
這些做法會浪費你的時間：
看到報錯就慌張，開始瞎改程式碼 花半小時搜尋錯誤解決方案 試圖自己理解每個錯誤的意思 一個人 debug 到深夜
4.2 高效的做法
按照這套流程來：
先直接描述現象截圖提問 AI 說需要更多資訊時，再開啟 F12 補充 按照建議修改程式碼 改完後測試，如果問題還在就繼續截圖提問
5. 總結：完整流程
遇到問題
↓
直接描述現象 + 截圖
↓
丟給 AI："怎麼辦？"
↓
AI 直接解決？
↓ 是
按 AI 說的做
↓
測試是否解決
↓
↓ 否 / AI 需要更多資訊
開啟 F12，補充關鍵資訊
↓
再發給 AI
↓
重複直到解決