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

Sofia Emelianova
Sofia Emelianova
GitHub

แก้ไขข้อบกพร่องของคำขอเครือข่าย ไฟล์ต้นฉบับ และการติดตามประสิทธิภาพด้วย Gemini

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

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

  • คำขอเครือข่ายในแผงเครือข่าย
  • ไฟล์ในแท็บแหล่งที่มา > หน้า
  • กิจกรรมในแทร็กประสิทธิภาพ > หลัก

ปุ่ม "ถาม AI" และตัวเลือกเมนูในเครือข่าย แหล่งที่มา และประสิทธิภาพ

Gemini จะพิจารณาบริบทของคำขอ ไฟล์ หรือกิจกรรมที่เลือก

ทีมเครื่องมือสำหรับนักพัฒนาเว็บหวังเป็นอย่างยิ่งว่าจะได้รับฟังความคิดเห็นจากคุณใน crbug.com/364805393

ประวัติการแชทกับ AI

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

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

ประวัติการแชทกับ AI ในเมนูแบบเลื่อนลงใต้ปุ่ม "ประวัติ"

จัดการพื้นที่เก็บข้อมูลส่วนขยายในแอปพลิเคชัน > พื้นที่เก็บข้อมูล

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

ก่อนและหลังเพิ่มส่วน "พื้นที่เก็บข้อมูลของส่วนขยาย" ลงในแผงแอปพลิเคชัน

ปัญหาเกี่ยวกับ Chromium: crbug.com/40963428

ปรับปรุงประสิทธิภาพ

เวอร์ชันนี้มีการปรับปรุงแผงประสิทธิภาพหลายอย่าง

ระยะการโต้ตอบในเมตริกแบบเรียลไทม์

ตอนนี้คุณขยายการโต้ตอบในเมตริกประสิทธิภาพแบบเรียลไทม์เพื่อดูรายละเอียดของแต่ละเฟสและเวลาได้แล้ว

ก่อนและหลังการเพิ่มรายละเอียดของระยะต่างๆ และเวลาที่ใช้ในการโต้ตอบ

ตามที่ได้แจ้งไว้ในส่วนขยาย Web Vitals ซึ่งตอนนี้อยู่ใน DevTools การเปิดตัวฟีเจอร์เหล่านี้ถือเป็นการสิ้นสุดการรองรับส่วนขยาย Web Vitals

ปัญหาใน Chromium: crbug.com/369097528

ข้อมูลการบล็อกการแสดงผลในแท็บสรุป

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

ก่อนและหลังเพิ่มข้อมูลการบล็อกการแสดงผลลงในแท็บสรุป

การรองรับscheduler.postTaskเหตุการณ์และลูกศรผู้เริ่มต้น

ตอนนี้แท็บประสิทธิภาพ > หลักจะแสดงเหตุการณ์ scheduler.postTask() และลูกศรผู้เริ่มต้นต่อไปนี้ระหว่างเหตุการณ์

  • Schedule postTask -> Fire postTask
  • Schedule postTask -> Abort postTask

ก่อนและหลังเพิ่มการรองรับเหตุการณ์ scheduler.postTask และลูกศรผู้เริ่มต้น

ปัญหาใน Chromium: crbug.com/40775984

การปรับปรุงแผงภาพเคลื่อนไหวและแท็บองค์ประกอบ > รูปแบบ

เวอร์ชันนี้มีการปรับปรุงแผงภาพเคลื่อนไหวและแท็บองค์ประกอบ > รูปแบบ

ตอนนี้แท็บองค์ประกอบ > รูปแบบจะแสดงไอคอนภาพเคลื่อนไหว ข้ามไปยังแผงภาพเคลื่อนไหวข้างค่าของพร็อพเพอร์ตี้ animation เพื่อให้คุณตรวจสอบภาพเคลื่อนไหวได้อย่างง่ายดาย

ภาพก่อนและหลังการเพิ่มลิงก์จากแท็บสไตล์ไปยังแผงภาพเคลื่อนไหว

การอัปเดตแบบเรียลไทม์ในแท็บ "คำนวณแล้ว"

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

จำลองแรงดันในเซ็นเซอร์

ตอนนี้แผงเซ็นเซอร์ช่วยให้คุณจำลองแรงดัน CPU Nominal, Fair, Serious และ Critical ได้แล้ว

ก่อนและหลังเพิ่มตัวเลือกการจำลองแรงดัน CPU ลงในแผงเซ็นเซอร์

ปัญหาใน Chromium: crbug.com/362277525

ออบเจ็กต์ JS ที่มีชื่อเดียวกันซึ่งจัดกลุ่มตามแหล่งที่มาในแผงหน่วยความจำ

ตอนนี้แผงหน่วยความจำจะแยกความแตกต่างระหว่างออบเจ็กต์ JS ที่มีชื่อเดียวกันซึ่งมาจากแหล่งที่มาต่างๆ และจัดกลุ่มตามนั้น

ออบเจ็กต์ JS ก่อนและหลังการจัดกลุ่มที่มีชื่อเดียวกันตามแหล่งที่มา

ปัญหาใน Chromium: crbug.com/357902505

รูปลักษณ์ใหม่ของการตั้งค่า

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

ส่วนที่แยกก่อนและหลังเป็น "การ์ด"

เลิกใช้งานแผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพแล้วและนำออกจากเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

ไฮไลต์อื่นๆ

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

  • ประสิทธิภาพ
    • นำขีดจำกัดที่ไม่จำเป็น 3 อักขระสำหรับคำค้นหาออก
    • เพิ่มปุ่ม หน้าแรกที่จะนำคุณกลับไปที่หน้าจอเมตริกแบบเรียลไทม์
    • แก้ไขแป้นพิมพ์ลัดเพื่อซูมการติดตาม Shift+S/W ที่ใช้งานไม่ได้ก่อนหน้านี้
  • องค์ประกอบ > รูปแบบ
    • เพิ่ม anchor-center ลงในการเติมข้อความอัตโนมัติ 341991541
    • แก้ไขข้อบกพร่องที่เครื่องมือแก้ไข Flexbox ไม่พร้อมใช้งานสำหรับค่า 2 คำ 341964645
  • เครือข่าย: ตอนนี้ข้อผิดพลาดในการดึงข้อมูลล่วงหน้าจะเป็นคำเตือนสีเหลืองแทนข้อผิดพลาดสีแดงเพื่อระบุว่าการแสดงเนื้อหาไม่ได้รับผลกระทบ 372055494

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

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

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

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

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

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