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

Sofia Emelianova
Sofia Emelianova
GitHub

การปรับปรุงแผงเครือข่าย

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

ปรับโฉมตัวกรองเครือข่าย

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

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

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

หากต้องการนำรูปแบบตัวกรองแบบเก่ากลับมา ให้ล้าง การตั้งค่า > การทดสอบ > ออกแบบแถบตัวกรองใหม่ในแผงเครือข่าย

บอกให้เราทราบว่าคุณคิดอย่างไรเกี่ยวกับการออกแบบที่ปรับปรุงใหม่

ปัญหา Chromium: 362672528

ตอนนี้การส่งออก HAR จะยกเว้นข้อมูลที่ละเอียดอ่อนโดยค่าเริ่มต้น

เพื่อลดโอกาสที่ข้อมูลที่มีความละเอียดอ่อนจะรั่วไหลโดยไม่ตั้งใจ บันทึกเครือข่ายที่ส่งออกในรูปแบบ HAR จะไม่มีส่วนหัว Cookie, Set-Cookie และ Authorization โดยค่าเริ่มต้นอีกต่อไป

หากต้องการส่งออกบันทึกในรูปแบบ HAR ด้วยข้อมูลที่ละเอียดอ่อน ให้เปิด การตั้งค่า > ค่ากำหนด > เครือข่าย > อนุญาตให้สร้าง HAR ที่มีข้อมูลที่ละเอียดอ่อน แผงเครือข่ายจะมีลูกศรกำกับปุ่ม ส่งออก กดปุ่มค้างไว้ แล้วเลือกส่งออก HAR (พร้อมข้อมูลที่ละเอียดอ่อน) จากเมนูแบบเลื่อนลง

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

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

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

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

ค่าที่เติมข้อความอัตโนมัติสำหรับพร็อพเพอร์ตี้ text-emphasis-*

ตอนนี้การเติมข้อความอัตโนมัติในแท็บสไตล์จะแนะนำค่าสำหรับพร็อพเพอร์ตี้ CSS ต่อไปนี้

ก่อนและหลังเพิ่มตัวเลือกการเติมข้อความอัตโนมัติสำหรับพร็อพเพอร์ตี้ "text-emphasis-*"

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

ข้อความที่เลื่อนเกินขอบเขตซึ่งมีการทําเครื่องหมายด้วยป้าย

ตอนนี้แผงองค์ประกอบจะติดป้าย "เลื่อน" ใหม่ให้กับองค์ประกอบที่มีเนื้อหาที่แสดงเกินขอบและมี overflow: scroll หรือ overflow: auto เพื่อให้คุณเห็นเนื้อหาที่แสดงเกินขอบได้ง่าย เช่นเดียวกับป้ายอื่นๆ ป้ายนี้จะแสดง DOM ปัจจุบันและจะหายไปหากเนื้อหาไม่ล้นเนื่องจากมีการเปลี่ยนแปลงขนาด เป็นต้น

ก่อนและหลังการทําเครื่องหมายการเลื่อนเกินด้วยป้าย

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

การประกาศแบบเปลือยหลังกฎที่ฝังไว้จะไม่ "เลื่อนขึ้น"

จากการตัดสินใจของคณะทำงาน CSS ที่จะอนุญาตให้ประกาศเปล่าหลังจากกฎที่ซ้อนกัน ขณะนี้แท็บรูปแบบจะไม่ "เปลี่ยนแปลง" การประกาศเหล่านี้ในระหว่างการแยกวิเคราะห์

ในตัวอย่างโค้ดต่อไปนี้ การประกาศแบบไม่ใส่เครื่องหมายหลังกฎที่ฝังอยู่จะไม่ทําให้ Chrome จัดลําดับสไตล์ใหม่ในการแสดงผลตามลำดับชั้นโดยไม่คาดคิด

p {
  width: 100px;
  height: 100px;
  @media screen {
    background-color: red;
  }

  background-color: green;
}

ก่อนและหลังการอนุญาตให้การประกาศเปล่าเกิดขึ้นหลังจากกฎที่ซ้อนกัน

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

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

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

วิดีโอแนะนำในเมตริกแบบเรียลไทม์

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

หากต้องการดูคําแนะนํา ให้ตั้งค่าการดึงข้อมูลภาคสนามจากรายงานประสบการณ์ของผู้ใช้ Chrome (CrUX) แล้วขยายส่วนพิจารณาสภาพการทดสอบในพื้นที่ในการ์ดเมตริกแต่ละใบ (หากมี) และพิจารณาสภาพแวดล้อมของผู้ใช้จริงในการตั้งค่าสภาพแวดล้อม

ขยายส่วนพร้อมคำแนะนำ

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

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

การปรับปรุงแผงหน่วยความจํา

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

โปรไฟล์ "องค์ประกอบที่ถอดออก" ใหม่

แผงความทรงจำจะมีโปรไฟล์ประเภทใหม่ที่เรียกว่าองค์ประกอบที่แยกออก โดยจะแสดงออบเจ็กต์ที่เก็บรักษาโดยการอ้างอิง JavaScript

ก่อนและหลังเพิ่มโปรไฟล์ประเภท "องค์ประกอบที่แยกออก" ลงในแผงหน่วยความจำ

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

ปรับปรุงการตั้งชื่อออบเจ็กต์ JS ธรรมดา

ในการจัดระเบียบและจัดระเบียบหมวดหมู่ Object ในฮีปสแนปชอต ตอนนี้ออบเจ็กต์ JavaScript แบบธรรมดามีดังนี้

  • โดยชื่อตามพร็อพเพอร์ตี้ที่มีอยู่ เช่น {firstProperty, secondProperty, ..., *nthProperty}
  • ค้นหาตามชื่อเหล่านี้ที่เครื่องมือสำหรับนักพัฒนาเว็บสร้างขึ้น
  • จัดกลุ่มไว้ด้วยกันหากมีพร็อพเพอร์ตี้เดียวกัน

ก่อนและหลังการจัดระเบียบหมวดหมู่ออบเจ็กต์ในฮีพสแนปชอต

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

ปิดการกำหนดธีมแบบไดนามิก

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

หากต้องการปิดธีมแบบไดนามิก ให้ล้าง การตั้งค่า > ค่ากําหนด > ลักษณะที่ปรากฏ > ใช้ชุดสีของ Chrome แล้วโหลด DevTools ซ้ำ

ก่อนและหลังปิดการใช้ธีมแบบไดนามิก

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

การทดลองใน Chrome: การแชร์กระบวนการ

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

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

แถบข้อมูล "แท็บนี้ใช้ทรัพยากรร่วมกับแท็บอื่นๆ..."

การแชร์กระบวนการอาจส่งผลต่อการแก้ไขข้อบกพร่องจุดหยุดพักและการวิเคราะห์ประสิทธิภาพ สําหรับข้อมูลเพิ่มเติม โปรดดูที่การทดสอบ Chrome: การแชร์กระบวนการ

Lighthouse 12.2.1

ตอนนี้แผง Lighthouse ทำงานด้วย Lighthouse 12.2.1 แล้ว

การอัปเดตนี้เพิ่มเกณฑ์การละเว้น < 20 KB สำหรับคำแนะนำการบีบอัดทรัพยากร เพื่อช่วยให้คุณมุ่งเน้นเฉพาะการประหยัดขนาดไฟล์ที่มีความหมายเท่านั้น ดูรายการการเปลี่ยนแปลงทั้งหมด

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

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

ไฮไลต์อื่นๆ

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

  • องค์ประกอบ:
    • การแก้ไขหลายอย่างเกี่ยวกับการแก้ไข CSS ที่ซ้อนกัน (41486635, 361477264, 328263458, 41487826)
    • แก้ไขการแยกวิเคราะห์พร็อพเพอร์ตี้ที่กำหนดเองซึ่งมีค่าว่างเป็น "ไม่ระบุ" (365578428)
  • คอนโซล: แก้ไขเครื่องหมาย & ที่ไม่ใช้ Escape ในสตริงแบบหลายบรรทัดในคำสั่ง cURL (352651673)
  • หน่วยความจำ: แก้ไขการเลือกเริ่มต้นในหน้าที่มี Service Worker โดยตอนนี้ระบบจะเลือกเธรดหลัก (40669896)
  • ความปลอดภัย: รูปแบบ URL ที่ไฮไลต์ตอนนี้ได้รับการอัปเดตอย่างถูกต้องเมื่อมีการเปลี่ยนแปลงต้นทางในขั้นตอนการรักษาความปลอดภัย (359920086)

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

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

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

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

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

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