เมื่อวานผมนั่ง debug pipeline ดึงข้อมูลสินค้าจากเว็บอีคอมเมิร์ซไทยเพื่อป้อนเข้า LLM ช่วยวิเคราะห์ เริ่มแรกใช้ requests + BeautifulSoup ตรงๆ จนกระทั่งเว็บเป้าหมายเปลี่ยนมา render ด้วย JavaScript ทั้งหน้า สคริปต์ผมก็พังคาคอนโซลด้วย error นี้

requests.exceptions.ConnectionError: HTTPSConnectionPool(host='shop.example.co.th', port=443):
Max retries exceeded with url: /products (Caused by NewConnectionError(
  <urllib3.connection.HTTPSConnection object at 0x7f8b1c>:
  Failed to establish a new connection: [Errno 110] Connection timed out))
Timeout: 30000ms

พอสลับไปใช้ Playwright ก็เจอปัญหาใหม่ — context window ของ LLM ระเบิดเพราะดึง HTML ทั้งหน้ามาเกือบ 200,000 tokens ค่าใช้จ่ายพุ่งเป็นหลักดอลลาร์ต่อหน้า วันนี้ผมจะมาเล่าวิธีที่ใช้ chrome-devtools-mcp (MCP server ที่ให้ AI agent ควบคุม Chrome DevTools Protocol โดยตรง) ร่วมกับ สมัครที่นี่ HolySheep AI เพื่อ scrape เว็บแบบ headless แล้วส่งข้อมูลที่กรองแล้วให้ LLM ประมวลผลต่อ ซึ่งทำให้ latency อยู่ที่ <50ms ประหยัดค่าใช้จ่ายได้ถึง 85%+ ด้วยอัตรา ¥1=$1 รับชำระผ่าน WeChat/Alipay ได้ และได้เครดิตฟรีเมื่อลงทะเบียน

1. chrome-devtools-mcp คืออะไร และทำไมต้องจับคู่กับ LLM agent

chrome-devtools-mcp เป็น MCP (Model Context Protocol) server ที่ทีม ChromeDevTools ปล่อยบน GitHub ตอนนี้มีดาวมากกว่า 6.2k ⭐ ตามที่ผมเช็คเมื่อเช้า มันทำหน้าที่เป็นสะพานให้ agent สั่งงาน Chrome ผ่าน DevTools Protocol ได้โดยตรง เช่น navigate, evaluate JavaScript