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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

ปัญหา Chromium: 352364594

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

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

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

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

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

ก่อนและหลังการเพิ่มการปรับการจำกัด

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ปัญหา 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คลาสจำลองและองค์ประกอบจำลองต่างๆ

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

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

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

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

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

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

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