Safari MCP

อัปเดต: ใน Safari 27 และ Safari Technology Preview 247 เรากำลังแนะนำ Safari MCP server — เซิร์ฟเวอร์ Model Context Protocol สำหรับนักพัฒนาเว็บที่ทำให้ขั้นตอนการพัฒนาและแก้ไขข้อบกพร่องของคุณเร็วขึ้นและมีประสิทธิภาพมากขึ้น เราทราบดีว่า agents กลายเป็นส่วนสำคัญของกระบวนการเขียนโค้ดมากขึ้นเรื่อยๆ และ Safari MCP server ช่วยให้ agent ของคุณสามารถรู้ว่าโค้ดของคุณแสดงผลในเบราว์เซอร์จริงๆ อย่างไร โดยการเชื่อมต่อกับหน้าต่างเบราว์เซอร์ Safari

ไคลเอนต์ที่เข้ากันได้กับ MCP ทุกตัวสามารถเชื่อมต่อกับ Safari MCP server ได้ โดยการเชื่อมต่อ agent ของคุณกับหน้าต่างเบราว์เซอร์ Safari agent ของคุณสามารถจำลองสิ่งที่ผู้ใช้ของคุณประสบพบเจอ ทำให้มีข้อมูลที่จำเป็นในการแก้ไขข้อบกพร่องได้อย่างอิสระมากขึ้น เช่น การเข้าถึง DOM คำขอเครือข่าย ภาพหน้าจอ และเอาต์พุตคอนโซล

มันช่วยเร่งกระบวนการแก้ไขข้อบกพร่องของคุณ และช่วยให้คุณอยู่ในเทอร์มินัลที่สะดวกสบาย ซึ่งหมายถึงการสลับหน้าต่างและพิมพ์พรอมพ์เพื่อแก้ไขโค้ดน้อยลง

กรณีการใช้งาน

หากคุณสร้างเว็บ คุณจะรู้จักการเต้นรำแห่งการแก้ไขข้อบกพร่อง โดยปกติแล้วจะเป็นแบบนี้:

คุณเห็นบางอย่างผิดปกติกับเว็บไซต์ของคุณในเบราว์เซอร์ คุณเปิดคอนโซลเพื่อค้นหามัน คุณคลิกเข้าไปในแท็บสไตล์ คุณเห็นสิ่งที่เสียหาย คุณกลับไปที่โค้ดของคุณเพื่อแก้ไข หรือบางทีคุณอาจถ่ายภาพหน้าจอ อธิบายปัญหาให้ agent ของคุณฟัง และปล่อยให้มันแก้ไขให้ หวังว่ามันจะทำได้ถูกต้อง บั๊กได้รับการแก้ไข และคุณสามารถไปต่อได้

แต่เมื่อมันไม่ได้รับการแก้ไข คุณจะต้องผ่านขั้นตอนการทำงานอีกครั้ง — เบราว์เซอร์ พรอมพ์ Agent

และซ้ำแล้วซ้ำเล่า จนกว่าคุณจะกำจัดบั๊กได้ในที่สุด

ไม่ว่าคุณจะใช้เบราว์เซอร์หรือเครื่องมือใด ขั้นตอนการแก้ไขข้อบกพร่องต้องมีการคลิก เครื่องมือ และการสลับหน้าต่างมากมายเพื่อแก้ไขเพียงครั้งเดียว แต่มันไม่จำเป็นต้องเป็นแบบนั้น หากคุณใช้ agents ในขั้นตอนการพัฒนาอยู่แล้ว Safari MCP server จะทำให้การแก้ไขข้อบกพร่องของคุณเร็วขึ้นและมีประสิทธิภาพมากขึ้น

Safari MCP server ช่วยให้ agent ของคุณสามารถแก้ไขข้อบกพร่องและแก้ไขปัญหาได้ด้วยตัวเองมากขึ้น นี่เป็นเพียงตัวอย่างบางส่วนที่มันสามารถช่วยได้:

การพัฒนาเว็บใน Safari ครั้งต่อไปที่คุณพัฒนาใน Safari คุณจะได้รับประโยชน์จากขั้นตอนการทำงานที่ได้รับการอัปเกรด agent ของคุณช่วยคุณกับโค้ดอยู่แล้ว ตอนนี้มันสามารถทำได้มากขึ้นโดยการตรวจสอบว่าโค้ดของคุณแสดงผลใน Safari จริงๆ อย่างไร

ปรับปรุงความเข้ากันได้กับ Safari การทดสอบในเบราว์เซอร์เพียงตัวเดียวหมายถึงการพลาดบั๊กที่อาจเกิดขึ้นในอีกเบราว์เซอร์หนึ่ง ทำให้ผู้ใช้เหล่านั้นได้รับประสบการณ์ที่ด้อยกว่า ด้วย Safari MCP server agent ของคุณสามารถเปิดเว็บไซต์ของคุณใน Safari ตรวจสอบ computed styles ตรวจสอบเลย์เอาต์ และเปรียบเทียบกับสิ่งที่คุณคาดหวังโดยไม่ต้องสลับหน้าต่าง

วิเคราะห์ประสิทธิภาพ ดูว่าส่วนใดของเว็บไซต์ของคุณที่ทำให้สิ่งต่างๆ ช้าลง Safari MCP server ช่วยให้ agent ของคุณประเมิน JavaScript บนหน้าเว็บเพื่อแสดงเมตริกประสิทธิภาพ เช่น navigation timing และ resource load times เพื่อให้มันสามารถระบุสิ่งที่ทำให้เว็บไซต์ของคุณช้าลงและแก้ไขได้อย่างถูกต้อง

ตรวจสอบการเข้าถึง Safari MCP server ช่วยให้ agent ของคุณตรวจสอบปัญหาการเข้าถึงทั่วไป เช่น ป้ายกำกับที่หายไป แอตทริบิวต์ ARIA ที่ไม่เหมาะสม และคอนทราสต์ที่ไม่ดี เพื่อให้คุณสามารถจับปัญหาที่ส่งผลกระทบต่อผู้ใช้ของคุณได้

ตรวจสอบสถานะผู้ใช้ใดๆ รู้ว่าหน้ากำลังทำงานและดูตามที่ควรจะเป็น agent ของคุณสามารถตรวจสอบสถานะของฟอร์ม ค้นหาอิลิเมนต์โดยใช้ selector ยืนยันการโต้ตอบเฉพาะ แสดงสถานะต่างๆ ของขั้นตอนการชำระเงิน และอื่นๆ ใช้เวลาน้อยลงในการตรวจสอบด้วยตนเองเหล่านี้ และให้อำนาจ agent ทำเพื่อคุณ

นี่เป็นเพียงตัวอย่างบางส่วนของกรณีการใช้งาน ไม่ว่าคุณจะตัดสินใจนำไปใช้อย่างไร Safari MCP server ช่วยให้ agent ของคุณทำสิ่งต่างๆ ให้คุณได้มากขึ้น และลดการไปมาที่การพัฒนาเว็บมักต้องใช้ ขั้นตอนการทำงานที่ง่ายขึ้นหมายถึงบั๊กที่ถูกกำจัดมากขึ้น ผู้ใช้ที่มีความสุขมากขึ้น และผลิตภัณฑ์ที่ดีขึ้น

เครื่องมือ

นี่คือเครื่องมือที่มีให้และสิ่งที่มันทำ:

เครื่องมือ	คำอธิบาย
browser_console_messages	ส่งคืนบันทึกคอนโซลที่บัฟเฟอร์ไว้สำหรับแท็บปัจจุบันหรือแท็บที่ระบุ
browser_dialogs	แสดงรายการและตอบสนองต่อไดอะล็อกของเบราว์เซอร์ (ยอมรับ ปฏิเสธ หรือป้อนข้อความสำหรับ JS prompts)
close_tab	ปิดแท็บเบราว์เซอร์โดยใช้ handle ของมัน
create_tab	สร้างแท็บเบราว์เซอร์ใหม่ อาจโหลด URL ได้
evaluate_javascript	รันโค้ด JavaScript ภายในหน้าและส่งคืนผลลัพธ์
get_network_request	รับรายละเอียดเต็มรูปแบบสำหรับคำขอเครือข่ายที่บันทึกไว้หนึ่งรายการ (headers, body, timing)
get_page_content	แยกเนื้อหาข้อความของหน้าในรูปแบบต่างๆ (markdown, HTML, JSON, ฯลฯ)
list_network_requests	แสดงรายการสรุปคำขอเครือข่าย (URL, method, status, timing) สำหรับแท็บปัจจุบัน
list_tabs	แสดงรายการแท็บเบราว์เซอร์ที่เปิดอยู่ทั้งหมดพร้อม handles และ URLs
navigate_to_url	นำทางไปยัง URL และส่งคืนเนื้อหาของหน้าที่โหลด
page_info	รับข้อมูลเกี่ยวกับหน้าปัจจุบัน: URL, title, และสถานะการโหลด
page_interactions	ดำเนินการโต้ตอบ DOM ตามลำดับ: click, type, scroll, hover, keyPress, ฯลฯ
screenshot	จับภาพหน้าจอของหน้าปัจจุบันเป็น PNG
set_emulated_media	จำลองประเภทสื่อ CSS (เช่น “print”) สำหรับการทดสอบ responsive-design
set_viewport_size	ตั้งค่าขนาด viewport ของเบราว์เซอร์เป็นพิกเซล CSS
switch_tab	สลับไปยังแท็บเบราว์เซอร์อื่นโดยใช้ handle ของมัน
wait_for_navigation	รอให้หน้าปัจจุบันโหลดเสร็จสิ้น ส่งคืน URL และ title สุดท้าย

ด้วย Safari MCP server คุณไม่จำเป็นต้องเขียนพรอมพ์ที่สมบูรณ์แบบ โดยอธิบายให้ agent ของคุณฟังอย่างละเอียดว่าคุณกำลังประสบอะไรในเบราว์เซอร์ คุณสามารถให้ความสามารถแก่ agent ของคุณในการค้นหาด้วยตัวเอง

วิธีเริ่มต้น

Safari 27

ก่อนอื่น คุณจะต้องติดตั้ง Safari 27 เมื่อติดตั้งแล้ว ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานคุณสมบัติสำหรับนักพัฒนาเว็บและ remote automation หากต้องการเปิดใช้งานคุณสมบัติสำหรับนักพัฒนาเว็บ ให้เลือก Safari > Settings > Advanced > ทำเครื่องหมายที่ช่อง Show features for web developers จากนั้นไปที่ Safari > Settings > Developer > ทำเครื่องหมายที่ “Allow remote automation and external agents.”

หากคุณใช้ Claude คุณสามารถใช้คำสั่งต่อไปนี้ในเทอร์มินัลของคุณ:

claude mcp add safari-mcp -- "/usr/bin/safaridriver" --mcp

หากคุณใช้ Codex คุณสามารถใช้คำสั่งต่อไปนี้ในเทอร์มินัลของคุณ:

codex mcp add safari-mcp -- "/usr/bin/safaridriver" --mcp

สำหรับ agents อื่นๆ คุณสามารถใส่สิ่งต่อไปนี้ในไฟล์ mcp.json หรือ config.json ของคุณ

{
  "mcpServers": {
    "safari-mcp": {
      "command": "/usr/bin/safaridriver",
      "args": ["--mcp"]
    }
  }
}

Safari Technology Preview

ก่อนอื่น คุณจะต้องติดตั้ง Safari Technology Preview เมื่อติดตั้งแล้ว ตรวจสอบให้แน่ใจว่าได้เปิดใช้งาน Safari Settings > Advanced > Show features for web developers จากนั้นไปที่ Safari Settings > Developer > Enable remote automation and external agents.

หากคุณใช้ Claude คุณสามารถใช้คำสั่งต่อไปนี้ในเทอร์มินัลของคุณ:

claude mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp

หากคุณใช้ Codex คุณสามารถใช้คำสั่งต่อไปนี้ในเทอร์มินัลของคุณ:

codex mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp

สำหรับ agents อื่นๆ คุณสามารถใส่สิ่งต่อไปนี้ใน mcp.json หรือ config.json:

"safari-mcp-stp": {
  "command": "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver",
  "args": ["--mcp"] 
}

โปรดทราบว่าแม้โค้ดด้านบนจะตั้งชื่อเซิร์ฟเวอร์ว่า safari-mcp-stp คุณสามารถตั้งชื่อมันตามที่คุณต้องการ แม้กระทั่ง safari เมื่อคุณติดตั้ง Safari MCP server แล้ว ลองใช้พรอมพ์ต่อไปนี้:

Find bugs on my site in Safari

How accessible is my site in Safari?

See how my website performs in Safari

แม้ว่าแต่ละ agent จะทำงานแตกต่างกันเล็กน้อย มันไม่ควรต้องถูกบอกให้ใช้ Safari MCP server อย่างชัดเจน — มันจะคิดออกเอง พรอมพ์ง่ายๆ เช่นด้านบนก็เพียงพอที่จะเริ่มต้น MCP

นี่คือวิธีที่การสนทนากับ agent ที่ใช้ Safari MCP server อาจเป็นไปได้:

คุณ: มีรายงานบั๊ก — มีบางอย่างเสียใน Safari บนหน้าเที่ยวบิน ช่วยหาหน่อยได้ไหมว่าเกิดอะไรขึ้น?

Agent: ได้เลย ขอดูก่อน

Agent: ฉันพบบั๊กสองจุดที่แตกต่างกันบนหน้าเที่ยวบินใน Safari ต้องการให้ฉันแก้ทั้งสองจุดไหม?

คุณ: ใช่ มีอะไรอื่นอีกไหมที่นี่ที่อาจทำให้เกิดปัญหากับผู้ใช้ Safari?

Agent: ใช่ มีอีกสองสิ่งที่ควรแจ้งให้ทราบ แอนิเมชันการแสดงผลลัพธ์เสียอย่างเงียบๆ และบันทึกการเริ่มต้นเซิร์ฟเวอร์ API ผิด ฉันควรจัดการทั้งสองอย่างด้วยไหม?

สิ่งที่คุณต้องมีคือคำขอเริ่มต้นเพื่อเริ่มต้น และด้วยความช่วยเหลือของ Safari MCP server agent ของคุณสามารถดำเนินการต่อจากนั้นได้

Safari MCP server รันทั้งหมดบนเครื่องท้องถิ่นของคุณและไม่มีการเรียกเครือข่ายของตัวเอง นอกจากนี้ยังไม่สามารถเข้าถึงข้อมูลส่วนบุคคลของคุณใน Safari (เช่น AutoFill หรือกิจกรรมเบราว์เซอร์อื่นๆ) เมื่อมันจับเนื้อหาหน้า ภาพหน้าจอ หรือบันทึกคอนโซล ข้อมูลนั้นจะไปยัง agent ที่คุณรันโดยตรง — ไม่ใช่ไปยัง Apple สิ่งที่เกิดขึ้นกับข้อมูลนั้นจากจุดนั้นขึ้นอยู่กับ agent และโมเดลที่คุณใช้ เช่นเดียวกับ agent ใดๆ ที่คุณให้เข้าถึงเบราว์เซอร์ของคุณ ให้ใช้เฉพาะที่คุณไว้วางใจเท่านั้น

ทำไมเราถึงสร้างสิ่งนี้

มีหลายวิธีในการสร้างเว็บ ทั้งที่มีและไม่มี AI หาก AI เป็นส่วนหนึ่งของขั้นตอนการทำงานของคุณ เราคิดว่าเครื่องมือนี้จะช่วยให้มีประสิทธิภาพมากขึ้น และถ้าไม่ ก็ไม่เป็นไรเช่นกัน

โดยการสร้างทรัพยากรนี้ เราหวังว่าจะทำให้การทดสอบและแก้ไขข้อบกพร่องใน Safari ง่ายขึ้นกว่าที่เคย โดยการช่วยให้ agent ของคุณเข้าใจว่าสิ่งต่างๆ มีลักษณะและทำงานอย่างไรในเบราว์เซอร์

หากคุณลองใช้หรือนี่เป็นครั้งแรกที่คุณใช้ MCP server บอกให้เรารู้ว่าคุณคิดอย่างไร

ค้นหาเราออนไลน์: Saron Yitbarek บน Bluesky, Jen Simmons บน Bluesky / Mastodon, และ Jon Davis บน Bluesky / Mastodon หากคุณพบปัญหาใดๆ โปรดยื่น รายงานบั๊ก WebKit การยื่นปัญหาสร้างความแตกต่างจริงๆ