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

Sofia Emelianova

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

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

ตัวกรองเครือข่ายที่ออกแบบใหม่

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

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

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

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

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

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

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

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

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

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

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

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

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

• text-emphasis ข้อความสั้น
• text-emphasis-style
• text-emphasis-color
• text-emphasis-position

ปัญหาเกี่ยวกับ 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) แล้วขยายส่วนพิจารณาสภาพการทดสอบในพื้นที่ในการ์ดเมตริกแต่ละใบ (หากมี) และพิจารณาสภาพแวดล้อมของผู้ใช้จริงในการตั้งค่าสภาพแวดล้อม

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

ไปยังส่วนต่างๆ ของเบรดครัมบ์

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

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

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

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

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

ปัญหา Chromium: 350519222

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

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

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

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

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

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

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

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

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

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

• ส่งคำแนะนำหรือความคิดเห็นถึงเราผ่าน crbug.com
• รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม   > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
• ทวีตถึง @ChromeDevTools
• แสดงความคิดเห็นในวิดีโอ YouTube เกี่ยวกับข่าวสารใน DevTools หรือวิดีโอ YouTube เกี่ยวกับเคล็ดลับใน DevTools

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

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