Safari DevTools MCP

Name: Safari DevTools MCP
Author: HayoDev

โดย HayoDevรุ่น 1.8.1i★ 3iรันบนเครื่อง

ชื่อใน registryio.github.HayoDev/safari-devtools-mcp

วิธีติดตั้ง

ใช้ทำอะไรได้

ยังไม่มีคำอธิบายภาษาไทย ดูข้อเท็จจริงด้านล่าง หรือเปิดคำอธิบายต้นฉบับจากผู้ทำ

ต่อแบบ ติดตั้งในเครื่อง
บัญชีหรือคีย์ ไม่ต้องใส่คีย์
หมวด เครื่องมือนักพัฒนา

คำอธิบายต้นฉบับจากผู้ทำ (อังกฤษ)

MCP server for Safari DevTools — browser debugging and automation for AI coding agents

ติดตั้ง

เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง

ผลตรวจผ่าน 2/3 · ทำงานบนเครื่องคุณ · ✓ ตรวจคำสั่งแล้ว 13 พ.ย. 2569

ขั้นแรก: คุณใช้ AI ตัวไหน

Claudeเว็บ · แอป · มือถือChatGPTเว็บClaude CodeTerminalCursorโปรแกรมเขียนโค้ดVS Codeโปรแกรมเขียนโค้ดอื่น ๆโปรแกรมอื่น

เลือกแอปที่คุณใช้ ขั้นตอนจะขึ้นด้านล่าง

ต่อกับ Claude ได้ แต่ต้องเตรียมก่อน

ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว) · ใช้ได้เฉพาะแอป Claude บนคอม (Windows หรือ Mac) ไม่ใช่บนเว็บหรือมือถือ

ให้ AI ติดตั้งให้

คัดลอกข้อความนี้ไปวางในแชตของ Claude AI จะเช็กเครื่อง บอกว่าจะแก้ไฟล์ไหน และรอคุณตกลงก่อนทุกครั้ง

ช่วยติดตั้ง MCP server ชื่อ Safari DevTools MCP ให้ Claude ในเครื่องนี้ ทำตามลำดับ 1) เช็กว่ามี Node.js ด้วยคำสั่ง node -v ถ้าไม่มี ให้บอกฉันไปลงจาก https://nodejs.org/en/download ห้ามลงเอง 2) ใช้คอนฟิกนี้เท่านั้น (ผ่านตัวตรวจของ PopNx MCP แล้ว): { "mcpServers": { "safari-devtools": { "command": "npx", "args": [ "-y", "safari-devtools-mcp" ] } } } 3) บอก path เต็มของไฟล์ที่จะแก้ หรือคำสั่งที่จะรัน แล้วรอฉันตกลงก่อน 4) ไม่ต้องใช้คีย์ 5) ทำตามที่ตกลง แล้วตรวจว่าเครื่องมือของ Safari DevTools MCP ขึ้นจริง

ข้อความนี้ไม่มีคีย์ของคุณ ถ้าต้องใช้คีย์ AI จะบอกให้คุณวางเองในไฟล์หรือช่องของแอป

1
ลง Node.js ในเครื่อง (ถ้ายังไม่มี)
ลงไว้แล้วหรือยัง? เช็กก่อน · เปิด Terminal แล้วพิมพ์คำสั่งนี้ กด Enter
node -v
- ขึ้นเลขรุ่น เช่น v26.13.1 = ลงแล้ว ข้ามขั้นนี้ได้
- ขึ้นว่า "command not found" (Windows ขึ้นว่า "is not recognized") = ยังไม่ได้ลง หรือเพิ่งลงแต่ยังไม่ได้ปิดแล้วเปิด Terminal ใหม่
เปิด Terminal ยังไง
Mac: กด ⌘ + Space พิมพ์ Terminal แล้วกด Enter
Windows: เปิดเมนู Start พิมพ์ Windows PowerShell แล้วกด Open
ยังไม่ได้ลง: เปิดหน้าดาวน์โหลดทางการ เลือกรุ่น LTS แล้วเลือกตัวติดตั้งแบบกดเอง: Mac ไฟล์ .pkg · Windows ไฟล์ .msi ดับเบิลคลิกแล้วกดถัดไปจนจบ ไม่ต้องใช้คำสั่ง curl
เปิดหน้าดาวน์โหลด Node.js ↗
ลงเสร็จแล้ว ปิด Terminal เปิดใหม่ แล้วพิมพ์คำสั่งเดิมอีกครั้ง ต้องขึ้นเลขรุ่น: node -v
ลงครั้งเดียว ใช้ได้กับทุกตัวที่ต้องใช้ Node.js
ทำแล้ว
เปิดไฟล์ตั้งค่าของแอป Claude บนคอม
SettingsDeveloperEdit Config
ทำแล้ว

วางค่าตั้งนี้แล้วบันทึกไฟล์

{
  "mcpServers": {
    "safari-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "safari-devtools-mcp"
      ]
    }
  }
}

ทำแล้ว

ปิดแอป Claude แล้วเปิดใหม่
ทำแล้ว
ลองเลย
ใช้ Safari DevTools MCP บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง
✓ ถ้า Claude บอกว่ากำลังใช้ Safari DevTools MCP หรือมีชื่อเครื่องมือของ Safari DevTools MCP ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Anthropic เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

ChatGPT ยังต่อ Safari DevTools MCP ไม่ได้

Safari DevTools MCP ต้องติดตั้งในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะตัวที่ทำงานบนเว็บ

คุณทำแบบนี้แทนได้

ก · ใช้แอปที่ต่อ Safari DevTools MCP ได้

ดูขั้นตอนสำหรับ Claude →ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว) · ใช้ได้เฉพาะแอป Claude บนคอม (Windows หรือ Mac) ไม่ใช่บนเว็บหรือมือถือ
ดูขั้นตอนสำหรับ Claude Code →ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)
ดูขั้นตอนสำหรับ Cursor →ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)
ดูขั้นตอนสำหรับ VS Code →ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)

ข · ตัวอื่นในหมวด เครื่องมือนักพัฒนา ที่ต่อกับ ChatGPT ได้

เลือกจากตัวที่ใช้มากในหมวดเดียวกัน เฉพาะตัวที่ต่อด้วยที่อยู่ได้โดยไม่ต้องใส่คีย์

Sentry✓ ChatGPT
Compiler Explorer✓ ChatGPT
GitDiagram✓ ChatGPT

ต่อกับ Claude Code ได้ แต่ต้องเตรียมก่อน

ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)

ให้ AI ติดตั้งให้

คัดลอกข้อความนี้ไปวางในแชตของ Claude Code AI จะเช็กเครื่อง บอกว่าจะแก้ไฟล์ไหน และรอคุณตกลงก่อนทุกครั้ง

ช่วยติดตั้ง MCP server ชื่อ Safari DevTools MCP ให้ Claude Code ในเครื่องนี้ ทำตามลำดับ 1) เช็กว่ามี Node.js ด้วยคำสั่ง node -v ถ้าไม่มี ให้บอกฉันไปลงจาก https://nodejs.org/en/download ห้ามลงเอง 2) ใช้คอนฟิกนี้เท่านั้น (ผ่านตัวตรวจของ PopNx MCP แล้ว): claude mcp add --scope user safari-devtools -- npx -y safari-devtools-mcp 3) บอก path เต็มของไฟล์ที่จะแก้ หรือคำสั่งที่จะรัน แล้วรอฉันตกลงก่อน 4) ไม่ต้องใช้คีย์ 5) ทำตามที่ตกลง แล้วตรวจว่าเครื่องมือของ Safari DevTools MCP ขึ้นจริง

1
ลง Node.js ในเครื่อง (ถ้ายังไม่มี)
ลงไว้แล้วหรือยัง? เช็กก่อน · เปิด Terminal แล้วพิมพ์คำสั่งนี้ กด Enter
node -v
- ขึ้นเลขรุ่น เช่น v26.13.1 = ลงแล้ว ข้ามขั้นนี้ได้
- ขึ้นว่า "command not found" (Windows ขึ้นว่า "is not recognized") = ยังไม่ได้ลง หรือเพิ่งลงแต่ยังไม่ได้ปิดแล้วเปิด Terminal ใหม่
เปิด Terminal ยังไง
Mac: กด ⌘ + Space พิมพ์ Terminal แล้วกด Enter
Windows: เปิดเมนู Start พิมพ์ Windows PowerShell แล้วกด Open
ยังไม่ได้ลง: เปิดหน้าดาวน์โหลดทางการ เลือกรุ่น LTS แล้วเลือกตัวติดตั้งแบบกดเอง: Mac ไฟล์ .pkg · Windows ไฟล์ .msi ดับเบิลคลิกแล้วกดถัดไปจนจบ ไม่ต้องใช้คำสั่ง curl
เปิดหน้าดาวน์โหลด Node.js ↗
ลงเสร็จแล้ว ปิด Terminal เปิดใหม่ แล้วพิมพ์คำสั่งเดิมอีกครั้ง ต้องขึ้นเลขรุ่น: node -v
ลงครั้งเดียว ใช้ได้กับทุกตัวที่ต้องใช้ Node.js
ทำแล้ว
เปิด Terminal
Mac: กด Command+Space พิมพ์ Terminal · Windows: เปิด PowerShell
ทำแล้ว
3
วางคำสั่งนี้แล้วกด Enter
```
claude mcp add --scope user safari-devtools -- npx -y safari-devtools-mcp
```
ทำแล้ว
พิมพ์ /mcp ใน Claude Code
ต้องเห็น Safari DevTools MCP ในรายการและขึ้นว่าเชื่อมต่อแล้ว
ทำแล้ว
ลองเลย
ใช้ Safari DevTools MCP บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง
✓ ถ้า Claude Code บอกว่ากำลังใช้ Safari DevTools MCP หรือมีชื่อเครื่องมือของ Safari DevTools MCP ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ต่อกับ Cursor ได้ แต่ต้องเตรียมก่อน

ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)

ให้ AI ติดตั้งให้

คัดลอกข้อความนี้ไปวางในแชตของ Cursor AI จะเช็กเครื่อง บอกว่าจะแก้ไฟล์ไหน และรอคุณตกลงก่อนทุกครั้ง

ช่วยติดตั้ง MCP server ชื่อ Safari DevTools MCP ให้ Cursor ในเครื่องนี้ ทำตามลำดับ 1) เช็กว่ามี Node.js ด้วยคำสั่ง node -v ถ้าไม่มี ให้บอกฉันไปลงจาก https://nodejs.org/en/download ห้ามลงเอง 2) ใช้คอนฟิกนี้เท่านั้น (ผ่านตัวตรวจของ PopNx MCP แล้ว): { "mcpServers": { "safari-devtools": { "command": "npx", "args": [ "-y", "safari-devtools-mcp" ] } } } 3) บอก path เต็มของไฟล์ที่จะแก้ หรือคำสั่งที่จะรัน แล้วรอฉันตกลงก่อน 4) ไม่ต้องใช้คีย์ 5) ทำตามที่ตกลง แล้วตรวจว่าเครื่องมือของ Safari DevTools MCP ขึ้นจริง

1
ลง Node.js ในเครื่อง (ถ้ายังไม่มี)
ลงไว้แล้วหรือยัง? เช็กก่อน · เปิด Terminal แล้วพิมพ์คำสั่งนี้ กด Enter
node -v
- ขึ้นเลขรุ่น เช่น v26.13.1 = ลงแล้ว ข้ามขั้นนี้ได้
- ขึ้นว่า "command not found" (Windows ขึ้นว่า "is not recognized") = ยังไม่ได้ลง หรือเพิ่งลงแต่ยังไม่ได้ปิดแล้วเปิด Terminal ใหม่
เปิด Terminal ยังไง
Mac: กด ⌘ + Space พิมพ์ Terminal แล้วกด Enter
Windows: เปิดเมนู Start พิมพ์ Windows PowerShell แล้วกด Open
ยังไม่ได้ลง: เปิดหน้าดาวน์โหลดทางการ เลือกรุ่น LTS แล้วเลือกตัวติดตั้งแบบกดเอง: Mac ไฟล์ .pkg · Windows ไฟล์ .msi ดับเบิลคลิกแล้วกดถัดไปจนจบ ไม่ต้องใช้คำสั่ง curl
เปิดหน้าดาวน์โหลด Node.js ↗
ลงเสร็จแล้ว ปิด Terminal เปิดใหม่ แล้วพิมพ์คำสั่งเดิมอีกครั้ง ต้องขึ้นเลขรุ่น: node -v
ลงครั้งเดียว ใช้ได้กับทุกตัวที่ต้องใช้ Node.js
ทำแล้ว
กดปุ่มนี้เพื่อเปิด Cursor
เปิดใน Cursor
Cursor จะถามยืนยันการติดตั้ง ให้กด Install
ทำแล้ว
เปิดแชตของ AI ใน Cursor โหมด Agent
ทำแล้ว
ลองเลย
ใช้ Safari DevTools MCP บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง
✓ ถ้า Cursor บอกว่ากำลังใช้ Safari DevTools MCP หรือมีชื่อเครื่องมือของ Safari DevTools MCP ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Cursor เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

ต่อกับ VS Code ได้ แต่ต้องเตรียมก่อน

ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)

ให้ AI ติดตั้งให้

คัดลอกข้อความนี้ไปวางในแชตของ VS Code AI จะเช็กเครื่อง บอกว่าจะแก้ไฟล์ไหน และรอคุณตกลงก่อนทุกครั้ง

ช่วยติดตั้ง MCP server ชื่อ Safari DevTools MCP ให้ VS Code ในเครื่องนี้ ทำตามลำดับ 1) เช็กว่ามี Node.js ด้วยคำสั่ง node -v ถ้าไม่มี ให้บอกฉันไปลงจาก https://nodejs.org/en/download ห้ามลงเอง 2) ใช้คอนฟิกนี้เท่านั้น (ผ่านตัวตรวจของ PopNx MCP แล้ว): { "servers": { "safari-devtools": { "type": "stdio", "command": "npx", "args": [ "-y", "safari-devtools-mcp" ] } } } 3) บอก path เต็มของไฟล์ที่จะแก้ หรือคำสั่งที่จะรัน แล้วรอฉันตกลงก่อน 4) ไม่ต้องใช้คีย์ 5) ทำตามที่ตกลง แล้วตรวจว่าเครื่องมือของ Safari DevTools MCP ขึ้นจริง

1
ลง Node.js ในเครื่อง (ถ้ายังไม่มี)
ลงไว้แล้วหรือยัง? เช็กก่อน · เปิด Terminal แล้วพิมพ์คำสั่งนี้ กด Enter
node -v
- ขึ้นเลขรุ่น เช่น v26.13.1 = ลงแล้ว ข้ามขั้นนี้ได้
- ขึ้นว่า "command not found" (Windows ขึ้นว่า "is not recognized") = ยังไม่ได้ลง หรือเพิ่งลงแต่ยังไม่ได้ปิดแล้วเปิด Terminal ใหม่
เปิด Terminal ยังไง
Mac: กด ⌘ + Space พิมพ์ Terminal แล้วกด Enter
Windows: เปิดเมนู Start พิมพ์ Windows PowerShell แล้วกด Open
ยังไม่ได้ลง: เปิดหน้าดาวน์โหลดทางการ เลือกรุ่น LTS แล้วเลือกตัวติดตั้งแบบกดเอง: Mac ไฟล์ .pkg · Windows ไฟล์ .msi ดับเบิลคลิกแล้วกดถัดไปจนจบ ไม่ต้องใช้คำสั่ง curl
เปิดหน้าดาวน์โหลด Node.js ↗
ลงเสร็จแล้ว ปิด Terminal เปิดใหม่ แล้วพิมพ์คำสั่งเดิมอีกครั้ง ต้องขึ้นเลขรุ่น: node -v
ลงครั้งเดียว ใช้ได้กับทุกตัวที่ต้องใช้ Node.js
ทำแล้ว
กดปุ่มนี้เพื่อเปิด VS Code
เปิดใน VS Code
VS Code จะถามยืนยันการติดตั้ง ให้กด Install
ทำแล้ว
เปิดแชตของ AI ใน VS Code โหมด Agent
ทำแล้ว
ลองเลย
ใช้ Safari DevTools MCP บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง
✓ ถ้า VS Code บอกว่ากำลังใช้ Safari DevTools MCP หรือมีชื่อเครื่องมือของ Safari DevTools MCP ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ VS Code เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

โปรแกรมอื่นที่ใช้ MCP ได้ เช่น Windsurf, Zed หรือ Gemini CLI มีวิธีเพิ่มต่างกัน ดูวิธีของแต่ละตัวในหน้ารวมโปรแกรม

ดูโปรแกรมที่ใช้ MCP ทั้งหมด →

ค่าตั้งแบบไฟล์ JSON อยู่ในหัวข้อ “สำหรับคนเขียนโค้ด” ด้านล่าง

ติดตรงไหน? ถามคนที่ใช้ Safari DevTools MCP อยู่💬 พูดคุย →

สำหรับคนเขียนโค้ด: คำสั่ง Terminal และค่าตั้ง JSON

ติดตั้งในเครื่อง

Claude Code

claude mcp add --scope user safari-devtools -- npx -y safari-devtools-mcp

Claude Desktop (claude_desktop_config.json)

{
  "mcpServers": {
    "safari-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "safari-devtools-mcp"
      ]
    }
  }
}

Cursor (~/.cursor/mcp.json)

{
  "mcpServers": {
    "safari-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "safari-devtools-mcp"
      ]
    }
  }
}

VS Code (mcp.json)

{
  "servers": {
    "safari-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "safari-devtools-mcp"
      ]
    }
  }
}

ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README

สรุป

ดาว GitHub i: 3
ดาวน์โหลดต่อสัปดาห์i: 60/สัปดาห์
license i: MIT
การเชื่อมต่อ: รันบนเครื่อง
ช่องทาง (transport): stdio
รุ่นล่าสุดi: 1.8.1
หมวดi: เครื่องมือนักพัฒนา
ส่งเข้า registryi: 13 เม.ย. 2569
แก้โค้ดล่าสุดi: 13 เม.ย. 2569
ผู้ทำ: HayoDev
แพ็กเกจ: npm: safari-devtools-mcp
repo: HayoDev/safari-devtools-mcp
สถานะใน registry: ใช้งานอยู่

ใช้กับโปรแกรมไหนได้

ดูจากแบบการต่อของ server ตัวนี้ และเอกสารของผู้ทำโปรแกรมแต่ละตัว ตรวจเมื่อ 10 พ.ย. 2569

ติดตั้งบนเครื่องได้ใน

Claude Goose LM Studio Msty Studio Cherry Studio Cursor VS Code + GitHub Copilot Visual Studio Windsurf (Devin Desktop)Zed Kiro Cline Continue JetBrains AI Assistant Claude Code Codex CLI Gemini CLI OpenCode nodecode Warp LibreChat Raycast

ดูโปรแกรมทั้งหมดพร้อมข้อดีข้อเสีย →

คู่มือที่เกี่ยวข้อง

เรื่องที่ 8เช็ก 5 ข้อก่อนติดตั้ง MCP ไม่ให้ข้อมูลรั่วใช้เวลาราว 2 นาทีต่อตัว ดูจากหน้าของตัวนั้นบนเว็บเรา และหน้าขออนุญาตของโปรแกรม AI ก่อนกดยอมอ่าน 4 นาที

ทำอะไรได้บ้าง

รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง

ผลตรวจเบื้องต้นi

เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 15 พ.ย. 2569

✓ ผ่าน
ตัวตนผู้ทำตรงกับ repo
ชื่อใน registry ยืนยันด้วยบัญชี GitHub HayoDev ซึ่งเป็นเจ้าของ repo
! ควรระวัง
ยังมีคนดูแล
แก้โค้ดล่าสุด 7 เดือนที่ผ่านมา นานกว่า 6 เดือน
✓ ผ่าน
มีสัญญาอนุญาต (license)
ใช้ MIT
– ไม่เกี่ยว
endpoint ตอบ
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
– ไม่เกี่ยว
ล็อกอินแบบ OAuth
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
… ยังไม่ตรวจ
คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต

ช่องโหว่ที่เปิดเผยแล้ว (OSV.dev)

ยังไม่ได้ตรวจ

เราตรวจอะไรบ้าง → · JSON

ผู้ทำ: ขอให้ตรวจใหม่ หรือแจ้งข้อมูลผิด

เข้าสู่ระบบ

พูดคุย

ถาม แชร์เคล็ดลับ หรือแจ้งว่าใช้ไม่ได้ เรียงตามที่คนกดว่ามีประโยชน์

ยังไม่มีใครโพสต์ ถามหรือแชร์เป็นคนแรกได้เลย

ข้อความในส่วนนี้เขียนโดยผู้ใช้ ไม่ใช่ทีม PopNx

เข้าสู่ระบบเพื่อโพสต์

รีวิวจากผู้ใช้

ยังไม่มีรีวิว

เข้าสู่ระบบเพื่อเขียนรีวิว

เทียบกับตัวอื่นในหมวด เครื่องมือนักพัฒนาi

ดาวมากกว่า 81% ของอีก 5918 ตัวในหมวดนี้
ส่งรุ่นใหม่เข้า registry ล่าสุดกว่า 8% ของอีก 5918 ตัวในหมวดนี้
ผลตรวจเบื้องต้นดีกว่าหรือเท่ากับ 44% ของอีก 5918 ตัวในหมวดนี้

เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo

คำถามที่พบบ่อย

Safari DevTools MCP ปลอดภัยไหม?

จากการตรวจเบื้องต้นของเรา ผ่าน 2 จาก 3 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น

ต้องใช้กุญแจหรือรหัสอะไรบ้าง?

registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก

ตัวนี้รันบนเครื่องหรือบนคลาวด์?

รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)

ยังมีคนดูแลอยู่ไหม?

repo บน GitHub มีการแก้โค้ดล่าสุด 7 เดือนที่ผ่านมา และส่งรุ่นล่าสุด (1.8.1) เข้า registry 7 เดือนที่ผ่านมา

ใช้กับโปรแกรมไหนได้บ้าง?

โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย

มีตัวไหนใช้แทนได้บ้าง?

ในหมวดเดียวกันมี GitDiagram, Appllama, Cloudflare MCP, Omnara, Repowise

ตัวอื่นที่ทำงานคล้ายกัน

หมวดเดียวกันจากผู้ทำคนอื่น ผ่านตัวตรวจคำสั่งแล้ว ตัวทางการขึ้นก่อน แล้วเรียงตามดาว

อ่านการ์ด:↓ ดาวน์โหลดต่อสัปดาห์i★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi

GitDiagram

Architecture diagrams, explanations and Mermaid source for public GitHub repositories.

โดย ahmedkhaleel2004ใช้กันมาก★ 18.9Kอัปเดต 2 เดือนที่ผ่านมา

รันบนคลาวด์✓ เจ้าของบริการ · gitdiagram.comทีม PopNx ลองใช้จริงแล้ว

วิธีต่อ

Appllama

Study screens, flows and paywalls from top-earning iOS apps, then build from what wins.

โดย Appllamaใช้กันมาก★ 5.2Kอัปเดต 3 เดือนที่ผ่านมา

รันบนคลาวด์✓ เจ้าของบริการ · appllama.io

วิธีต่อ

Cloudflare MCP

Cloudflare MCP servers

โดย cloudflareใช้กันมาก★ 4.5Kอัปเดต 14 เดือนที่ผ่านมา

รันบนคลาวด์✓ เจ้าของบริการ · mcp.cloudflare.comทีม PopNx ลองใช้จริงแล้ว

วิธีต่อ

Omnara

Deploy durable AI agents with Omnara, an open-source managed-agent platform.

โดย omnara-aiใช้กันมาก★ 3.4Kอัปเดต 2 เดือนที่ผ่านมา

รันบนคลาวด์✓ เจ้าของบริการ · omnara.com

วิธีต่อ

Repowise

Codebase intelligence for AI coding agents: graph, git history, docs, decisions, code health.

โดย repowise-devใช้กันมาก↓ 6.5K/สัปดาห์★ 8.1K ดาวรวมทั้งรีโปอัปเดต เมื่อวานซืน

บนเครื่องหรือคลาวด์✓ เจ้าของบริการ · repowise.dev

ติดตั้ง

GitDiagram — ใช้บนคลาวด์ ไม่ต้องลงเครื่อง · ไม่ต้องใช้คีย์
Appllama — ใช้บนคลาวด์ ไม่ต้องลงเครื่อง · ไม่ต้องใช้คีย์
Cloudflare MCP — ใช้บนคลาวด์ ไม่ต้องลงเครื่อง · ไม่ต้องใช้คีย์ · อยู่ในคลังของ Claude
Omnara — ใช้บนคลาวด์ ไม่ต้องลงเครื่อง · ไม่ต้องใช้คีย์
Repowise — มีทั้งบนคลาวด์และแบบลงเครื่อง · ไม่ต้องใช้คีย์

README จากผู้ทำ

เปิดอ่าน README

ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ

Safari DevTools MCP

safari-devtools-mcp lets your coding agent (such as Claude, Cursor, Copilot or Gemini) control and inspect a live Safari browser on macOS. It acts as a Model-Context-Protocol (MCP) server, giving your AI coding assistant access to Safari DevTools for debugging, automation, and testing.

Chrome developers get powerful AI debugging through chrome-devtools-mcp by Google. Safari developers should have something equivalent — this project brings that same experience to Safari, with matching tool names and parameter schemas so you can swap between browsers with minimal friction.

Changelog | Contributing

Note: This server exposes browser content (page data, console logs, network traffic) to MCP clients. Avoid browsing sensitive websites or entering credentials while a session is active.

Why safari-devtools-mcp?

This project uses WebDriver for capabilities that scripting alone cannot provide:

Network request/response body capture — intercepts fetch and XHR calls with full headers, payloads, and timing
DOM snapshots via accessibility tree — stable element UIDs that survive page re-renders, not brittle CSS selectors
CSS computed style inspection — read any computed property from any element
Cookie and storage management — read, write, and delete cookies, localStorage, and sessionStorage
Element-level screenshots — capture individual elements, not just the full viewport
Session auto-recovery — detects dead SafariDriver sessions and reconnects transparently

Key features

Browser debugging: Capture console logs, inspect network requests, and evaluate JavaScript — with stack traces and full request/response details.
Reliable automation: Click, type, fill forms, drag and drop, and press keyboard shortcuts using accessibility-tree snapshots with stable UIDs.
Native macOS integration: Tab management via AppleScript for listing, switching, and controlling Safari tabs across windows

Requirements

macOS (Safari and SafariDriver are Apple-exclusive)
Node.js 18+ (22+ recommended)
Safari with remote automation enabled

Safari setup

Open Safari > Settings > Advanced > check "Show features for web developers"
Develop menu > check "Allow Remote Automation"
Authorize SafariDriver:

   sudo safaridriver --enable

Getting started

Standard MCP config:

"mcpServers": { "safari-devtools": { "command": "npx", "args": ["-y", "safari-devtools-mcp@latest"] } } }

Claude Code

claude mcp add safari-devtools -- npx -y safari-devtools-mcp@latest

Or add to your project's .mcp.json using the standard config above.

Claude Desktop

Add the standard config to ~/Library/Application Support/Claude/claude_desktop_config.json.

Cursor

Add the standard config to your Cursor MCP settings.

VS Code

Add the standard config to .vscode/mcp.json.

Copilot CLI

copilot mcp add safari-devtools -- npx -y safari-devtools-mcp@latest

Gemini CLI

gemini mcp add safari-devtools -- npx -y safari-devtools-mcp@latest

Or add the standard config to your ~/.gemini/settings.json.

Gemini Code Assist

Add the standard config to your .gemini/settings.json in the project root.

JetBrains AI Assistant & Junie

Add the standard config to your .junie/mcp.json in the project root.

Raycast

Open "Install MCP Server" in Raycast and fill in:

Command: npx
Arguments: -y safari-devtools-mcp@latest

Or copy the standard config JSON above before opening the command — Raycast will auto-fill the form.

Visual Studio

Add the standard config to your .vs/mcp.json in the solution root.

Warp

Add the standard config to your Warp MCP settings file at ~/.warp/mcp.json.

From source

git clone https://github.com/HayoDev/safari-devtools-mcp.git

cd safari-devtools-mcp npm install && npm run build

Then point your MCP client to the built entry point:

"mcpServers": { "safari-devtools": { "command": "node", "args": [ "/path/to/safari-devtools-mcp/build/src/bin/safari-devtools-mcp.js" ] } } }

Your first prompt

Navigate to https://example.com, take a snapshot, and list any console errors.

Slim mode

Use --slim to reduce token usage with shorter tool descriptions. Useful when working with context-limited models or long conversations:

"mcpServers": { "safari-devtools": { "command": "npx", "args": ["-y", "safari-devtools-mcp@latest", "--slim"] } } }

Prompts (skills)

The server exposes guided debugging workflows as MCP prompts. Clients that support prompts (e.g. Claude Desktop, Claude Code) can invoke them by name:

Prompt	Description
`safari-devtools`	Getting started — tool overview, recommended workflow, and Safari-specific notes
`a11y-debugging`	Accessibility audit — a11y tree inspection, axe-core injection, WCAG checks
`safari-specific-debugging`	Debug WebKit quirks — CSS prefixes, JS feature gaps, ITP/CORS issues
`performance-debugging`	Performance analysis — Navigation Timing, Core Web Vitals, resource waterfall

Tools (45)

Debugging

Tool	Description
`list_console_messages`	List console messages with filtering by level (log, warn, error)
`get_console_message`	Get a detailed message including stack trace and arguments
`clear_console`	Clear all captured console messages
`list_network_requests`	Monitor network requests — Fetch, XHR, and resource loads
`get_network_request`	Get full request/response details with headers and body
`clear_network`	Clear all captured network requests
`evaluate_script`	Execute JavaScript in the browser context and return results
`take_screenshot`	Capture a PNG screenshot of the page or a specific element
`take_snapshot`	Accessibility-tree snapshot of the DOM with stable UIDs for element targeting

Page content

Tool	Description
`get_page_content`	Get the page title, URL, and visible text content
`get_html_source`	Get the full HTML source of the page
`extract_links`	Extract all links with their text, href, and rel attributes
`extract_meta`	Extract meta tags (og:, twitter:, description, etc.)

Navigation

Tool	Description
`list_pages`	List all open Safari tabs across windows
`select_page`	Switch to a specific tab
`new_page`	Open a new tab and navigate to a URL
`close_page`	Close a tab
`navigate_page`	Navigate to a URL, go back, forward, or reload
`wait_for`	Wait for specific text to appear on the page
`resize_page`	Resize the browser window
`handle_dialog`	Accept or dismiss browser dialogs (alert, confirm, prompt)

Scroll

Tool	Description
`scroll`	Scroll the page in any direction by a given amount
`scroll_to_element`	Scroll an element into view by its UID

CSS inspection

Tool	Description
`get_computed_style`	Get computed CSS styles for any element by UID

Cookies & storage

Tool	Description
`get_cookies`	Get browser cookies, optionally filtered by name or domain
`set_cookie`	Set a cookie with name, value, and optional attributes
`delete_cookie`	Delete a cookie by name, or delete all cookies
`get_storage`	Read from localStorage or sessionStorage
`set_storage`	Write a key-value pair to localStorage or sessionStorage
`delete_storage`	Delete a key or clear all entries from localStorage/sessionStorage

Input automation

Tool	Description
`click`	Click an element by UID from a snapshot
`click_at`	Click at specific x/y coordinates
`right_click`	Right-click (context menu) on an element
`select_option`	Select an option from a dropdown by value or label
`hover`	Hover over an element
`fill`	Type into an input field or select from a dropdown
`fill_form`	Fill multiple form fields at once
`type_text`	Type text into the currently focused element
`drag`	Drag and drop between elements or coordinates
`press_key`	Press a key or combination (e.g., `Meta+A`, `Enter`)
`upload_file`	Upload a file through a file input

iOS Safari validation

Tool	Description
`inspect_viewport_meta`	Parse the viewport meta tag and validate against iOS best practices (width, zoom, viewport-fit)

| get_safe_area_insets | Read CSS safe-area-inset values and check whether t

ตัดมาแค่ช่วงต้น อ่านต่อใน repo

Safari DevTools MCP

ใช้ทำอะไรได้

ติดตั้ง

ลง Node.js ในเครื่อง (ถ้ายังไม่มี)

เปิดไฟล์ตั้งค่าของแอป Claude บนคอม

วางค่าตั้งนี้แล้วบันทึกไฟล์

ปิดแอป Claude แล้วเปิดใหม่

ลองเลย

คุณทำแบบนี้แทนได้

ลง Node.js ในเครื่อง (ถ้ายังไม่มี)

เปิด Terminal

วางคำสั่งนี้แล้วกด Enter

พิมพ์ /mcp ใน Claude Code

ลองเลย

ลง Node.js ในเครื่อง (ถ้ายังไม่มี)

กดปุ่มนี้เพื่อเปิด Cursor

เปิดแชตของ AI ใน Cursor โหมด Agent

ลองเลย

ลง Node.js ในเครื่อง (ถ้ายังไม่มี)

กดปุ่มนี้เพื่อเปิด VS Code

เปิดแชตของ AI ใน VS Code โหมด Agent

ลองเลย

ติดตั้งในเครื่อง

สรุป

ใช้กับโปรแกรมไหนได้

คู่มือที่เกี่ยวข้อง

ทำอะไรได้บ้าง

ผลตรวจเบื้องต้นi

ตัวตนผู้ทำตรงกับ repo

ยังมีคนดูแล

มีสัญญาอนุญาต (license)

endpoint ตอบ

ล็อกอินแบบ OAuth

คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง

ช่องโหว่ที่เปิดเผยแล้ว (OSV.dev)

พูดคุย

รีวิวจากผู้ใช้

เทียบกับตัวอื่นในหมวด เครื่องมือนักพัฒนาi

คำถามที่พบบ่อย

ตัวอื่นที่ทำงานคล้ายกัน

GitDiagram

Appllama

Cloudflare MCP

Omnara

Repowise

README จากผู้ทำ

Safari DevTools MCP

Changelog | Contributing

Why safari-devtools-mcp?

Key features

Requirements

Safari setup

Getting started

Your first prompt

Slim mode

Prompts (skills)

Tools (45)

Debugging

Page content

Navigation

Scroll

CSS inspection

Cookies & storage

Input automation

iOS Safari validation