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

Sofia Emelianova
Sofia Emelianova
GitHub

ค้นหาไข่อีสเตอร์

ทีม DevTools ได้ซ่อนไข่อีสเตอร์ไว้ที่ใดที่หนึ่งใน DevTools เพื่อเฉลิมฉลองวันโกหกปีนี้

โดยให้มองหาอีโมจิ 💫 ที่มีสีสัน

การอัปเดตแผงองค์ประกอบ

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

จำลองหน้าที่โฟกัสในองค์ประกอบ > รูปแบบ

ตอนนี้แท็บองค์ประกอบ > รูปแบบมีตัวเลือก จำลองหน้าเว็บที่โฟกัส ในส่วนสลับสถานะองค์ประกอบ (:hov) ก่อนหน้านี้ คุณจะเห็นตัวเลือกนี้ได้ในแผงการแสดงผลเท่านั้น

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

ก่อนและหลังการจำลองหน้าที่โฟกัสในแท็บ "รูปแบบ"

ปัญหาใน Chromium: 1468393

ตัวเลือกสี นาฬิกามุม และเครื่องมือแก้ไขการเปลี่ยนภาพใน var()

ตอนนี้แท็บองค์ประกอบ > รูปแบบช่วยให้คุณใช้เครื่องมือเลือกสี นาฬิกามุม และเครื่องมือแก้ไขการเปลี่ยนในvar()สำรองได้แล้ว เพื่อให้การแก้ไข CSS ง่ายขึ้น

เครื่องมือ Color Picker, Angle Clock และ Easing Editor ก่อนและหลังการแสดงผลใน Fallback ของ var()

ปัญหาใน Chromium: 1520417

เลิกใช้งานเครื่องมือความยาว CSS แล้ว

เราเลิกใช้งานเครื่องมือเขียนความยาว CSS แล้วเนื่องจากความคิดเห็นที่ว่าเครื่องมือนี้ทำให้เวิร์กโฟลว์ช้าลงและไม่ได้เพิ่มคุณค่ามากนัก

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

หากต้องการเปิดเครื่องมือความยาวอีกครั้ง ให้ล้าง การตั้งค่า > ฟีเจอร์ทดลอง > เลิกใช้งานเครื่องมือเขียน CSS <length> ในแท็บรูปแบบ

หากยังต้องการใช้เครื่องมือนี้ ทีม DevTools อยากทราบความคิดเห็นของคุณและวิธีที่เครื่องมือวัดความยาวช่วยคุณในเวิร์กโฟลว์ โปรดแสดงความคิดเห็นใน crbug/1522657

การทดสอบการเลิกใช้งานจะปิดอยู่

ป๊อปโอเวอร์สำหรับผลการค้นหาที่เลือกในประสิทธิภาพ > เส้นทางหลัก

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

ภาพก่อนและหลังแสดงป๊อปโอเวอร์เหนือผลการค้นหาที่เลือก

ปัญหาใน Chromium: 1523279

การอัปเดตแผงเครือข่าย

เวอร์ชันนี้มีการอัปเดตเล็กน้อยในแผงเครือข่าย

ปุ่มล้างและตัวกรองการค้นหาในแท็บเครือข่าย > EventStream

แท็บเครือข่าย > EventStream จะมีข้อมูลต่อไปนี้

  • ปุ่ม ล้างที่ล้างเหตุการณ์ที่บันทึกไว้ในตาราง
  • ตัวกรองการค้นหาที่เข้าใจนิพจน์ทั่วไป

ก่อนและหลังเพิ่มปุ่มล้างและตัวกรองการค้นหา

ทีม DevTools ขอขอบคุณ Charles Vazac ที่เปิดตัวฟีเจอร์นี้

นอกจากนี้ ตอนนี้แท็บ EventStream ยังบันทึกเหตุการณ์ที่เซิร์ฟเวอร์ส่งผ่าน fetch/XHR ด้วย ไม่ใช่แค่ EventSource API เท่านั้น ลองใช้ในหน้าสาธิตนี้

ปัญหาใน Chromium: 1488863, 40659493

เคล็ดลับเครื่องมือพร้อมเหตุผลในการยกเว้นสำหรับคุกกี้ของบุคคลที่สามในเครือข่าย > คุกกี้

ตอนนี้แท็บเครือข่าย > คุกกี้จะแสดงเคล็ดลับเครื่องมือพร้อมเหตุผลในการยกเว้นข้างคุกกี้ที่ควรถูกบล็อกโดยการเลิกใช้งานคุกกี้ของบุคคลที่สาม

ภาพก่อนและหลังแสดงเคล็ดลับเครื่องมือพร้อมเหตุผลในการยกเว้นสำหรับคุกกี้ของบุคคลที่สาม

ระบบอาจอนุญาตคุกกี้ของบุคคลที่สามด้วยเหตุผลต่อไปนี้

ปัญหาใน Chromium: 41491846

เปิดใช้และปิดใช้เบรกพอยท์ทั้งหมดในแหล่งที่มา

ส่วนแหล่งที่มา > จุดพักจะนำตัวเลือกเปิดใช้และปิดใช้จุดพักทั้งหมดกลับมาไว้ในเมนูแบบเลื่อนลง ก่อนหน้านี้ การออกแบบจุดพักใหม่ไม่ได้รวมตัวเลือกเหล่านี้ไว้

หากต้องการเปิดหรือปิดใช้เบรกพอยท์ทั้งหมด ให้คลิกขวาที่เบรกพอยท์ในแหล่งที่มา > เบรกพอยท์ แล้วเลือกตัวเลือกที่เกี่ยวข้อง

รูปภาพก่อนและหลังการนำตัวเลือกเปิดและปิดกลับมา

ปัญหาใน Chromium: 1522037

ดูสคริปต์ที่โหลดในเครื่องมือสำหรับนักพัฒนาเว็บสำหรับ Node.js

ตอนนี้ DevTools สำหรับ Node.js จะแสดงสคริปต์ที่โหลดแล้วในแผนผังการนำทางในแหล่งที่มา > สคริปต์

ก่อนและหลังเพิ่มแท็บสคริปต์ที่มีโครงสร้างของสคริปต์ที่โหลด

ปัญหาใน Chromium: 1518364

Lighthouse 11.5.0

ตอนนี้แผง Lighthouse ทำงานด้วย Lighthouse 11.5.0 ดูรายการการเปลี่ยนแปลงทั้งหมด

การเปลี่ยนแปลงที่สำคัญอย่างหนึ่งคือการตรวจสอบใหม่ที่ประเมินสาเหตุหลักของการเปลี่ยนเลย์เอาต์ การตรวจสอบนี้จะแทนที่การตรวจสอบ layout-shift-elements ซึ่งแสดงเฉพาะองค์ประกอบที่ได้รับผลกระทบจากการเปลี่ยนเลย์เอาต์

การตรวจสอบใหม่ที่ประเมินสาเหตุหลักของการเปลี่ยนเลย์เอาต์

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

ปัญหาใน Chromium: 772558

การช่วยเหลือพิเศษ

เวอร์ชันนี้มีการปรับปรุงการช่วยเหลือพิเศษดังต่อไปนี้

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

ปัญหาเกี่ยวกับ Chromium: 1516957, 324282443, 324467508, 324930007

ไฮไลต์อื่นๆ

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

  • เราได้อัปเดตแบบอักษรในเครื่องมือสำหรับนักพัฒนาเว็บให้ตรงกับ Chrome (1523538)
  • ประสิทธิภาพ: แก้ไขการแสดงภาพหน้าจอเมื่อวางเมาส์เหนือไทม์ไลน์ (1519469)
  • แหล่งที่มา: เพิ่มความสูงของบรรทัดในเอดิเตอร์เพื่อให้โค้ดอ่านง่ายขึ้น (1523640)
  • เครือข่าย > การตอบกลับ: แก้ไขปัญหาการแสดงผลต่างๆ ที่มีรูปแบบและการเข้ารหัสที่แตกต่างกัน (1523128, 1509336, 1523128, 41481944, 1509336)

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

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

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

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

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

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