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

ค้นหา Easter Egg

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

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

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

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

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

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

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

ปัญหาใน Chromium: 1468393

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

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

ปัญหาใน Chromium: 1520417

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

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

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

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

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

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

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

ปัญหาใน Chromium: 1523279

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

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

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

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

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

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

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

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

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

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

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

• นโยบาย Chrome Enterprise
• Storage Access API หรือ Storage Access API ระดับบนสุด
• ช่วงทดลองการเลิกใช้งานคุกกี้ของบุคคลที่สามหรือระยะเวลาผ่อนผัน
• การคาดคะเนการยกเลิกการใช้งานคุกกี้ของบุคคลที่สาม
• ค่ากำหนดของผู้ใช้

ปัญหาใน 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

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

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

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

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