讓 AI 助理看懂網頁：Firecrawl、Playwright、WebFetch 三大抓取工具完整比較

問題：AI 看不到網頁內容、無法爬蟲、分析資料？

你有沒有遇過這種情況？

你：「幫我看看這篇文章在講什麼」（貼了一個網址）
AI：「抱歉，我無法直接存取網頁內容...」

這是因為 AI 助理本身看不到網頁，如果他手上沒工具。

解法：給 AI 一組工具，讓它可以「出門看網頁」。

目前主流有三種工具，各有擅長的場景。這篇會幫你搞懂：什麼時候用哪個、怎麼裝、怎麼設定。

---

三個工具是什麼？用餐廳比喻

想像你想知道一家餐廳的菜單內容：

Firecrawl — 外送平台

你打開外送 App，搜尋餐廳名稱，App 直接把菜單整理好給你看：菜名、價格、照片，排版清清楚楚。

• 優點：最快、最乾淨、自動整理格式
• 缺點：如果餐廳沒有上架外送平台（像是私人社群），你就看不到
• 費用：免費額度一次性 500 credits（lifetime），用完要升級 Hobby Plan $16/月起

Playwright — 親自走一趟

你出門搭車到餐廳，坐下來翻菜單、跟店員對話、拍照記錄。什麼都看得到，因為你就在現場。

• 優點：什麼都能看到（包括需要登入的內容、社群貼文）
• 缺點：比較慢（要開瀏覽器、載入頁面）
• 費用：完全免費

WebFetch — 打電話問

你直接打電話給餐廳：「請問你們有什麼菜？」對方口頭念給你聽。

• 優點：最快、零成本
• 缺點：如果菜單是寫在黑板上的（動態網頁），電話裡聽不到
• 費用：完全免費

---

完整比較表

	Firecrawl	Playwright	WebFetch
一句話定位	雲端爬蟲，AI 優化輸出	真實瀏覽器自動化	簡易 HTTP 請求
輸出格式	乾淨的 Markdown	網頁 DOM / 截圖	HTML 轉 Markdown
處理 JavaScript	✅ 可以	✅ 可以	❌ 不行
社群媒體	❌ 會被擋	✅ 唯一選擇	❌ 拿到空殼
需要登入的網頁	❌ 不支援	✅ 可以模擬登入	❌ 不支援
速度	⚡ 快（2~5 秒）	🐢 較慢（5~15 秒）	⚡⚡ 最快（1~2 秒）
費用	免費 500 credits 一次性	完全免費	完全免費
安裝複雜度	需要 API Key	需要安裝瀏覽器引擎	內建，不用裝

---

---

什麼時候用哪個？決策流程

收到一個網址，想讓 AI 看內容
    │
    ├─ 是 Notion 頁面？
    │   → 用 Notion API（永遠不用爬蟲工具）
    │
    ├─ 是社群媒體？（FB / IG / Threads / X）
    │   → 直接用 Playwright
    │
    ├─ 是靜態網頁？（GitHub、API 文件、技術部落格）
    │   → 先試 WebFetch（最快），失敗再換
    │
    └─ 一般網頁？（新聞、部落格、產品頁面）
        → 先用 Firecrawl（預設首選）
            ├─ 成功 → 完成
            └─ 失敗 → 換 Playwright

記住這個優先順序：

Firecrawl → Playwright → WebFetch

社群媒體例外，直接跳到 Playwright。

💡 2026-04 更新：如果你是重度使用者（一天抓超過 20 個網頁），或希望「無額度限制、資料自己掌控」，可以跳到文末「2026-04 補充：開源自架方案 Crawl4AI」，那是現在的第四個選擇。

---

安裝與設定

前提

你已經安裝了 Claude Code（如果還沒，先看 Claude Code 完整入門教學）。

這三個工具都可以透過 MCP（Model Context Protocol）簡單連接的。

► 如果你不知道 MCP 是什麼，先看 MCP 設定入門（系列文章，敬請期待）。

---

Firecrawl — 雲端爬蟲

Step 1：取得 API Key

1. 到 firecrawl.dev 註冊帳號
2. 進入 Dashboard → API Keys
3. 點「Create API Key」，複製 Key

Step 2：設定 MCP

在 Claude Code 的 MCP 設定檔加入：

{
  "mcpServers": {
    "firecrawl": {
      "command": "npx",
      "args": ["-y", "firecrawl-mcp"],
      "env": {
        "FIRECRAWL_API_KEY": "你的 API Key"
      }
    }
  }
}

Step 3：測試

跟 AI 說：「幫我用 Firecrawl 看一下這個網址的內容」，貼上任意網頁連結。

額度說明：

• Hobby Plan（免費）：一次性 500 credits（lifetime）
• 抓一個網頁 = 1 credit
• 遞迴爬整個網站 = 每個頁面 1 credit（小心使用）
• 以一般用量來說，一天抓 10~15 個網頁，免費額度用不完

---

Playwright — AI 用的瀏覽器

Step 1：安裝瀏覽器引擎

打開終端機，執行：

npx playwright install chromium

這會下載一個 Chromium 瀏覽器（約 200MB），AI 會用它來「打開」網頁。

Step 2：設定 MCP

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@anthropic/mcp-playwright"]
    }
  }
}

Step 3：測試

跟 AI 說：「幫我用 Playwright 打開這個 Threads 貼文，把內容抓下來」。

使用情境：

• 抓 Facebook / Instagram / Threads 的公開貼文
• 需要截圖的場景（AI 會幫你拍網頁畫面）
• 需要互動的網頁（點按鈕、填表單、滾動頁面）

---

WebFetch — 內建工具

不用安裝！ 這是 Claude Code 內建的功能。

直接跟 AI 說：「幫我看一下這個 GitHub 頁面在講什麼」，它就會用 WebFetch 去抓。

適合場景：

• GitHub README、API 文件
• 技術部落格（通常是靜態網頁）
• 任何不需要 JavaScript 渲染的簡單頁面

不適合：

• 社群媒體（拿到空殼）
• 需要登入的網頁
• 重度使用 JavaScript 的 SPA 網站

---

常見場景對照

我想做的事	用哪個工具	原因
看一篇部落格文章	Firecrawl	輸出乾淨，格式好
抓一篇 Threads 貼文	Playwright	社群媒體只有它能抓
看 GitHub 上的 README	WebFetch	靜態頁面，最快
抓 Facebook 粉專貼文	Playwright	社群媒體
查一個 npm 套件的文件	WebFetch	靜態頁面
把一整個網站的內容爬下來	Firecrawl（crawl）	支援遞迴爬取
需要網頁截圖	Playwright	唯一能截圖的
看一篇新聞報導	Firecrawl	新聞網站通常有複雜排版

---

三個教訓

在實際使用這些工具的過程中，我學到幾件事：

1. 社群媒體不要浪費時間試 Firecrawl

FB、IG、Threads 這些平台會封鎖雲端爬蟲的 IP。每次嘗試都要等它超時失敗才換下一個，白白浪費時間。看到社群媒體的網址，直接用 Playwright。

2. 不要小看 WebFetch

很多時候你只是想快速看一下某個頁面的內容，WebFetch 一秒就搞定。不是所有場景都需要出動 Firecrawl 或 Playwright。

3. 了解「Threads 官方 API」的限制

即使你裝了 Threads API，它也只能操作你自己帳號的貼文（發文、回覆、看數據）。想看別人的貼文？只能靠 Playwright 去「看」公開頁面。這不是工具的問題，而是平台的設計。

---

---

2026-04 補充：開源自架方案 Crawl4AI（第四個選擇）

這篇文章最初推薦 Firecrawl + Playwright + WebFetch 三個工具組合。但隨著我自己用一年下來，加上 Firecrawl 免費額度其實是「一次性 500」的真相，2026 年起，我開始把 Crawl4AI 加進常用工具箱，變成第四個主力。

Crawl4AI 是什麼？

• GitHub 58k+ stars、Apache 2.0 授權，完全免費開源
• 底層引擎跟 Playwright 一樣是 Chromium，差別在「出來的結果」
• 幫你自動做：去廣告、去導覽列、去頁尾、轉乾淨 Markdown、遞迴爬整站
• 可以 Docker 部署在你自己主機上，LLM-ready 輸出

Firecrawl vs Crawl4AI 快速比較

項目	Firecrawl	Crawl4AI
基本 JS 渲染	✅ 內建	✅ 內建
乾淨 Markdown	✅	✅（品質相當）
反爬蟲（一般網站）	✅ 內建	⚠️ 要自己接 proxy
反爬蟲（Cloudflare）	❌ 約 34% 成功	❌ 差不多
費用	500 lifetime → $16/月起	完全免費（自架）
資料隱私	經過第三方	自己控制
安裝難度	⚡ 輕鬆（API Key）	🔧 中等（要部署）

該不該換到 Crawl4AI？看你的使用量

• 一般使用者（一天抓 10-30 個網址）：Firecrawl 500 credits 其實夠用很久，不用折騰
• 長期深度用戶（寫週報、大量內容研究、資料收集）：自架 Crawl4AI 是對的方向
• 大量批次爬取（整站、百篇以上）：Crawl4AI 自架 + 加 proxy 更划算

部署在哪？兩條路線

選項 A：Zeabur 部署（推薦給沒有 24hr 主機的人）

• Zeabur 專用主機 $24/月起（4 CPU / 8GB RAM），跑 Crawl4AI 綽綽有餘
• 優點：一鍵 Docker 部署、24/7 穩定、免維護
• 缺點：機房 IP，遇到反爬蟲嚴格的站會被擋更多

選項 B：自家 24hr 主機（推薦給有 Mac mini / NAS 的人）

• 用家裡的 Mac mini、Synology NAS、老電腦都行
• 優點：住宅 IP 有天然反爬蟲優勢、完全零成本
• 缺點：家裡停電 / 網路斷就中斷

反爬蟲真相（重要補充）

不管是 Firecrawl 還是 Crawl4AI，遇到 Cloudflare / DataDome 這類保護的網站，成功率都只有三成多（Proxyway 獨立測試）。真的要突破要加付費 residential proxy（IPRoyal $1.75/GB、Bright Data 較貴），或者從家裡網路爬（住宅 IP 天然優勢）。這不是工具限制，是網站方在做反爬蟲軍備競賽。

---

總結

一般網頁 → Firecrawl（乾淨快速）
社群媒體 → Playwright（唯一選擇）
靜態文件 → WebFetch（秒速完成）
Notion    → Notion API（專用工具）

三個工具互相補位，覆蓋了 95% 的網頁抓取場景。不用額外花錢買第三方服務，這個組合就是目前 AI Agent 生態圈最主流的配置。

---

📍 AI Agent（Claude Code、Codex）系列教學文章

• 讓 AI 助理看懂網頁：Firecrawl、Playwright、WebFetch 三大抓取工具完整比較
• 白話文教學：AI 怎麼幫你動手做事？API、CLI、MCP、瀏覽器控制的選擇邏輯
• Vibe Coding 學習筆記：為什麼要重複造輪子？
• Claude Code 是什麼？從 Claude Cowork 到 Code，非工程師也能上手的完整入門教學
• 21 天，我用 Claude Code 打造了一整套 AI 分身助理記錄
• Zeabur 專用伺服器怎麼選？白話文選購指南，讓 AI 幫你搬家！
• Zeabur 應用案例：網站部署、AI Hub、龍蝦 OpenClaw、VPS（50% 折扣）
• Claude Code 做好了網頁，怎麼讓別人也能看到？Zeabur 與 Cloudflare 部署完整指南
• Claude Cowork 更好用了？它跟 NotebookLM 差在哪？什麼時候才需要升級到 Code？
• Claude Code 的 CLAUDE.md 和 SKILL 教學，打造可重複使用的 AI 自動化工作流
• 用 iMessage 串接 Claude Code — 讓家人也能用 AI 助理