Local Scanner MCP

本地掃描MCP服務器，為AI助手提供本地代碼和網頁的掃描、驗證和截圖功能

開發者工具瀏覽器自動化 #本地掃描 #代碼驗證 #網頁截圖 #開發輔助本地 .JavaScript

評分 : 2分

下載量 : 16

更新時間 : 2025-04-28

什麼是本地掃描器MCP服務器？

本地掃描器MCP服務器是一款幫助開發者與本地開發環境交互的強大工具。它允許AI助手測試、調試和分析運行在本地主機上的Web應用及代碼文件。

如何使用本地掃描器MCP服務器？

通過安裝服務器並配置客戶端（如Cline或Cascade），您可以輕鬆啟動服務並與您的開發項目進行交互。

適用場景

適合需要頻繁調試和驗證本地項目的開發人員，尤其適用於前端開發、後端服務集成和自動化測試。

主要功能

scan_localhost訪問本地URL，捕獲控制檯日誌並檢測運行時錯誤。

screenshot_localhost對本地URL生成屏幕截圖。

lint_code檢查JavaScript、TypeScript或CSS代碼文件的語法和風格。

validate_html驗證HTML內容是否符合標準。

優勢與侷限性

優勢

提高開發效率，減少手動操作。

支持多種編程語言和文件格式。

與主流IDE無縫集成。

侷限性

僅限於本地環境使用。

可能需要較高的系統資源來運行。

如何使用

下載並安裝

克隆GitHub倉庫並按照說明安裝依賴項。

配置MCP客戶端

編輯設置文件以指向服務器路徑。

開始使用

調用API執行所需任務，例如截圖或代碼檢查。

使用案例

案例1：掃描localhost模擬登錄過程並捕獲錯誤日誌。

案例2：生成截圖獲取儀表板頁面的完整截圖。

案例3：檢查代碼檢測JavaScript文件中的潛在問題。

案例4：驗證HTML確保HTML文檔符合W3C標準。

常見問題

如何安裝本地掃描器MCP服務器？

服務器支持哪些編程語言？

為什麼我的截圖只顯示部分內容？

是否可以在Windows上運行該服務器？

🚀 本地掃描 MCP 服務器

本地掃描 MCP 服務器是一個用於掃描本地代碼和 localhost URL 的模型上下文協議（MCP）服務器。它能提供工具來驗證代碼質量、捕獲屏幕截圖以及分析運行在 localhost 上的網頁，助力開發者更好地進行本地開發。

🚀 快速開始

本地掃描 MCP 服務器擴展了 AI 助手與本地開發環境交互的功能，讓 AI 助手能夠：

測試和調試正在運行的本地 Web 應用程序
捕獲屏幕截圖以進行視覺驗證
檢查代碼文件的質量並確保符合行業標準
驗證 HTML 文件的可訪問性和符合性

此服務器尤其適合使用 Cline（VSCode 插件）或 Cascade（WindSurf 插件）等 AI 助手的開發人員，幫助他們利用 AI 能力輔助本地開發任務。

✨ 主要特性

該服務器提供了以下實用工具：

1. 掃描 localhost

可訪問一個 localhost URL，捕獲控制檯日誌，並檢查運行時錯誤。參數：

url（必填）：要掃描的 localhost URL（必須以 http://localhost 或 https://localhost 開頭）
waitTime（可選）：頁面加載後等待的時間，以毫秒為單位（默認：1000）
actions（可選）：在頁面上執行的操作列表，例如：
- 點擊：{ "type": "click", "selector": "#elementId" }
- 輸入：{ "type": "input", "selector": "#textInput", "value": "example" }

示例：

{
  "tool": "scan_localhost",
  "params": {
    "url": "http://localhost:3000",
    "waitTime": 2000,
    "actions": [
      { "type": "click", "selector": "#submitBtn" },
      { "type": "input", "selector": "#searchInput", "value": "測試" }
    ]
  }
}

2. 截取本地網頁截圖

能夠捕獲 localhost 上的網頁屏幕截圖。參數：

url（必填）：要截取的 localhost URL
width（可選）：截圖的寬度（默認：1920）
height（可選）：截圖的高度（默認：1080）

示例：

{
  "tool": "screenshot_localhost",
  "params": {
    "url": "http://localhost:8080",
    "width": 1280,
    "height": 720
  }
}

3. 檢查代碼質量

可驗證 JavaScript/TypeScript 代碼的質量。參數：

code（必填）：要檢查的代碼內容
linter（可選）：使用的代碼檢查工具（默認：ESLint）

示例：

{
  "tool": "lint_code",
  "params": {
    "code": "function hello() {\n  console.log('Hello, World!');\n}\nhello();",
    "linter": "ESLint"
  }
}

4. 驗證 HTML 文件

能檢查 HTML 文件的可訪問性和符合性。參數：

html（必填）：要驗證的 HTML 內容
checkAccessibility（可選）：是否檢查可訪問性（默認：true）
checkW3C（可選）：是否檢查 W3C 標準符合性（默認：true）

示例：

{
  "tool": "validate_html",
  "params": {
    "html": "<html><head><title>測試頁面</title></head><body><h1>歡迎來到我的網站！</h1></body></html>",
    "checkAccessibility": true,
    "checkW3C": true
  }
}

📦 安裝指南

克隆倉庫

git clone https://github.com/your-repository/local-scanner-mcp.git
cd local-scanner-mcp

構建項目

npm install

啟動服務器

npm start

💻 使用示例

與 VSCode/Cline 集成

編輯 Cline 的配置文件（通常位於 ~/.config/line/addons_config.json）：

{
  "mcpServers": {
    "local-scanner": {
      "command": "node",
      "args": ["$(CURRENT_DIR)/path/to/local-scanner-mcp/build/index.js"],
      "disabled": false,
      "autoApprove": []
    }
  }
}

與 WindSurf/Cascade 集成

編輯 WindSurf 的配置文件（通常位於 ~/.config/windsurf/config.json）：

{
  "mcpServers": {
    "local-scanner": {
      "command": "node",
      "args": ["$(CURRENT_DIR)/path/to/local-scanner-mcp/build/index.js"],
      "disabled": false,
      "autoApprove": []
    }
  }
}