網路上的資料，
怎麼被「讀」進程式裡？

你聽到有人說 Firecrawl 出了一個很強、又免費的爬蟲工具。要判斷它強不強、該不該用、會不會踩雷，得先看懂「爬蟲」這整個世界。 這頁從零講起：爬蟲在做什麼、為什麼是個難題、市面工具怎麼分檔、免費跟付費差在哪，中間還有一個可以動手玩的 3D 控制台，讓你親眼看見「為什麼有些工具要收錢」。

一個網頁（本來是給人看的）
  → 程式把整頁抓下來（拿到 HTML 原始碼）
    → 從一堆標籤裡抽出你要的東西（標題 / 價格 / 內文…）
      → 存成乾淨格式（表格 / JSON / Markdown）
        → 餵給分析、資料庫，或現在最夯的 → 餵給 AI

「爬蟲」（web scraping / crawling）就是用程式自動化地讀網頁、把要的資料抽出來。 你用滑鼠開瀏覽器、用眼睛讀、手動複製貼上——爬蟲就是把這整套換成程式，一次處理幾百幾千頁，輸出成電腦能直接用的格式。

三個常被搞混的動作

這節是整頁最重要的觀念。「網頁原始碼」和「你在瀏覽器看到的畫面」常常不是同一個東西。看懂這件事，後面的 headless 瀏覽器、JavaScript、Firecrawl 全都會一秒理解。

抽象講完，看一個具體的。假設你要把某個「課程列表」頁面變成一張可用的表格。整個流程其實就五步：

同一頁，兩種輸出

<div class="course">
  <h3>心電圖判讀</h3>
  <span class="i">王醫師</span>
  <b>NT$1,200</b>
</div> ...（再重複 50 次）

標題          講師    價格
心電圖判讀     王醫師   1200
影像判讀入門   李醫師   980
... → 存成 CSV / Markdown
直接餵 Excel 或 AI

「selector」就是你給程式的定位規則。網站一改版，selector 失效，這條 pipeline 就斷了——記住這點，它是 Part 04 第四道牆的伏筆。

如果每個網站都乖乖把資料攤在 HTML 裡、又歡迎你抓，那爬蟲就是十行程式的事。現實反過來——下面這五道牆，就是付費工具存在的理由。你付的錢，幾乎都在買「幫你翻過這些牆」。下一節你可以親手開關它們。

這就是上一節五道牆的可操作版。請求封包從左邊（URL）流向右邊（乾淨資料），每道牆預設是關的（紅色），封包會卡住。 打開對應的能力（開關），牆變綠、封包就能通過。右邊帳本即時算出你的成功率、吞吐、成本、維護負擔、法律風險——你會親眼看到：每開一道牆都要付代價，而真實工具就是把這些代價打包成不同方案。

前面多在講抓「一頁」（scrape）。但 crawler 的精髓是自己發現並走遍很多頁。它的邏輯像在迷宮裡有系統地探路：

起始 URL
  → 抓這頁，順便找出頁面上所有連結
    → 把新連結丟進「待辦佇列」（queue）
      → 每抓一頁就記進「已造訪集合」（visited set）→ 避免重複抓
        → 限制「深度」（depth）：只往下幾層，免得整個網路都爬
          → 佇列空了，或到達上限 → 結束

所有爬蟲工具可以排成一條光譜。左邊＝自己寫程式，最自由、最省錢，但每道牆自己扛；右邊＝全託管服務，最省事、規模最大，但要付錢。沒有哪一檔「最好」，只有「對不對你的場景」。

付費服務賣的不是「抓網頁」這個動作（免費工具也會），而是幫你解決那五道牆。具體說，你的錢買的是這六樣（對照剛剛的控制台）：

價格與額度經常變動，務必以各官網為準；這裡只給你「量級感」。下面已標註計價單位與查核日，避免被單一數字誤導。

傳統爬蟲抓回來是一坨 HTML，你得自己寫規則挑欄位、洗乾淨。但這兩年抓網頁多半是為了餵給 AI（問答、RAG 知識庫、agent）。於是冒出新工具：直接吐出 AI 能吃的乾淨 Markdown，省掉中間清洗。

抓回 HTML（一坨標籤）
   ↓ 你寫 selector
逐欄位挑出來
   ↓ 自己洗雜訊
結構化 JSON
   ↓
還要再轉成 AI 能讀的格式

給一個網址
   ↓ 一次呼叫
回乾淨的 Markdown
（廣告/選單/雜訊已去掉）
   ↓
直接餵給 AI，零清洗

這個新類別的三個代表

把市場放進一張二維圖：橫軸＝你願意花多少設定功夫（左：肯寫 code／右：要零設定），縱軸＝你的規模與反爬需求（下：小量試用／上：工業級）。拉動下面兩條 slider，地圖上的「你」會移動，下方給出建議起點（不是排名，是「從這裡開始，撞牆了再升級」）。

新手最常犯的錯，是只問「程式有沒有跑完」，不問「抓回來的資料對不對」。爬蟲最危險的不是當掉，是安靜地抓錯——它不報錯，但資料是壞的。常見的隱性失敗：

你已經有一套 headless Chrome + CDP 的自動抓取流程（免費、全掌控、能帶登入狀態、不經過第三方）。所以問題不是「要不要換成 Firecrawl」，而是「哪些場景值得多用一個工具」。

先別急著爬：四個「該不該爬」的問題

HTML

網頁的原始碼，由一堆「標籤」組成。瀏覽器把它畫成你看到的畫面；爬蟲拿到的是這份原始碼。

DOM

瀏覽器把 HTML 解析成的「節點樹」。程式沿著它定位「第幾個元素」。

靜態 vs 動態頁面

靜態＝內容直接寫在 HTML。動態＝要瀏覽器跑 JavaScript 才長出內容（無限捲動、即時載入）。

Headless browser

沒有畫面的瀏覽器，由程式操控。用來把動態頁面真的「跑出來」再抓。Playwright / Puppeteer 是代表。

Selector

定位規則，告訴程式「要抓哪個元素」。網站改版時最容易失效的就是它。

Proxy / IP 輪替

代理伺服器。用不同 IP 發請求，讓網站不覺得是同一台機器在狂抓，避免被封。付費服務最大的成本來源。

Rate limit

網站限制「同一來源每秒/每分能請求幾次」，超過就擋。抓太快會撞到。

CAPTCHA

「我不是機器人」那種驗證。網站用來擋自動化流量的手段之一。

robots.txt

網站根目錄的一個檔，宣告「哪些頁歡迎/不歡迎被機器人抓」。是慣例規範，不是技術強制。

API key

呼叫付費服務的「鑰匙」，綁定帳號與計費。Keyless 的賣點就是「不用這個」。

Credit / 額度

託管服務的計量單位，通常 1 credit ≈ 抓 1 頁；難抓的站（開隱身模式）一頁可能扣多個 credit。

Markdown

輕量純文字格式（標題、粗體、清單）。乾淨、好讀、AI 最好消化——LLM-ready 工具的標準輸出。

RAG

Retrieval-Augmented Generation。先抓外部資料當「參考書」，再讓 AI 根據它回答。爬蟲常是 RAG 的第一步。

CDP

Chrome DevTools Protocol。直接用程式驅動真實 Chrome 的協定，能帶你的登入狀態，自動化程度高。