ความช่วยเหลือจาก AI
เพิ่มประสิทธิภาพเวิร์กโฟลว์การพัฒนาด้วย Gemini ที่ผสานรวมกับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome โดยตรง ปรับปรุงการแก้ไขข้อบกพร่องให้มีประสิทธิภาพมากขึ้นด้วยความช่วยเหลือจาก AI สําหรับการจัดรูปแบบ ประสิทธิภาพ เครือข่าย และแหล่งที่มา
เรียกใช้พรอมต์แรก
สัมผัสประสบการณ์การใช้งาน Gemini ใน Chrome DevTools โดยเรียกใช้พรอมต์ตัวอย่างในบทแนะนำแบบอินเทอร์แอกทีฟด้านล่าง
AI สามารถช่วยคุณในเรื่องใดได้บ้าง
แก้ไขข้อบกพร่องเกี่ยวกับการจัดสไตล์
ปัญหาการจัดสไตล์อาจแก้ไขได้ยาก ดูคำอธิบายโดยละเอียดเกี่ยวกับสไตล์ขององค์ประกอบและรับความช่วยเหลือในการแก้ไขข้อบกพร่องด้านเลย์เอาต์และการจัดรูปแบบ
Can you center this element?
วิเคราะห์คําขอเครือข่าย
ส่วนหัวคำขอและการตอบกลับมักมีข้อมูลสำคัญซึ่งไม่ชัดเจนในทันที ใช้ความช่วยเหลือจาก AI เพื่อเจาะลึกข้อมูลต่อไปนี้
Why does this request fail?
ทําความเข้าใจไฟล์ต้นฉบับ
คุณเขียนโค้ดทั้งหมดในเว็บไซต์เองได้น้อยมาก และไม่แน่ใจว่าสคริปต์บางรายการมีไว้เพื่ออะไร ความช่วยเหลือจาก AI ช่วยในเรื่องต่อไปนี้ได้
What is this file used for?
ตรวจสอบประสิทธิภาพของหน้าเว็บ
Core Web Vitals ไม่ดี การค้นหาสาเหตุของปัญหาเว็บไซต์ที่ทำงานช้าอาจเป็นเรื่องยาก ความช่วยเหลือจาก AI สามารถตรวจสอบและเสนอวิธีแก้ปัญหาให้คุณได้ ดังนี้
Help me optimize my LCP score
ดูการทำงานของความช่วยเหลือจาก AI
โรงเก็บเครื่องบิน
รายการเพิ่มเติม
หากไม่แน่ใจว่าจะเริ่มต้นอย่างไร
แก้ไขสัดส่วนภาพของรูปภาพ
Make all teaser images always be 16:9
รูปภาพรูปหนึ่งไม่ได้ครอบตัดในลักษณะเดียวกับรูปภาพอื่นๆ
- เปิดหน้า chrome.dev/cinemai/devtools/ แล้วเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- ค้นหาและเลือกส่วนดูข้อมูลเพิ่มเติม
- คลิกไอคอนความช่วยเหลือจาก AI
- พรอมต์:
Make all teaser images always be 16:9 - คลิก
Apply the suggested changeแล้วดำเนินการต่อ - ปุ่มควรอยู่กึ่งกลาง
แก้ปัญหาการล้น
How can I make this element visible?
หากไม่เห็นองค์ประกอบ
- เปิดหน้า chrome.dev/cinemai/devtools/ แล้วเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- ค้นหาองค์ประกอบ img นักดำน้ำ
- คลิกไอคอนความช่วยเหลือจาก AI
- พรอมต์:
How can I make this element visible without scrollbars? - คลิก
Apply the suggested changeแล้วดำเนินการต่อ - นักดำน้ำควรปรากฏบนหน้าจอ
ทําความเข้าใจส่วนหัว
Are there any security headers present?
ดูข้อมูลเพิ่มเติมเกี่ยวกับส่วนหัวการรักษาความปลอดภัยของทรัพยากรหนึ่งๆ
- เปิดหน้า chrome.dev/cinemai/devtools/ แล้วเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- ในแผงเครือข่าย ให้เลือกคำขอ
v4-chrome.dev.js - คลิกไอคอนความช่วยเหลือจาก AI
- พรอมต์:
Are there any security headers present? - LLM จะอธิบายส่วนหัวที่เกี่ยวข้องกับความปลอดภัยในทรัพยากร
สร้างรายงานข้อบกพร่อง
Write a detailed bug report for this network error, include title, summary, steps to reproduce and expected vs. actual results.
เกิดข้อผิดพลาดใช่ไหม สร้างรายงานข้อบกพร่องแบบละเอียดได้อย่างรวดเร็ว
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บสำหรับหน้าเว็บที่มีข้อผิดพลาดเกี่ยวกับเครือข่าย
- ในแผงเครือข่าย ให้เลือกคำขอที่ไม่สำเร็จ
- คลิกไอคอนความช่วยเหลือจาก AI
- พรอมต์:
Write a detailed bug report for this network error, include title, summary, steps to reproduce and expected vs. actual results. - LLM จะสร้างรายงานข้อบกพร่องที่คุณคัดลอกลงในเครื่องมือติดตามปัญหาได้โดยตรง
ข้อมูลเจาะลึก
การแก้ไขข้อบกพร่องโดยใช้ AI - เคล็ดลับสำหรับนักพัฒนาเครื่องมือ
มีอะไรใหม่ใน DevTools 130-132
เริ่มใช้งาน
ข้อกำหนด
เลือกเข้าร่วม
ข้อมูล
ช่วยเราปรับปรุงให้ดียิ่งขึ้น
ฟีเจอร์นี้อยู่ในขั้นทดลองและอาจมีการเปลี่ยนแปลงในอนาคต เพราะอาจสร้างข้อมูลที่ไม่ถูกต้องหรือไม่เหมาะสม ซึ่งไม่ได้แสดงถึงมุมมองของ Google โปรดโหวตคำตอบเพื่อช่วยเราปรับปรุงและส่งความคิดเห็นเข้ามาเรื่อยๆ