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

อ่านเอกสาร

… สำหรับการจัดแต่งทรงผม

ดูคำอธิบายโดยละเอียดเกี่ยวกับเลย์เอาต์ขององค์ประกอบและวิธีแก้ไขด้วยพรอมต์ เช่น

How is this element laid out?

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

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

Why is my animation not working?

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

DEMO

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

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

สำรวจเดโม

… สำหรับเครือข่าย

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

Does this request have any notable headers?

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

Why is this request taking so long?

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

… เพื่อประสิทธิภาพ

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

Anything to improve in this call tree?

… สำหรับแหล่งที่มา

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

What is this file used for?

ไม่ว่าจะสคริปต์ข้อมูลวิเคราะห์ วิดเจ็ตโซเชียล หรือไลบรารีการทดสอบ A/B ความช่วยเหลือจาก AI จะเจาะลึกและค้นหาคำตอบ