Claude in Chrome 教學：讓 AI 自己打開瀏覽器檢查你的網站

網站在電腦上看起來很好，拿手機一開，字太小、邊界歪掉，自己卻一直沒發現。Claude Code 平常只看得到程式碼，看不到畫面。這篇讓它連上瀏覽器：自己打開你的網站、縮成手機大小、截圖看哪裡跑版，再回頭改 CSS，改完再截一次確認。

快速回答 Claude Code 連上瀏覽器後，可以用手機大小檢查網站、修改 CSS，再截圖量尺寸。接法有兩種：Claude in Chrome 擴充，要 Pro、Max、Team 或 Enterprise 方案並用 /login 登入；Playwright MCP 讓它操作另一個瀏覽器，不限方案，需要 Node.js。2026-10-23 用 Claude Code 2.1.309 搭配 Playwright MCP 實測，找到標籤字太小、左右留白差 7px，修改後再量，左右都是 35.8px。

做完這篇，你會有

• Claude Code 能自己打開瀏覽器、截圖、量尺寸
• 個人網站手機版的跑版被找出來並修好
• 一張修改後的手機版截圖，留白左右一樣

開始之前要準備：

• 前幾篇的 my-site 資料夾（個人網站那篇做的）
• 一個能在本機開網站的方法：在網站資料夾輸入 python3 -m http.server，網址是 http://localhost:8000

兩種接法怎麼選

只是檢查自己的網站，兩種都可以。下面步驟 1 選一種做就好；步驟 2 之後兩種一樣。

步驟 1A：接上 Claude in Chrome

1. 到 Chrome 線上應用程式商店安裝 Claude in Chrome 擴充，用你的 Claude 帳號登入。Edge、Brave 等 Chromium 瀏覽器也可以。
2. 在網站資料夾輸入 claude --chrome 啟動。
3. 輸入 /chrome，確認狀態是已啟用、擴充已安裝。想以後都自動連上，在這裡選 Enabled by default。

它第一次要操作某個網站時，會先問你允不允許。Windows 的 WSL 不支援這個功能，請改用 1B。

步驟 1B：接上 Playwright MCP（不用擴充）

在網站資料夾的終端機輸入：

claude mcp add --scope project playwright -- npx -y @playwright/mcp@latest

--scope project 會把設定寫進資料夾裡的 .mcp.json。接著輸入 claude 啟動，它會問要不要用這個新的 MCP 伺服器：

選 Use this MCP server 按 Enter。輸入 /mcp 確認：

實測的電腦沒有螢幕，所以加了 --headless（不開視窗）。你的電腦有螢幕就不用加，可以看著它開瀏覽器。

步驟 2：請它用手機大小檢查

先在另一個終端機視窗，到網站資料夾執行 python3 -m http.server。回到 Claude Code，輸入：

網站已經在 http://localhost:8000 跑著。請用瀏覽器打開它，把視窗設成手機大小：寬 390px、高 844px，截圖看看作品卡片區有沒有字太小、跑版或擠在一起的地方。截圖存在 shots/ 資料夾。先告訴我你看到的問題，不要改檔案。

用 Playwright 的話，可以把「瀏覽器」寫成「playwright」，它就知道要用哪個工具。

它不只看截圖，還會量每個元素的寬度和字級，所以能說出「左邊 36px、右邊 29px」這種肉眼不容易發現的差距。

步驟 3：請它修好，再截一次確認

輸入：

好，把技術標籤改成 14px、顏色加深，再修好卡片左右留白不一致。改完用同樣的手機尺寸再截一張 shots/mobile-390-after.png，量一下左右留白確認一樣了。

注意它最後的提醒：這次的改動桌機版也會跟著變，它沒有截桌機版。想確認的話，再請它用 1280 寬截一張。

換你做

挑一頁你自己的網站，請它用手機和桌機兩種寬度各截一張，比對哪裡不一樣。例如：

• 「用 390 和 1280 寬各截一張首頁，告訴我手機版少了什麼」
• 「點每個按鈕，告訴我哪個沒反應，Console 有沒有錯誤」

常見卡關

• /chrome 顯示沒連上：確認擴充是 1.0.36 以上、在 chrome://extensions 裡有開啟，再用 claude --chrome 重開。用 API 金鑰登入的話這個功能不會開，請改用 /login，或改走 1B。
• 啟動時跳過了 MCP 詢問：預設選項是「不用」。輸入 /mcp 看 playwright 的狀態，或刪掉設定重加一次。
• 它說打不開 localhost：先確認另一個終端機視窗還在網站資料夾跑著 python3 -m http.server，再請它重試。
• 改完了，截圖還是舊的：實測時瀏覽器用了快取裡的舊 CSS，它自己強制重新載入才量對。你自己看時也按強制重新整理。

你做到了

• 讓 Claude Code 連上瀏覽器，能自己開網頁、截圖、量尺寸
• 用手機大小檢查字級和留白，這次找到標籤字太小、左右留白不一致
• 請它修好，再截一次圖、量過確認

常見問題

它會亂點我已登入的網站嗎？

Claude in Chrome 用的是你平常的瀏覽器，第一次操作某個網站前會先問你。只想讓它看自己的網站，用 Playwright 開一個乾淨的瀏覽器比較安心。

這樣會不會很耗用量？

如果發現對話空間用得比較快，官方文件建議把 Enabled by default 關掉，需要時再用 claude --chrome 連上。

可以檢查已經上線的網站嗎？

可以請它打開上線的網址看。不過這篇示範的是本機網站：修改要在本機的網站資料夾做，用 http://localhost:8000 確認沒問題再上傳。

下一步

• Claude Code MCP 教學：連上 GitHub 等外部工具：claude mcp add 在這篇第一次出現。
• Claude Code Subagents 教學：組一支 AI 小隊，一個寫、一個審：可以再加一個「只負責在手機尺寸檢查畫面」的 subagent。

參考資料

• Anthropic, Use Claude Code with Chrome（Claude Code 文件，擴充版本、支援的瀏覽器、方案與 /login、API 金鑰時不開啟、--chrome、/chrome 與 Enabled by default、網站權限、WSL 不支援、疑難排解） https://code.claude.com/docs/en/chrome
• Anthropic, Connect Claude Code to tools via MCP（Claude Code 文件，claude mcp add、--scope project 與 .mcp.json、/mcp） https://code.claude.com/docs/en/mcp
• Microsoft, Playwright MCP（npx @playwright/mcp@latest、--headless） https://github.com/microsoft/playwright-mcp