最近在幫 Claude Code 設定 MCP Server 的時候，用到了 Google 官方出的 chrome-devtools-mcp 這個工具，主要是拿來做瀏覽器的自動化驗證。安裝指令裡用的是 npx 而不是 npm install，一開始我還沒特別在意，但後來仔細研究才發現，這兩者的行為差異其實直接影響到版本更新策略。這邊把我整理的筆記記錄一下。

npm install vs npx 到底差在哪？

說實話，剛開始學 Node.js 的時候，我也搞不太清楚 npx 跟 npm 的差別，總覺得都是裝套件用的。但其實它們的設計理念完全不同。

簡單來說，npm install 會把套件下載到 node_modules/ 資料夾裡，持久保存在本地。而 npx 的概念則是「臨時下載、執行完就可以不管了」。

幾個關鍵差異整理一下：

  • 版本解析時機：npm install 安裝時解析一次版本就固定了；npx 加上 @latest 的話，每次執行都會重新解析，自動抓最新版
  • 磁碟空間：npm 裝了就佔空間；npx 用完可能會被快取策略清掉
  • 啟動速度：npm 因為已經在本地了所以快；npx 首次會稍慢一點（要下載），不過後續有快取就還好

MCP Server 的啟動與更新機制

安裝指令長這樣：

1
claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest --autoConnect

重點是那個 npx chrome-devtools-mcp@latest 的部分。那到底 MCP Server 什麼時候會啟動、什麼時候會去下載更新呢？

啟動流程

整個流程大概是這樣：

1
2
3
4
5
6
7
Claude Code 啟動
  -> 讀取 MCP 設定
  -> 執行 npx chrome-devtools-mcp@latest --autoConnect
  -> npx 檢查本地快取
     -> 快取有且未過期 -> 直接用快取（不下載）
     -> 快取過期或沒有 -> 下載最新版
  -> MCP Server 啟動，常駐到 Claude Code 關閉

什麼時候會觸發下載？

這邊我特別整理了一下，因為一開始自己也搞混過：

  • 同一個 Claude Code session 內多次使用 MCP 工具：不會下載，MCP Server 啟動後就常駐了
  • 重啟 Claude Code：npx 會檢查快取，通常不會下載（快取還在的話）
  • 快取被清理或有新版本釋出：這時候才會下載一次

幾個重要結論

搞了一陣子之後，我歸納出幾個重點：

  1. MCP Server 是 Claude Code 啟動時就跑起來的背景程序，不是每次呼叫工具才啟動
  2. 平常使用 MCP 工具時，只是呼叫已經在跑的 MCP Server，不涉及下載
  3. @latest 的好處是自動更新，不需要另外手動處理版本更新
  4. 每個 MCP Server 之間是各自獨立的，更新互不影響

為什麼選 npx 而不是 npm install？

其實想清楚之後原因蠻明確的：

  1. 自動更新 — 加上 @latest 就能在每次啟動時解析最新版，完全不用手動維護
  2. 不污染全域環境 — 不會在使用者的 node_modules 裡面留下一堆檔案
  3. MCP 社群慣例 — Claude Code 官方文件跟社群的 MCP Server 幾乎都是用 npx 安裝，照著慣例走比較不會踩坑

常用相關指令

最後附上幾個我常用的指令，方便之後查：

1
2
3
4
5
6
7
8
# 安裝 chrome-devtools-mcp
claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest --autoConnect

# 查看已安裝的 MCP
claude mcp list

# 移除
claude mcp remove chrome-devtools

小提醒：如果發現 MCP Server 行為怪怪的，可以先試著重啟 Claude Code，讓 npx 重新抓一次最新版，通常就能解決了。