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

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

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

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

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

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

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

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

หมายเหตุ: เมื่อเปิดความช่วยเหลือจาก AI ด้วยวิธีต่อไปนี้ โปรดเลือกบริบทการสนทนาตามที่ ระบุไว้ข้างต้น

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

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

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

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

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

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

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

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

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

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

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

ความช่วยเหลือจาก AI สำหรับการจัดรูปแบบ

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

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

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

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

หรือคลิกปุ่มลอยที่แนบมากับโหนด DOM ที่วางเมาส์

บริบทของการสนทนา

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

เปลี่ยนบริบทโดยใช้เครื่องมือเลือกองค์ประกอบข้างองค์ประกอบปัจจุบัน หรือโดยเลือกจากแผนผัง DOM ของแผงองค์ประกอบ

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

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

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

ความช่วยเหลือจาก AI สำหรับเครือข่าย

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

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

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

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

หรือคลิกปุ่มลอยข้างคำขอเครือข่ายที่คุณวางเมาส์

บริบทของการสนทนา

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

เปลี่ยนบริบทโดยคลิกคำขออื่นในแผงเครือข่าย

ความช่วยเหลือจาก AI ใช้ URL ของคำขอ ส่วนหัว เวลา และห่วงโซ่ผู้เริ่มคำขอเพื่อตอบคำถามของคุณ

สำคัญ: ระบบจะปกปิดส่วนหัวที่อาจมีข้อมูลที่ละเอียดอ่อนโดยอัตโนมัติ

คลิกปุ่ม ขยาย ในชิปAnalyzing network dataหลังจากเริ่มการสนทนาเพื่อดูข้อมูลดิบ ที่ความช่วยเหลือจาก AI ใช้

ความช่วยเหลือจาก AI เพื่อประสิทธิภาพ

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

เปิดความช่วยเหลือจาก AI จากแผงประสิทธิภาพ

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

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

ข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ

ในแท็บข้อมูลเชิงลึก ให้เปิดข้อมูลเชิงลึก เช่น **LCP ตามเฟส แล้วคลิกปุ่มถาม AI**

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

มุมมองการติดตามประสิทธิภาพ

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

ในกรณีนี้ ระบบจะเลือกกิจกรรมนี้ไว้ล่วงหน้าเป็นบริบทของ การสนทนา

บริบทของการสนทนา

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

ข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ

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

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

มุมมองการติดตาม

คุณเลือกรายการต่างๆ ในการติดตามประสิทธิภาพได้ และบริบทจะ เปลี่ยนไปตามนั้น

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

คลิกปุ่ม ในชิป Analyzing call tree หลังจากเริ่มการสนทนาเพื่อดู ข้อมูลดิบที่ความช่วยเหลือจาก AI ใช้

ความช่วยเหลือจาก AI สำหรับแหล่งข้อมูล

ใช้แผงความช่วยเหลือจาก AI สำหรับแหล่งที่มาเพื่อทำความเข้าใจไฟล์ที่เว็บไซต์โหลดและใช้

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

หากต้องการเปิดความช่วยเหลือจาก AI จากแผงแหล่งข้อมูล ให้คลิกขวาที่ไฟล์ แล้วเลือกตัวเลือกถาม AI

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

หรือคลิกปุ่มลอยเมื่อวางเมาส์เหนือไฟล์

บริบทของการสนทนา

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

เปลี่ยนบริบทโดยคลิกไฟล์อื่นในแผงแหล่งที่มา

ความช่วยเหลือจาก AI จะใช้ชื่อ URL แหล่งที่มาของแผนที่ (หากมี) และเนื้อหาของไฟล์ที่เลือกเพื่อตอบคำถามของคุณ

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

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

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

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

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

คลิกพรอมต์ที่แนะนำเพื่อสนทนาต่อ คลิก

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เริ่มใหม่

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

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

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

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

ลบ

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

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

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

โหวตคำตอบ

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

รายงานคำตอบ

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