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

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

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

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

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

จากแผงองค์ประกอบ

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

เมนูตามบริบทขององค์ประกอบที่มี "ถาม AI" ไฮไลต์อยู่

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

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

ปุ่มลอยที่แนบกับโหนด DOM

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

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

เมนูคำสั่งที่เปิดอยู่โดยไฮไลต์ "แสดงความช่วยเหลือจาก AI"

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

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

เมนูเครื่องมือเพิ่มเติมที่เปิดอยู่

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

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

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

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

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

"ปุ่มถ่ายภาพหน้าจอ" และภาพหน้าจอที่แนบในช่องป้อนข้อมูล

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

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

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

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

แผงความช่วยเหลือจาก AI ที่มีการไฮไลต์พรอมต์ตัวอย่าง

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

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

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

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

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

แผงความช่วยเหลือจาก AI หลังจากเริ่มการสนทนา

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

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

แผงความช่วยเหลือจาก AI พร้อมคำตอบที่ AI ให้

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

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

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

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

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

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

แผงความช่วยเหลือจาก AI ที่มีการสนทนาที่หยุดชั่วคราว

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

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

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

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

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

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

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

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

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

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

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

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

ไม่มีคำตอบ

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

แผงความช่วยเหลือจาก AI พร้อมการสนทนาที่ถูกปฏิเสธ

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

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

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

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

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

แผงความช่วยเหลือจาก AI ที่มีการควบคุมประวัติที่ไฮไลต์

เริ่มใหม่

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

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

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

ลบ

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

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

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

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

โหวตคำตอบ

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

รายงานคำตอบ

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