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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ปัญหา Chromium: crbug.com/40963428

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

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

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

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

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

ตามที่ได้แจ้งไว้ในส่วนขยาย Web Vitals อยู่ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์แล้ว การเปิดตัวฟีเจอร์เหล่านี้ถือเป็นการสิ้นสุดการรองรับส่วนขยาย 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 อักขระสำหรับคำค้นหาออก
    • เพิ่มปุ่ม Home ที่นําคุณกลับไปยังหน้าจอเมตริกแบบเรียลไทม์
    • แก้ไขแป้นพิมพ์ลัดการซูมการติดตาม Shift+S/W ที่ใช้งานไม่ได้ก่อนหน้านี้
  • องค์ประกอบ > สไตล์
    • เพิ่ม anchor-center ในการเติมข้อความอัตโนมัติ 341991541
    • แก้ไขข้อบกพร่องเกี่ยวกับเครื่องมือแก้ไข Flexbox ที่ไม่พร้อมใช้งานสำหรับค่าแบบ 2 คำ 341964645
  • เครือข่าย: ตอนนี้ความล้มเหลวในการดึงข้อมูลล่วงหน้าจะเปลี่ยนเป็นคำเตือนสีเหลืองแทนข้อผิดพลาดสีแดงเพื่อระบุว่าการแสดงเนื้อหาไม่ได้รับผลกระทบ 372055494

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

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

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

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

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

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools