AI 原生开放教材

外观

VibeFast 文档官方文档·英文原文 ↗原件 ↓仓库 ↗

遇到錯誤不要慌：用 AI 讀懂錯誤訊息、解決問題 ​

English · 繁中 · Español · 日本語 · Português (BR)

作者： Danko Peng（@dankopeng）
更新： 2026 年 3 月
閱讀時間： 約 8 分鐘

看到紅色錯誤訊息，不要關掉它 ​

初學者遇到錯誤的第一反應通常是：慌、關掉、重試、還是一樣。

但錯誤訊息不是你的敵人，它是你最重要的線索。 它在告訴你哪裡出了問題、為什麼出問題。學會讀懂它，你解決問題的速度會快十倍。

更重要的是：你不需要自己讀懂每一個錯誤，直接貼給 AI 問就好。

三種常見錯誤 ​

語法錯誤（Syntax Error） ​

code 寫錯了，缺少括號、引號沒關閉、拼錯關鍵字。這類錯誤最容易修，因為 Cursor 通常會直接在那一行顯示紅色底線。

SyntaxError: Unexpected token '}'

直接告訴 AI：「這段 code 有語法錯誤，幫我找出來修好。」

執行時錯誤（Runtime Error） ​

code 語法沒問題，但跑起來出錯。常見的例子：

TypeError: Cannot read properties of undefined (reading 'name')

這通常是你以為某個變數有值，但它其實是 undefined。比如從資料庫查出來的資料是空的，你卻直接存取它的屬性。

ReferenceError: env is not defined

用了一個還沒有宣告的變數。

邏輯錯誤（Logic Error） ​

最難找的一種。code 跑起來沒有報錯，但結果不對——商品價格算錯了、庫存沒有正確扣除、用戶登入之後沒有跳轉到正確頁面。

這類錯誤需要你去追蹤程式的執行過程，找出哪一步的判斷或計算出了問題。

第一關：用 npm run build 驗證 AI 寫的 code ​

AI 幫你寫完一段 code 之後，不要急著跑 npm run dev 或直接部署，先跑 npm run build。

bash
npm run build

npm run build 會做兩件事：

  1. TypeScript 型別檢查——找出型別錯誤、未定義的變數、函式呼叫錯誤
  2. 編譯 code——確認整個專案能成功打包

這個指令通常比直接跑 dev server 快，而且能在你部署之前就抓到很多問題。

看到 build 成功才繼續：

bash
✓ Built in 2.3s   ← 這樣才對

如果 build 失敗，終端機會告訴你哪個檔案、哪一行出了什麼問題：

src/routes/checkout.ts:23:18 - error TS2532: Object is possibly 'undefined'.

這比等到跑起來才發現錯誤快得多。把這個錯誤貼給 AI，讓它修好，再 build 一次確認通過，才繼續下一步。

養成習慣：AI 改完 code → npm run build → 沒問題 → npm run dev 測試功能。

遇到錯誤的標準流程 ​

第一步：把完整的錯誤訊息複製起來 ​

不要只截圖、不要只記「有個錯誤」。複製完整的錯誤文字，包括：

  • 錯誤類型（TypeError、SyntaxError 等）
  • 錯誤描述
  • 錯誤發生的檔案和行數（stack trace）
TypeError: Cannot read properties of undefined (reading 'price')
    at handleCheckout (api/src/routes/checkout.ts:23:18)
    at Object.<anonymous> (api/src/index.ts:45:5)

這段訊息告訴你：在 checkout.ts 的第 23 行，有個東西是 undefined，你試圖讀取它的 price 屬性。

第二步：貼給 AI，說清楚情況 ​

我在做 Cloudflare Workers 的結帳功能，遇到這個錯誤：

TypeError: Cannot read properties of undefined (reading 'price')
    at handleCheckout (api/src/routes/checkout.ts:23:18)

這是我的 code：
[貼上相關的 code]

我在做什麼：用戶點「購買」之後，後端從 D1 查詢商品，然後建立 Stripe Checkout Session。

幫我解釋這個錯誤是什麼意思，可能是什麼原因，怎麼修。

第三步：理解 AI 的解釋，再讓它修 ​

AI 解釋之後，確認你理解了問題所在，再讓它幫你修。不要直接說「幫我修好」，而是先問「為什麼會這樣」——這樣你下次遇到類似問題才知道怎麼找。

console.log：最簡單的調試工具 ​

當你不確定某個變數的值是什麼，最直接的方法是用 console.log 把它印出來：

typescript
export async function handleCheckout(request: Request, env: Env) {
  const { productId } = await request.json()
  
  const product = await env.DB.prepare(
    'SELECT * FROM products WHERE id = ?'
  ).bind(productId).first()
  
  // 加這一行，看看 product 到底是什麼
  console.log('product:', product)
  
  // 如果 product 是 null 或 undefined，下面這行就會報錯
  const price = product.price
}

在 Cloudflare Workers 看 console.log ​

Cloudflare Workers 的 console.log 不會出現在瀏覽器的開發者工具裡，要在 Cloudflare Dashboard 看：

方法一：即時查看（開發時最方便）

bash
npx wrangler tail

跑這個指令之後，你的 Worker 的所有 log 都會即時顯示在終端機。

方法二：Dashboard 查看 Cloudflare Dashboard → Workers & Pages → 你的 Worker → Logs

用 AI 調試的進階技巧 ​

問 AI 加調試 log ​

這個函式跑起來結果不對，幫我在關鍵步驟加上 console.log，
讓我能追蹤每一步的值是什麼：

[貼上你的 code]

問 AI 解釋 stack trace ​

Stack trace 是錯誤發生時的「呼叫堆疊」，告訴你錯誤是從哪一層函式傳上來的。對初學者來說很難讀，直接貼給 AI 問：

幫我解釋這個 stack trace 在說什麼，錯誤是從哪裡開始的：

[貼上完整 stack trace]

問 AI 解釋你看不懂的 code ​

遇到看不懂的 code，不要跳過：

幫我解釋這段 code 在做什麼，用白話說，
特別是這幾行我不太理解：

[貼上 code]

最常見的 Cloudflare Workers 錯誤 ​

env is not defined 或 env.DB is not defined ​

你在某個地方用了 env，但這個函式沒有接收 env 參數。

typescript
// ❌ 這個函式拿不到 env
async function getProduct(productId: string) {
  const product = await env.DB.prepare(...) // env 從哪來？
}

// ✅ 把 env 傳進來
async function getProduct(productId: string, env: Env) {
  const product = await env.DB.prepare(...)
}

Cannot read properties of null ​

資料庫查詢沒有找到資料，回傳了 null，你卻直接存取它的屬性。

typescript
const product = await env.DB.prepare('SELECT * FROM products WHERE id = ?')
  .bind(productId).first()

// ❌ 如果 product 是 null，這行會報錯
const price = product.price

// ✅ 先確認有沒有找到
if (!product) {
  return Response.json({ error: 'Product not found' }, { status: 404 })
}
const price = product.price

部署成功但功能不正常 ​

先確認你看的是最新版本——Cloudflare 有 cache，有時候改了 code 部署之後要等幾秒才生效。

用 curl 打你的 API 確認回傳是否正確：

bash
curl -s https://your-app.com/api/products | jq

如果還是有問題，看 wrangler tail 的 log，找有沒有錯誤訊息。

最直接的做法：截圖給 AI 看 ​

有時候用文字描述問題很累——「頁面上有個東西位置不對」、「按鈕點了沒反應」、「錯誤訊息出現在奇怪的地方」。

直接截圖，貼給 Cursor 裡的 AI 看。

截圖可以包含：

  • 瀏覽器裡看到的錯誤畫面
  • 終端機的錯誤訊息（比複製文字更完整，顏色和格式都看得到）
  • 和預期不符的 UI 結果
  • Cloudflare Dashboard 的錯誤 log

告訴 AI：

這是我的問題，截圖如下：
[貼截圖]

我期望的結果是：[說明]
實際看到的是：[說明]
幫我找出問題在哪裡。

截圖比文字描述更準確，AI 能直接看到你看到的東西，不需要靠你翻譯。

特別有用的場景：

  • UI 跑版：直接截圖，比描述「左邊有個東西跑到右邊」更清楚
  • 終端機錯誤：截圖包含顏色標示和完整 stack trace，比複製純文字更完整
  • Cloudflare log：截圖整個 log 畫面，AI 能看到時間戳記和完整錯誤

一個重要心態 ​

遇到錯誤不代表你失敗了，代表你在學習。

每一個錯誤都有原因，每一個原因都能找到。你不需要自己搞懂所有細節——AI 是你的調試夥伴，把錯誤訊息和 code 貼給它，它能幫你找出大多數問題。

遇到錯誤的正確流程：複製完整錯誤 → 貼給 AI → 理解原因 → 修好 → 繼續。

不要慌，不要關掉，不要重試同樣的事期待不同結果。

Danko Peng
X · YouTube · Threads

👉 回到教程首頁

想直接上手完整的 Cloudflare 全棧模板？
👉 vibefast.app — 早鳥 $99，2026 年 8 月 1 日漲至 $199。