DevTools มีแผงความช่วยเหลือจาก AI ที่ช่วยให้คุณเข้าใจเว็บไซต์และแก้ไขปัญหาได้โดยการแชทกับเอเจนต์ AI
ความช่วยเหลือจาก AI ช่วยให้คุณแก้ไขข้อบกพร่องของการจัดรูปแบบ เครือข่าย ประสิทธิภาพ และแหล่งที่มาของเว็บไซต์ได้
หากต้องการแชทกับ Gemini ในแผงความช่วยเหลือจาก 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 ของแผงองค์ประกอบ
เมื่อเลือกบริบทแล้ว คุณจะถ่ายภาพหน้าจอของวิวพอร์ตและส่งไปยังแชทได้ คลิกปุ่ม ถ่ายภาพหน้าจอข้างช่องป้อนข้อมูลแชท
คุณสามารถใช้ภาพหน้าจอเพื่อระบุบริบทภาพเพิ่มเติมในพรอมต์ได้ เช่น เพื่อตรวจสอบว่าปุ่มที่มองเห็นทั้งหมดมีระยะห่างเท่ากันหรือไม่
แม้ว่าองค์ประกอบที่ตรวจสอบในปัจจุบันจะเป็นพื้นฐานของการสนทนา แต่ความช่วยเหลือจาก 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 อาจสร้างโค้ดที่มีผลข้างเคียง เมื่อเกิดเหตุการณ์ดังกล่าว ระบบจะหยุดการสนทนาชั่วคราวก่อนที่จะดำเนินการกับโค้ด
เมื่อการสนทนาหยุดชั่วคราว ให้ตรวจสอบโค้ดที่ตัวแทนเสนอ คลิก ดำเนินการต่อเพื่อดำเนินการต่อ หรือยกเลิกเพื่อป้องกันการดำเนินการ
บันทึกการเปลี่ยนแปลงในพื้นที่ทำงาน
โฟลเดอร์พื้นที่ทำงานที่เชื่อมต่อช่วยให้คุณบันทึกการเปลี่ยนแปลงสไตล์ที่ความช่วยเหลือจาก AI แนะนำกลับไปยังไฟล์ต้นฉบับ CSS ในคอมพิวเตอร์ได้
หากต้องการทำสิ่งต่อไปนี้
ก่อนอื่นให้สร้างไฟล์ข้อมูลเมตาและเชื่อมต่อโฟลเดอร์พื้นที่ทำงาน
หรือจะเพิ่มโฟลเดอร์ด้วยตนเองก็ได้
เริ่มแชทจากแผงองค์ประกอบ
ขอความช่วยเหลือจาก AI เพื่อแก้ไข CSS
ความช่วยเหลือจาก AI อาจสร้างโค้ดและหยุดการดำเนินการชั่วคราว ตรวจสอบโค้ดแล้วคลิกต่อไปเพื่อทดสอบการเปลี่ยนแปลงแบบเรียลไทม์
ขยายส่วนการเปลี่ยนแปลงที่ยังไม่ได้บันทึก แล้วคลิกใช้กับพื้นที่ทำงาน
ตรวจสอบการเปลี่ยนแปลงใน
diffแล้วคลิกบันทึกทั้งหมด
ดูข้อมูลเกี่ยวกับเวิร์กโฟลว์นี้ได้ที่
ไม่ได้ให้คำตอบ
ความช่วยเหลือจาก AI อาจไม่ให้คำตอบเนื่องจากสาเหตุหลายประการ
หากคิดว่าพรอมต์ของคุณเป็นสิ่งที่ความช่วยเหลือจาก AI ควรจะพูดคุยได้ ให้รายงานข้อบกพร่อง
ประวัติการสนทนา
เมื่อเริ่มการสนทนาแล้ว คำตอบถัดไปทุกคำตอบจะอิงตามการโต้ตอบก่อนหน้าระหว่างคุณกับ AI
ความช่วยเหลือจาก AI จะบันทึกประวัติการสนทนาระหว่างเซสชัน เพื่อให้คุณเข้าถึงแชทก่อนหน้าได้แม้หลังจากที่เครื่องมือสำหรับนักพัฒนาเว็บหรือ Chrome โหลดซ้ำ
ใช้ตัวควบคุมที่มุมซ้ายบนของแผงเพื่อควบคุมประวัติการสนทนา
เริ่มใหม่
หากต้องการเริ่มการสนทนาใหม่ด้วยบริบทของการสนทนาที่เลือกในปัจจุบัน ให้คลิกปุ่ม
ดำเนินการต่อ
หากต้องการสนทนาต่อจากครั้งก่อน ให้คลิกปุ่ม แล้วเลือกจากเมนูตามบริบท
ลบ
หากต้องการลบการสนทนาออกจากประวัติ ให้คลิกปุ่ม
ให้คะแนนคำตอบและแสดงความคิดเห็น
ความช่วยเหลือจาก AI เป็นฟีเจอร์เวอร์ชันทดลอง ดังนั้นเราจึงกำลังมองหาความคิดเห็นของคุณเพื่อเรียนรู้วิธีปรับปรุงคุณภาพคำตอบและประสบการณ์โดยรวม
โหวตคำตอบ
ให้คะแนนคำตอบโดยใช้ปุ่ม ชอบและ ไม่ชอบใต้คำตอบ
รายงานคำตอบ
หากต้องการรายงานเนื้อหาไม่เหมาะสม ให้คลิกปุ่มข้างปุ่มโหวต