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

Wolfgang Beyer
Wolfgang Beyer
X GitHub

Published: June 18, 2026

หากต้องการดีบักเว็บแอปพลิเคชันสมัยใหม่ได้อย่างมีประสิทธิภาพ AI Agent ต้องมีข้อมูลมากกว่าเพียงแค่ซอร์สโค้ด แต่ต้องเข้าใจลักษณะการทำงานของแอปพลิเคชันในขณะรันไทม์ด้วย

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

เป้าหมาย: มากกว่าการวิเคราะห์แบบคงที่

การพัฒนาเว็บสมัยใหม่สร้างขึ้นจากการแยกส่วน เช่น เฟรมเวิร์กอย่าง Angular, React หรือ Vue, แพลตฟอร์ม CMS อย่าง WordPress หรือ Shopify และไลบรารีสำหรับ CSS, กราฟิก 3 มิติ หรือภาพเคลื่อนไหว แม้ว่าเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะเข้าถึง DOM ที่แสดงผลสุดท้ายได้โดยตรง แต่ "ความจริง" ของแอปพลิเคชันมักจะอยู่ในสถานะภายในของเฟรมเวิร์ก เช่น ลำดับชั้นของคอมโพเนนต์ สัญญาณ JavaScript หรือสถานะแบ็กเอนด์

เป้าหมายของเราในการสร้างเครื่องมือสำหรับนักพัฒนาเว็บของบุคคลที่สามคือการจัดเตรียมเส้นทางให้ไลบรารีใดๆ ก็ตามแชร์บริบทที่สมบูรณ์และนำไปใช้ได้จริงนี้กับ AI Agent การดำเนินการดังกล่าวจะช่วยให้ Agent ดีบักปัญหาที่ก่อนหน้านี้ "มองไม่เห็น" ได้ เช่น

  • ลำดับชั้นของคอมโพเนนต์: จับคู่องค์ประกอบ DOM ในหน้ากับคอมโพเนนต์เฟรมเวิร์กและสถานะภายในที่เกี่ยวข้องโดยตรง
  • การตรวจสอบสถานะภายใน: เข้าถึงสถานะฝั่งเซิร์ฟเวอร์หรือเนื้อหาฐานข้อมูลได้โดยตรงภายในเซสชันการดีบัก

วิธีการทำงาน: Discovery API

เครื่องมือสำหรับนักพัฒนาเว็บของบุคคลที่สามใช้ JavaScript API ที่อิงตามเหตุการณ์ เซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะค้นหาเครื่องมือเหล่านี้โดยการส่งเหตุการณ์ devtoolstooldiscovery ในออบเจ็กต์ window ทั่วโลก ระบบจะส่งเหตุการณ์ devtoolstooldiscovery โดยอัตโนมัติในการนำทางทุกหน้า หรือหากมีการเปลี่ยนหน้าเว็บที่เลือก และสามารถส่งได้อย่างชัดเจนโดยใช้เครื่องมือ MCP list_3p_developer_tools

ใช้เครื่องมือของคุณเอง

หากต้องการแสดงเครื่องมือจากไลบรารีหรือแอปพลิเคชัน คุณต้องรับฟังเหตุการณ์การค้นพบนี้และตอบกลับด้วย ToolGroup

window.addEventListener('devtoolstooldiscovery', (event) => {
  event.respondWith({
    name: "My Library Tools",
    description: "Tools for inspecting internal library state",
    tools: [
      {
        name: "getInternalState",
        description: "Returns the current internal state of the framework.",
        inputSchema: {
          type: "object",
          properties: {
            componentId: { type: "string" }
          }
        },
        execute: async (input) => {
          // Access your framework's internal registry
          return myFramework.getState(input.componentId);
        }
      }
    ]
  });
});

การใช้งานมีดังนี้

  1. กำหนดสคีมา: ใช้ JSON Schema เพื่อกำหนด อินพุตที่เครื่องมือคาดหวัง
  2. จัดการตรรกะ: ใช้ฟังก์ชัน execute ที่ทำงานในบริบทของหน้าและแสดงผลข้อมูลที่ทำให้เป็นอนุกรมได้
  3. องค์ประกอบ DOM: ไม่สามารถส่งออบเจ็กต์ที่ไม่ทำให้เป็นอนุกรมได้ระหว่างหน้ากับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent องค์ประกอบ DOM เป็นข้อยกเว้น เมื่อเครื่องมือแสดงผลองค์ประกอบ DOM เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent จะจับคู่องค์ประกอบเหล่านั้นกับ UID เดียวกันที่เครื่องมือ take_snapshot ใช้โดยอัตโนมัติ ซึ่งจะช่วยให้ Agent โต้ตอบกับองค์ประกอบทั้งหมดของหน้า (ไม่ว่าจะมาจากเฟรมเวิร์กหรือจากสแนปชอตของหน้า) ได้ในลักษณะเดียวกัน

โต้ตอบกับเครื่องมือโดยใช้ MCP

เมื่อลงทะเบียนเครื่องมือแล้ว Agent การเขียนโค้ดจะโต้ตอบกับเครื่องมือเหล่านั้นผ่านเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent ได้ เครื่องมือ MCP list_3p_developer_tools จะแสดงคำอธิบายของเครื่องมือของบุคคลที่สามที่พร้อมใช้งานในหน้า นอกจากนี้ เมื่อมีการเปลี่ยนหน้าเว็บที่เลือก (เช่น หลังจากนำทาง) เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะเพิ่มรายการเครื่องมือที่พร้อมใช้งานลงในคำตอบของเครื่องมือ MCP

หากต้องการใช้เครื่องมือเหล่านี้ Agent จะเรียกใช้ execute_3p_developer_tool เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะตรวจสอบพารามิเตอร์อินพุตโดยอัตโนมัติเพื่อให้ตรงกับคำจำกัดความของเครื่องมือ

นอกจากนี้ คุณยังเรียกใช้เครื่องมือได้โดยใช้เครื่องมือ MCP evaluate_script Agent จะระบุข้อมูลโค้ด JavaScript ที่เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะดำเนินการในหน้า ข้อมูลโค้ดนี้สามารถเรียกใช้เครื่องมือสำหรับนักพัฒนาเว็บของบุคคลที่สามและใช้เอาต์พุตของเครื่องมือเหล่านั้นในการคำนวณเพิ่มเติมได้ทันที

การใช้ evaluate_script มีประสิทธิภาพสำหรับการดีบักที่ซับซ้อน เนื่องจากช่วยให้ Agent ทำสิ่งต่อไปนี้ได้

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

ความสำเร็จเบื้องต้น: การผสานรวม Angular

เราได้ร่วมงานกับทีม Angular ซึ่งได้ใช้เครื่องมือสำหรับนักพัฒนาเว็บของบุคคลที่สาม 2 รายการ

  1. เครื่องมือ Signal Graph: ช่วยให้ Agent เห็นภาพความสัมพันธ์ระหว่างสถานะกับมุมมอง ซึ่งช่วยให้ Agent ระบุการขึ้นต่อกันที่ทำให้เกิดลูปไม่สิ้นสุดหรือการอัปเดตล้มเหลวได้
  2. เครื่องมือ Dependency Injection (DI) Graph: แสดงตัวฉีดองค์ประกอบ ซึ่งช่วยให้ Agent เห็นได้อย่างชัดเจนว่ามีการระบุบริการไว้ที่ใดหรือไม่มีบริการที่ใด เนื่องจากกราฟ DI ของ Angular เป็นโครงสร้างที่สร้างขึ้นในขณะรันไทม์เท่านั้น การวิเคราะห์แบบคงที่เพียงอย่างเดียวจึงไม่สามารถดีบักข้อผิดพลาดของผู้ให้บริการได้
วิดีโอหน้าจอแสดง AI Agent ที่ใช้เครื่องมือ Angular Signal Graph เพื่อดีบักลูปแบบรีแอกทีฟ

ทีม React ได้เริ่ม ทดลองใช้เครื่องมือสำหรับนักพัฒนาเว็บของบุคคลที่สาม แล้วเช่นกัน

ร่วมสร้างอนาคตของการดีบักแบบ Agentic กับเรา

ฟีเจอร์ทดลองนี้พร้อมใช้งานในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent ตั้งแต่เวอร์ชัน 0.25.0 เป็นต้นไป หากต้องการเปิดใช้ ให้ใช้แฟล็กบรรทัดคำสั่ง --categoryExperimentalThirdParty

หากคุณดูแลเฟรมเวิร์ก ไลบรารี หรือเครื่องมือ และต้องการปรับปรุงประสบการณ์การดีบักสำหรับ Agent การเขียนโค้ด เรายินดีที่จะร่วมงานกับคุณ

เข้าร่วมกับเราเพื่อสร้างอนาคตของการพัฒนาเว็บแบบ Agentic ไปด้วยกัน