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

Sofia Emelianova
Sofia Emelianova

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

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

ถ้าจะค้นหา ให้มองหาอีโมจิ 💫 สีสันสดใส

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

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

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

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

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

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

ปัญหา Chromium: 1468393

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

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

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

ปัญหา Chromium: 1520417

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

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1523279

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

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

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

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

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

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

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

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

ปัญหาของ Chromium: 1488863, 40659493

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

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

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

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

ปัญหา Chromium: 41491846

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

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

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

ก่อนและหลังนำตัวเลือกเปิดและปิดใช้กลับมา

ปัญหา Chromium: 1522037

ดูสคริปต์ที่โหลดในเครื่องมือสำหรับนักพัฒนาเว็บสำหรับ 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 หรือเบต้าเป็นเบราว์เซอร์สำหรับการพัฒนาเริ่มต้น ตัวอย่างช่องทางเหล่านี้จะช่วยให้คุณสามารถเข้าถึงฟีเจอร์ล่าสุดของเครื่องมือสำหรับนักพัฒนาเว็บ ทดสอบ API แพลตฟอร์มเว็บที่ล้ำสมัย และค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะทำงานได้

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

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

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

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

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

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