มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บของ 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 ธรรมดา

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

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

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

ปัญหา Chromium: 350519222

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

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

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

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

ปัญหา Chromium: 328472696

การทดสอบ Chrome: การแชร์กระบวนการ

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

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

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

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

Lighthouse 12.2.1

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

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

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

ปัญหา Chromium: 772558

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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

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