มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บของ 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 จัดลำดับรูปแบบใหม่ใน Cascade โดยไม่คาดคิดอีกต่อไป

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

  background-color: green;
}

ก่อนและหลังอนุญาตให้ประกาศเปล่าๆ อยู่หลังกฎที่ซ้อนกัน

ปัญหาใน Chromium: 358119261

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

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

คำแนะนำในเมตริกแบบสด

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

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

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

ทำตามคำแนะนำเพื่อประมาณประสบการณ์ของผู้ใช้

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

การปรับปรุงแผงความทรงจำ

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

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

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

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

ปัญหาใน Chromium: 350519222

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

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

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

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

ปัญหาใน Chromium: 350519222

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

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

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

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

ปัญหาใน Chromium: 328472696

Chrome Experiment: การแชร์กระบวนการ

โดยปกติแล้ว เมื่อคุณเปิดหลายแท็บจากเว็บไซต์เดียวกัน (เช่น 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 หรือ Beta เป็นเบราว์เซอร์เริ่มต้นสำหรับการพัฒนา ช่องตัวอย่างเหล่านี้ช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของ DevTools ทดสอบ API ของแพลตฟอร์มเว็บที่ล้ำสมัย และช่วยคุณค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะพบ

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

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

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

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