มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ Chrome 140

Sofia Emelianova
Sofia Emelianova
GitHub

แก้ไขข้อบกพร่องของข้อมูลเชิงลึกเพิ่มเติมด้วย Gemini

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

  • ปรับปรุงการนำส่งรูปภาพ
  • JavaScript เดิม
  • JavaScript ที่ซ้ำกัน
  • HTTP ที่ทันสมัย

ก่อนและหลังการเพิ่มปุ่ม "แก้ไขข้อบกพร่องด้วย AI" ลงในข้อมูลเชิงลึกด้านประสิทธิภาพเพิ่มเติม

จำลองส่วนหัว "Save-Data" ใน "เงื่อนไขของเครือข่าย"

ตอนนี้คุณสามารถจำลองลักษณะการทำงานของSave-Dataส่วนหัวของคำขอได้แล้วในแผงเงื่อนไขเครือข่าย ส่วนหัวนี้เป็นคำแนะนำไคลเอ็นต์เครือข่ายซึ่งบ่งบอกค่ากำหนดของไคลเอ็นต์สำหรับการลดการใช้ข้อมูล นอกจากนี้ คุณยังดูได้ผ่าน navigator.connection.saveData API ด้วย

ก่อนและหลังเพิ่มการจำลองส่วนหัวของคำขอ "Save-Data" ลงใน "สภาพเครือข่าย"

ปัญหาใน Chromium: 40668980

ดูสถานะบรรทัดฐานในเคล็ดลับเครื่องมือของพร็อพเพอร์ตี้ CSS

ในองค์ประกอบ > รูปแบบ เมื่อวางเมาส์เหนือพร็อพเพอร์ตี้ CSS ใดก็ตาม คุณจะเห็นความพร้อมใช้งานของพร็อพเพอร์ตี้นั้นในเบราว์เซอร์หลักๆ ตามสถานะพื้นฐานของพร็อพเพอร์ตี้นั้นในส่วนคำจำกัดความของพร็อพเพอร์ตี้นั้น

ก่อนและหลังเพิ่มสถานะพื้นฐานลงในเคล็ดลับเครื่องมือของพร็อพเพอร์ตี้ CSS

ปัญหาใน Chromium: 417749762

ลบล้างรูปแบบในคำแนะนำสำหรับไคลเอ็นต์ User Agent

ในเมนูแบบเลื่อนลงเงื่อนไขของเครือข่าย > คำแนะนำสำหรับไคลเอ็นต์ User Agent คุณจะมีตัวเลือกในการลบล้างรูปแบบอุปกรณ์ ซึ่งก็คือค่าของส่วนหัวของคำขอ Sec-CH-UA-Form-Factors

ก่อนและหลังเพิ่มตัวเลือกสำหรับการลบล้างรูปแบบอุปกรณ์ไปยังคำแนะนำของไคลเอ็นต์ User Agent

ปัญหาใน Chromium: 422218341

Lighthouse 12.8.0

ตอนนี้แผง Lighthouse ทำงานด้วย Lighthouse 12.8.0

ในเวอร์ชันนี้ Lighthouse ได้เพิ่มรายงานใหม่ที่สำคัญที่สุดคือ "ลดความเสี่ยงของ XSS ที่อิงตาม DOM ด้วย Trusted Types"

ดูรายการการเปลี่ยนแปลงทั้งหมดด้วย

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

ปัญหาใน Chromium: 40543651

ไฮไลต์อื่นๆ

การแก้ไขและการปรับปรุงที่สำคัญบางส่วนในรุ่นนี้มีดังนี้

  • ความช่วยเหลือจาก AI:
    • ตอนนี้ระบบจะล้างประวัติการแชทเมื่อคุณปิดใช้ฟีเจอร์ AI ที่เกี่ยวข้องในการตั้งค่า
    • การช่วยเหลือพิเศษ: ตอนนี้โปรแกรมอ่านหน้าจอจะประกาศชื่อบริบทตั้งแต่เนิ่นๆ ว่า "กำลังโหลดคำตอบ" เมื่อคำตอบเริ่มสตรีม และ "คำตอบพร้อมแล้ว" เมื่อคำตอบเสร็จสมบูรณ์
  • องค์ประกอบ:
    • ตอนนี้แท็บรูปแบบสามารถประเมินฟังก์ชัน CSS sibling-index(), sibling-count() และ env() ได้แล้ว (crbug.com/417128001, crbug.com/40196710)
    • เพิ่มการรองรับองค์ประกอบเสมือน ::view-transition-group-children (crbug.com/425901164)
    • เพิ่มการรองรับปัญหาด้านการช่วยเหลือพิเศษเกี่ยวกับเนื้อหาแบบอินเทอร์แอกทีฟในองค์ประกอบ <summary> (crbug.com/427172874)
    • ตอนนี้คุณสามารถไปที่พร็อพเพอร์ตี้แบบยาวในรูปแบบได้จากแท็บที่คำนวณ (crbug.com/41486012)
    • เอดิเตอร์การชะลอความเร็วและสี: ตอนนี้คุณโต้ตอบกับตัวอย่างสีเบซิเยร์สำหรับการเปลี่ยนภาพเคลื่อนไหวและตัวอย่างสีโดยใช้แป้นพิมพ์ได้แล้ว (crbug.com/401213421)
  • เครือข่าย: ตอนนี้นำเข้าไฟล์ HAR จะรวมคุกกี้คำขอและการตอบกลับด้วย (crbug.com/432995868)
  • โหมดอุปกรณ์: อัปเดต User Agent สำหรับอุปกรณ์ Apple เป็น Safari 18.5 ล่าสุด

ดาวน์โหลดช่องตัวอย่าง

ลองใช้ Chrome Canary, Dev หรือ Beta เป็นเบราว์เซอร์เริ่มต้นสำหรับการพัฒนา ช่องตัวอย่างเหล่านี้ช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของ DevTools ทดสอบ API ของแพลตฟอร์มเว็บที่ล้ำสมัย และช่วยคุณค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะพบ

ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

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

มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ

รายการทุกอย่างที่ครอบคลุมในซีรีส์มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ