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

Sofia Emelianova
Sofia Emelianova
GitHub

ค้นหา Easter Egg

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

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

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

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

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

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

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

ภาพก่อนและหลังการจําลองหน้าที่โฟกัสในแท็บสไตล์

ปัญหา Chromium: 1468393

เครื่องมือเลือกสี นาฬิกามุม และเครื่องมือแก้ไขการโจมตีแบบนุ่มนวลในvar()

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

เครื่องมือเลือกสีนาฬิกามุม และเครื่องมือแก้ไขเอฟเฟกต์การเปลี่ยนรูปแบบก่อนและหลังการแสดงผลใน var()

ปัญหา Chromium: 1520417

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

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1523279

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

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

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

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

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

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

ทีม DevTools ขอขอบคุณ Charles Vazac ที่ช่วยทำให้ฟีเจอร์นี้ใช้งานได้

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

ปัญหา Chromium: 1488863, 40659493

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

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

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

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

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

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

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

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

ผลลัพธ์ก่อนและหลังการกลับมาของตัวเลือกเปิดและปิด

ปัญหา Chromium: 1522037

ดูสคริปต์ที่โหลดใน DevTools สําหรับ Node.js

ตอนนี้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์สําหรับ Node.js จะแสดงสคริปต์ที่โหลดในแผนภูมิการนําทางในส่วนแหล่งที่มา > สคริปต์

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

ปัญหา Chromium: 1518364

Lighthouse 11.5.0

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

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

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

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

ปัญหา Chromium: 772558

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

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

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

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

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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

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