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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

ย้ายและซ่อนแทร็กด้วยโหมดการกำหนดค่าแทร็กที่อัปเดตแล้ว

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

ก่อนและหลังการแทนที่ปุ่มแก้ไขด้วยตัวเลือกเมนู

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

ปัญหาของ Chromium: 336266699

ละเว้นสคริปต์ในแผนภูมิ Flame

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

ตัวเลือกเมนูสำหรับเพิ่มสคริปต์ลงในรายการละเว้น สคริปต์ที่ทำเครื่องหมายว่าละเว้น และกฎที่เกี่ยวข้องในการตั้งค่า

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

ปัญหา Chromium: 336266714

ลดการทำงานของ CPU ลง 20 ครั้ง

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

ภาพก่อนและหลังการเพิ่มตัวเลือก "20xอ้างถึงช้า" ใน "การตั้งค่าการจับภาพ"

ปัญหาเกี่ยวกับ Chromium: 324978881

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

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

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

ดูข้อมูลเพิ่มเติมได้ที่เครื่องมือด้านประสิทธิภาพในปี 2024 และปีต่อๆ ไป

หากมีความคิดเห็นว่าสิ่งใดใช้ได้ผลหรือไม่ได้ผล และคุณคิดว่าควรปรับปรุงให้ดีขึ้น เราอยากฟังความคิดเห็นจากคุณ

ค้นหาการใช้งานหน่วยความจำที่มากเกินไปด้วยตัวกรองใหม่ในฮีพสแนปชอต

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

ตัวเลือกก่อนและหลังการเพิ่มตัวกรองสำหรับกรณีทั่วไปที่ใช้หน่วยความจำอย่างไม่มีประสิทธิภาพ

ปัญหาเกี่ยวกับ Chromium: 337094903

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

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

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

ปัญหาเกี่ยวกับ Chromium: 338094915

ปิดใช้คำเตือน XSS ด้วยตนเองด้วยการแฟล็กบรรทัดคำสั่ง

หากคุณใช้ Chrome แบบอัตโนมัติหรือเปิดเครื่องมือสำหรับนักพัฒนาเว็บจากบรรทัดคำสั่งเพื่อแก้ไขข้อบกพร่อง บ่อยครั้งจะต้องปิดใช้คำเตือน XSS ด้วยตนเองที่ปรากฏในเซสชันเครื่องมือสำหรับนักพัฒนาเว็บทุกเซสชันใหม่

กล่องโต้ตอบคำเตือน Xss ของตนเองในคอนโซล

ตอนนี้คุณปิดใช้กล่องโต้ตอบนี้ได้โดยส่งแฟล็กบรรทัดคำสั่ง --unsafely-disable-devtools-self-xss-warnings ไปยัง Chrome

ปัญหาเกี่ยวกับ Chromium: 41491762

Lighthouse 12.0.0

ตอนนี้แผง Lighthouse จะเรียกใช้ Lighthouse 12.0.0 แล้ว

การปรับปรุงครั้งนี้มีการเปลี่ยนแปลงหลายประการ ซึ่งรวมถึงการนำหมวดหมู่ PWA ออก, การจัดระเบียบหมวดหมู่ SEO ใหม่, การเลิกใช้งานเงินที่ประหยัดได้โดยรวม, การตรวจสอบใหม่ๆ และการเปลี่ยนแปลงจากการตรวจสอบ ดูรายการการเปลี่ยนแปลงทั้งหมด

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

ปัญหาเกี่ยวกับ Chromium: 772558

ไฮไลต์เบ็ดเตล็ด

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

  • ประสิทธิภาพ:
    • ตอนนี้ระบบจะล้างการตั้งค่าการจับภาพที่ช้า (เปิดใช้การวัดคุมการแสดงผลขั้นสูงและเปิดใช้สถิติตัวเลือก CSS) โดยอัตโนมัติในเซสชันเครื่องมือสำหรับนักพัฒนาเว็บครั้งถัดไป
    • ตอนนี้แท็บสถิติตัวเลือกจะไม่เลื่อนไปด้านล่างโดยอัตโนมัติเมื่อคุณซูมแผนภูมิ Flame และข้อมูลการเปลี่ยนแปลง (337999939)
  • การลบล้าง
    • เมื่อลบล้างส่วนหัว ตอนนี้คุณสามารถวางสตริงที่มีชื่อส่วนหัวและค่าแล้ว ระบบจะแยกสตริงโดยอัตโนมัติที่ : (330967147)
    • เพิ่มการตรวจสอบความถูกต้องของสตริงส่วนหัว (337012362)
    • ระบบจะปิดใช้ตัวเลือกเมนูและปุ่มแก้ไขสำหรับ chrome://-URL ที่ตรงกับลักษณะการทำงานที่ต้องการ (328210785)
  • คอนโซล: ตอนนี้แป้นพิมพ์ลัด Ctrl+` จะปิดคอนโซลในลิ้นชักเมื่อมีโฟกัสเท่านั้น (40875466, 328210785)
  • ป้อนข้อความอัตโนมัติ: การแยกวิเคราะห์ที่อยู่เป็นค่าตายตัว (335409093, 335409707)
  • การช่วยเหลือพิเศษ: การอ่านออกเสียงข้อความของโปรแกรมอ่านหน้าจอสำหรับสตริงที่แปลแล้วจะไม่มีการเปลี่ยนแปลง (324930007)

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

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

ติดต่อทีม Chrome DevTools

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

  • ส่งข้อเสนอแนะหรือความคิดเห็นถึงเราทาง crbug.com
  • รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม   เพิ่มเติม   > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
  • ทวีตที่ @ChromeDevTools
  • แสดงความคิดเห็นว่ามีอะไรใหม่ในวิดีโอ YouTube เครื่องมือสำหรับนักพัฒนาเว็บ หรือวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

ยกเลิก Chrome 82 แล้ว

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59