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

Sofia Emelianova
Sofia Emelianova
GitHub

แผงความเป็นส่วนตัวและความปลอดภัย

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

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

ก่อนและหลังเพิ่มส่วนความเป็นส่วนตัวลงในแผงความปลอดภัย

ปัญหาใน Chromium: 352364594

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

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

ค่าที่กำหนดการควบคุม CPU ล่วงหน้าที่ปรับเทียบแล้ว

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

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

ก่อนและหลังการเพิ่มการปรับการควบคุมอัตรา

เลือกเหตุการณ์ด้านประสิทธิภาพที่แตกต่างกันในแชท AI เดียวกัน

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

การไฮไลต์บุคคลที่หนึ่งและบุคคลที่สามในประสิทธิภาพ

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

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

นอกจากนี้ ให้คลิกไอคอน ข้างรายการที่ไฮไลต์ในตารางเพื่อไปที่แท็บจากล่างขึ้นบนที่จัดกลุ่มตามบุคคลที่สาม

ข้อมูลฟิลด์ในเคล็ดลับเครื่องมือของเครื่องหมายและข้อมูลเชิงลึก

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

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

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

ข้อมูลเชิงลึก "การบังคับให้จัดเรียงใหม่"

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

เมื่อวางเมาส์เหนือข้อมูลเชิงลึกใหม่ ระบบจะไฮไลต์การเรียกฟังก์ชันยอดนิยมที่มีการปรับเลย์เอาต์ใหม่แบบบังคับ, Stack Trace และแสดงเวลาการปรับเลย์เอาต์ใหม่ทั้งหมด

ก่อนและหลังเพิ่มข้อมูลเชิงลึก "การปรับโฟลว์ใหม่โดยบังคับ"

ปัญหาใน Chromium: 369766156

ข้อมูลเชิงลึก "เพิ่มประสิทธิภาพขนาด DOM"

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

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

ก่อนและหลังเพิ่มข้อมูลเชิงลึก "เพิ่มประสิทธิภาพขนาด DOM"

ขยายการติดตามประสิทธิภาพด้วย console.timeStamp

ตอนนี้ Extensibility API รองรับconsole.timeStampแล้ว นอกจาก performance.measure และ performance.mark แล้ว ตอนนี้คุณยังสร้างแทร็กที่กำหนดเองในการติดตามประสิทธิภาพและบันทึกเครื่องหมายที่กำหนดเองได้โดยใช้ console.timeStamp ซึ่งเป็นทางเลือกที่เบากว่าซึ่งจะไม่เพิ่มรายการลงในไทม์ไลน์ประสิทธิภาพภายในของเบราว์เซอร์ แต่จะแสดงเฉพาะในการติดตามประสิทธิภาพเท่านั้น

เช่น คุณสามารถใช้ไวยากรณ์ต่อไปนี้

console.timeStamp("Start");
// Some time later ...
console.timeStamp("End");
// Some time later ...
console.timeStamp("Measure 1", "Start", "End", "Track 1");
// Some time later ...
console.timeStamp("Measure 2", "Start", undefined, "Track 1");

เมื่อใช้การตั้งค่าการจับภาพ > แสดงแทร็กที่กำหนดเอง คุณจะเห็นแทร็กที่กำหนดเองในการติดตามดังนี้

ก่อนและหลังเพิ่มการรองรับ console.timeStamp

การปรับปรุงแผงองค์ประกอบ

เวอร์ชันนี้มีการปรับปรุงแผงองค์ประกอบหลายอย่าง

ค่าแบบเรียลไทม์ของสไตล์ที่มีภาพเคลื่อนไหว

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

รองรับ:open Pseudo-class และ Pseudo-element ต่างๆ

ตอนนี้แผงองค์ประกอบรองรับ:openคลาสเสมือนในส่วนรูปแบบ > :hov > บังคับสถานะขององค์ประกอบที่เฉพาะเจาะจงสำหรับองค์ประกอบ HTML บางอย่าง เช่น <details>, <select>, <dialog> และ <input>

ก่อนและหลังเพิ่มตัวเลือก &quot;:open&quot;

นอกจากนี้ ตอนนี้แผงองค์ประกอบยังรองรับองค์ประกอบเสมือนใหม่หลายรายการ ได้แก่ ::checkmark, ::picker-icon และที่เกี่ยวข้องกับภาพสไลด์ ::column, ::scroll-button, ::scroll-marker และ ::scroll-marker-group

ปัญหาเกี่ยวกับ Chromium: 383157184, 379805728

คัดลอกข้อความคอนโซลทั้งหมด

ตอนนี้คุณคลิกขวาเพื่อคัดลอกข้อความคอนโซลทั้งหมดได้พร้อมกันแล้ว

ก่อนและหลังเพิ่มตัวเลือก &quot;คัดลอกคอนโซล&quot;

นอกจากนี้ คุณยังดูตัวเลือกการคัดลอกที่คล้ายกันได้ในเมนูตามบริบทของเครือข่าย > เพย์โหลดคำขอ

ปัญหาเกี่ยวกับ Chromium: 40206460, 384967020

หน่วยไบต์ในแผงหน่วยความจำ

ตอนนี้แผงหน่วยความจำจะแสดงขนาดเป็นหน่วยไบต์ที่เหมาะสมแทนที่จะแสดงเป็นจำนวนไบต์ขนาดใหญ่

ก่อนและหลังแสดงหน่วยไบต์

ปัญหาใน Chromium: 388589515

ไฮไลต์อื่นๆ

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

  • ประสิทธิภาพ
    • คำอธิบายประกอบ: ตอนนี้คุณคลิกป้ายกำกับเพื่อเลือกรายการที่เกี่ยวข้องได้แล้ว (crbug.com/388224764)
    • ข้อมูลเชิงลึก: ตอนนี้การคลิก CLS ในแท็บข้อมูลเชิงลึกจะเลือกคลัสเตอร์ที่แย่ที่สุดแทนการเปลี่ยนแปลงที่แย่ที่สุด
  • รายการที่ละเว้น: ตอนนี้ระบบจะละเว้นส่วนประกอบภายในของโหนดที่ขึ้นต้นด้วย node: โดยค่าเริ่มต้น (crbug.com/382453615)
  • นิพจน์สด: แก้ไขข้อบกพร่องที่ทำให้นิพจน์สดส่งผลต่อคำสั่ง $_ (crbug.com/388437265)
  • องค์ประกอบ > รูปแบบ: ตอนนี้ความยาวสัมพัทธ์มีป๊อปโอเวอร์ที่แสดงค่าสัมบูรณ์แล้ว (crbug.com/40778486)
  • การช่วยเหลือพิเศษ: ตอนนี้ส่วนหัวของคอลัมน์จะประกาศว่าเรียงลำดับได้หรือไม่
  • ตอนนี้ไอคอนแท็บจะอยู่ทางด้านขวาข้างชื่อแท็บแทนที่จะอยู่ทางด้านซ้าย

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

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

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

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

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

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