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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

ปัญหาของ Chromium: 336266699

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

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

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

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

ปัญหา Chromium: 336266714

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

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

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

ปัญหา Chromium: 324978881

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

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

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

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

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

วางสตริงส่วนหัวทั้งหมดเพื่อลบล้าง

เมื่อลบล้างส่วนหัว คุณจะวางสตริงส่วนหัวทั้งหมด (HEADER_NAME: VALUE) ได้แล้ว และเครื่องมือสำหรับนักพัฒนาเว็บจะแบ่งสตริงที่ : เป็นชื่อส่วนหัวและค่าของสตริง

ดูการใช้งานจริงได้ในวิดีโอต่อไปนี้

เมื่อแก้ไขส่วนหัว แผงเครือข่ายจะเตือนคุณหากป้อนอักขระอื่นนอกเหนือจากตัวอักษรและตัวเลขคละกัน ขีดกลาง และขีดล่าง

คำเตือนข้างชื่อส่วนหัวซึ่งมีอักขระที่ระบบไม่รองรับ

นอกจากนี้ ระบบยังปิดใช้ตัวเลือกเมนูและปุ่มแก้ไขสำหรับ URL chrome:// รายการซึ่งตรงกับลักษณะการทำงานที่ต้องการ

ปัญหาเกี่ยวกับ Chromium: 330967147, 337012362, 328210785

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

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

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

ปัญหา Chromium: 337094903

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

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

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

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

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

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

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

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

ปัญหา Chromium: 41491762

Lighthouse 12.0.0

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

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

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

ปัญหา Chromium: 772558

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

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

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

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

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

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

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

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

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