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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

ปัญหาใน Chromium: 336266699

ละเว้นสคริปต์ใน Flame Chart

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

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

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

ปัญหาใน Chromium: 336266714

ลดความเร็ว CPU ลง 20 เท่า

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

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

ปัญหาใน Chromium: 324978881

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ปัญหาใน Chromium: 337094903

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

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

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

ปัญหาใน Chromium: 338094915

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

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

กล่องโต้ตอบคำเตือนเกี่ยวกับ Self-XSS ใน Console

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

ปัญหาใน Chromium: 41491762

Lighthouse 12.0.0

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

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

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

ปัญหาใน Chromium: 772558

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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

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