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

ตามหาไข่อีสเตอร์

เพื่อเฉลิมฉลองวันเอพริลฟูลส์ในปีนี้ Day ทีมเครื่องมือสำหรับนักพัฒนาเว็บได้ซ่อนไข่อีสเตอร์ไว้ที่ใดที่หนึ่งในเครื่องมือสำหรับนักพัฒนาเว็บ

มองหาอีโมจิ 💫 สีสันสดใสเพื่อค้นหาได้เลย

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

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

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

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

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

ปัญหาของ Chromium: 1468393

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

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

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

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

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

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

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

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

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

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

ปัญหาของ Chromium: 1523279

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

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

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

เครือข่าย > แท็บ EventStream ได้รับสิ่งต่อไปนี้

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

ทีมเครื่องมือสำหรับนักพัฒนาเว็บต้องขอขอบคุณ Charles Vazac ที่ช่วยใช้ฟีเจอร์นี้

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

ปัญหาเกี่ยวกับ Chromium: 1488863, 40659493

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1522037

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

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

ปัญหาของ Chromium: 1518364

Lighthouse 11.5.0

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

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

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

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

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

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

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

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

ไฮไลต์เบ็ดเตล็ด

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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