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

Wolfgang Beyer
Wolfgang Beyer
X GitHub

เผยแพร่: 18 มิถุนายน 2026

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

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

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

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

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

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

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

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

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

หากต้องการแสดงเครื่องมือจากคลังหรือแอปพลิเคชัน คุณต้องรอรับเหตุการณ์การค้นพบนี้ และตอบกลับด้วย 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: ส่งออบเจ็กต์ที่ทำการซีเรียลไลซ์ไม่ได้ระหว่างหน้าเว็บกับ DevTools สำหรับ Agent ไม่ได้ ยกเว้นองค์ประกอบ DOM เมื่อเครื่องมือ แสดงผลองค์ประกอบ DOM เครื่องมือสำหรับนักพัฒนาเว็บของเอเจนต์จะจับคู่องค์ประกอบเหล่านั้นกับ UID เดียวกันที่ใช้โดยเครื่องมือ take_snapshot โดยอัตโนมัติ ซึ่งจะช่วยให้ตัวแทนโต้ตอบกับองค์ประกอบทั้งหมดของหน้าเว็บ (ไม่ว่าจะมาจากเฟรมเวิร์กหรือมาจากสแนปชอตของหน้าเว็บ) ได้ในลักษณะเดียวกัน

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

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

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

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

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

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

ความสำเร็จในช่วงแรก: การผสานรวม Angular

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

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

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

ร่วมสร้างอนาคตของการแก้ไขข้อบกพร่องแบบเอเจนต์กับเรา

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

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

มาร่วมกันสร้างอนาคตของการพัฒนาเว็บแบบเอเจนต์กัน