มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ, 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 และปีต่อๆ ไป

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

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

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

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

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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