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

Sofia Emelianova
Sofia Emelianova

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

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

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

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

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

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

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

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

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

ปัญหาของ Chromium: 1468393

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

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

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

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

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

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

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

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

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

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

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

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

หน้าก่อนและหลังที่แสดงขึ้นมาเหนือผลการค้นหาที่เลือก

ปัญหาของ Chromium: 1523279

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

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

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

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

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

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

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

����กจ������ี้ แท็บ EventStream ยังบันทึกเหตุการณ์ที่เซิร์ฟเวอร์ส่งผ่านการดึงข้อมูล/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 แล้ว ดูรายการการเปลี่ยนแปลงทั้งหมด

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

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

ดูข้อมูลเบื้องต้นในการใช้แผง 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 สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

ยกเลิก Chrome 82 แล้ว

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59