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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

ปัญหา Chromium: 336266699

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

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

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

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

ปัญหา 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 ด้วยตัวเองซึ่งปรากฏในเซสชันเครื่องมือสำหรับนักพัฒนาเว็บใหม่ทุกครั้ง

กล่องโต้ตอบคำเตือน 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

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

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

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