แชทด้วยความช่วยเหลือจาก AI

Matthias Rohmer

Sofia Emelianova

DevTools มีแผงความช่วยเหลือจาก AI ที่ช่วยให้คุณเข้าใจเว็บไซต์และแก้ไขปัญหาได้โดยการแชทกับ AI Agent ในตัว

แผงความช่วยเหลือจาก AI ทำงานด้วยระบบ Gemini และทำสิ่งต่อไปนี้

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

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

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

หากต้องการแชทกับ Gemini ในแผงความช่วยเหลือจาก AI อย่างมีประสิทธิภาพ ให้ดูวิธีเปิดแผง พรอมต์ และควบคุมลำดับการสนทนา

เปิดแผงความช่วยเหลือจาก AI

แผงความช่วยเหลือจาก AI จะเปิดในลิ้นชักโดยค่าเริ่มต้น

หากต้องการเปิดแผง ให้คลิกปุ่มความช่วยเหลือจาก AI ที่จุดแรกเข้าส่วนกลางทางด้านขวาของแถบเครื่องมือหลักที่ด้านบน

จากแผง

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

• คลิกปุ่ม แก้ไขข้อบกพร่องด้วย AI ข้างองค์ประกอบ คำขอเครือข่าย ไฟล์ต้นฉบับ หรือข้อมูลเชิงลึกด้านประสิทธิภาพที่ขยายแล้ว

  

• คลิกขวาที่องค์ประกอบ คำขอ ไฟล์ หรือรายการการติดตาม แล้วเลือกตัวเลือกพรอมต์ทั่วไปรายการใดรายการหนึ่งจากเมนูบริบทแก้ไขข้อบกพร่องด้วย AI

  

จากเมนูคำสั่ง

หากต้องการเปิดความช่วยเหลือจาก AI จากเมนูคำสั่ง ให้พิมพ์ AI แล้วเรียกใช้คำสั่งแสดงความช่วยเหลือจาก AI ซึ่งมีป้ายลิ้นชักอยู่ข้างๆ

จากเมนู "เครื่องมือเพิ่มเติม"

หรือที่มุมขวาบน ให้เลือกการตั้งค่า ตัวเลือกเพิ่มเติม > เครื่องมือเพิ่มเติม > ความช่วยเหลือจาก AI

การเขียนพรอมต์

เมื่อเริ่มการสนทนาใหม่ ความช่วยเหลือจาก AI จะแสดงพรอมต์ตัวอย่างเพื่อช่วยให้คุณเริ่มต้นได้อย่างรวดเร็ว

คลิกพรอมต์ใดก็ได้เพื่อป้อนข้อมูลล่วงหน้าในช่องป้อนพรอมต์ที่ด้านล่างของแผง

หรือจะพิมพ์พรอมต์หรือคำถามของคุณเองลงในช่องป้อนข้อมูลก็ได้

หากต้องการส่งพรอมต์ ให้กด Enter หรือคลิกลูกศรทางด้านขวาของช่องป้อนข้อมูล

พรอมต์ปลายเปิดที่ไม่มีบริบท

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

• How to use DevTools to debug accessibility?

  ความช่วยเหลือจาก AI จะเรียกใช้การตรวจสอบ Lighthouse เพื่อการช่วยเหลือพิเศษก่อนเพื่อตอบพรอมต์ของคุณได้ดียิ่งขึ้น

• What are the slowest network requests on this page?

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

• What performance issues exist on the page?

  ความช่วยเหลือจาก AI จะบันทึกการติดตามประสิทธิภาพโดยอัตโนมัติด้วยการตั้งค่าที่คุณเลือกเพื่อตอบพรอมต์นี้

• พรอมต์ เช่น How do I use the Animation panel? หรือ Where is the high contrast setting in DevTools? จะให้ความช่วยเหลือโดยตรงเกี่ยวกับ DevTools เอง

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

พรอมต์ที่มีบริบท

เมื่อเปิดความช่วยเหลือจาก AI จากแผง ระบบจะเลือกบริบทการสนทนาที่เกี่ยวข้องในช่องแชท เพื่อให้คุณแชทเกี่ยวกับสิ่งที่เลือกได้โดยเฉพาะ

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

นอกจากนี้ คุณยังคัดลอกบางส่วนของไฟล์จากแผงแหล่งที่มา แล้ววางลงในแชทเพื่อถามว่าส่วนนั้นทำอะไรได้ด้วย

จากนั้นดูข้อมูลเพิ่มเติมเกี่ยวกับลำดับการสนทนาในความช่วยเหลือจาก AI

ลำดับการสนทนา

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

ความคืบหน้าของ Agent จะแสดงเป็นขั้นตอน สถานะเริ่มต้นของขั้นตอนคือ Investigating…

ป้ายกำกับขั้นตอนเริ่มต้นจะอัปเดตเมื่อเอเจนต์ดำเนินการที่เฉพาะเจาะจงมากขึ้นเพื่อตอบพรอมต์ของคุณ

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

คำแนะนำแบบทีละขั้นของ Agent

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

ขั้นตอนมีดังนี้

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

วิดเจ็ตมีปุ่มเปิดเผยที่มุมขวาบนซึ่งจะนำคุณไปยังส่วนที่เกี่ยวข้องของเครื่องมือสำหรับนักพัฒนาเว็บ

พรอมต์ต่อเนื่อง

เมื่อตัวแทนให้คำตอบสุดท้ายแล้ว อาจแนะนำพรอมต์ติดตามผล คลิกข้อความใดก็ได้เพื่อสนทนาต่อ

สร้างพรอมต์สำหรับ Agent การเขียนโค้ด

หากต้องการสร้างพรอมต์สำหรับ Agent การเขียนโค้ดของคุณ ให้คลิกคัดลอกไปยัง Agent การเขียนโค้ด

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

การสนทนาที่หยุดชั่วคราว

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

เมื่อการสนทนาหยุดชั่วคราว ให้ตรวจสอบโค้ดที่ตัวแทนเสนอ คลิก play_arrow ดำเนินการต่อเพื่อดำเนินการต่อ หรือยกเลิกเพื่อป้องกันการดำเนินการ

หมายเหตุ: ขณะที่หยุดการสนทนาชั่วคราว ระบบจะปิดใช้การป้อนพรอมต์

คุณตรวจสอบการเปลี่ยนแปลงโค้ดที่แนะนำได้ในแผงการเปลี่ยนแปลง

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

บันทึกการเปลี่ยนแปลงในพื้นที่ทำงาน

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

หากต้องการทำสิ่งต่อไปนี้

1. ก่อนอื่นให้สร้างไฟล์ข้อมูลเมตาและเชื่อมต่อโฟลเดอร์พื้นที่ทำงาน

   หรือจะเพิ่มโฟลเดอร์ด้วยตนเองก็ได้

2. เริ่มแชทจากแผงองค์ประกอบ

3. ขอความช่วยเหลือจาก AI เพื่อแก้ไข CSS

4. ความช่วยเหลือจาก AI อาจสร้างโค้ดและหยุดการดำเนินการชั่วคราว ตรวจสอบโค้ดแล้วคลิกต่อไปเพื่อทดสอบการเปลี่ยนแปลงแบบเรียลไทม์

5. ขยายส่วนการเปลี่ยนแปลงที่ยังไม่ได้บันทึก แล้วคลิกใช้กับพื้นที่ทำงาน

   หมายเหตุ: หากคุณไม่มีโฟลเดอร์พื้นที่ทำงานที่เชื่อมต่อไว้ ในขั้นตอนนี้แผงความช่วยเหลือจาก AI จะขอให้คุณเพิ่มโฟลเดอร์ด้วยตนเอง

6. ตรวจสอบการเปลี่ยนแปลงใน diff แล้วคลิกบันทึกทั้งหมด

ดูข้อมูลเกี่ยวกับเวิร์กโฟลว์นี้ได้ที่

ไม่ได้ให้คำตอบ

ความช่วยเหลือจาก AI อาจไม่ให้คำตอบเนื่องจากสาเหตุหลายประการ

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

ประวัติการสนทนา

เมื่อเริ่มการสนทนาแล้ว คำตอบถัดไปทุกคำตอบจะอิงตามการโต้ตอบก่อนหน้าระหว่างคุณกับ AI

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

ใช้ตัวควบคุมที่มุมซ้ายบนของแผงเพื่อควบคุมประวัติการสนทนา

เริ่มใหม่

หากต้องการเริ่มการสนทนาใหม่ด้วยบริบทการสนทนาที่เลือกในปัจจุบัน ให้คลิกปุ่มเพิ่ม

ดำเนินการต่อ

หากต้องการสนทนาต่อจากครั้งก่อน ให้คลิกปุ่มประวัติ แล้วเลือกจากเมนูตามบริบท

หมายเหตุ: บริบทการสนทนาจะไม่ได้รับการอัปเดตโดยอัตโนมัติเนื่องจากอาจหายไปแล้วนับตั้งแต่การสนทนาหยุดลง

ลบ

หากต้องการลบการสนทนาออกจากประวัติ ให้คลิกปุ่มลบ

ให้คะแนนคำตอบและแสดงความคิดเห็น

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

โหวตคำตอบ

ให้คะแนนคำตอบโดยใช้ปุ่มthumb_up ชอบและ thumb_down ไม่ชอบใต้คำตอบ

รายงานคำตอบ

หากต้องการรายงานเนื้อหาไม่เหมาะสม ให้คลิกปุ่มรายงานข้างปุ่มโหวต