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

Jecelyn Yeen

ข้อมูล Web Vitals จะปรากฏในแผงประสิทธิภาพ

วางเมาส์เหนือเครื่องหมาย Web Vitals ในแผงประสิทธิภาพเพื่อทําความเข้าใจสิ่งที่บ่งชี้ถึงสิ่งที่บ่งชี้ได้ว่าประสิทธิภาพดี ต้องปรับปรุง หรือแย่

ป๊อปอัปข้อมูล Web Vitals

ปัญหา Chromium: 1147872

แสดงภาพการเลื่อนของ CSS

ตอนนี้คุณสลับป้าย scroll-snap ในแผงองค์ประกอบเพื่อตรวจสอบการปรับแนวแถบเลื่อนของ CSS ได้แล้ว

การเลื่อนของ CSS

เมื่อองค์ประกอบ HTML ในหน้าเว็บ (เช่น หน้าสาธิต) มีการนำไปใช้กับองค์ประกอบ scroll-snap-type แล้ว คุณจะเห็นป้าย scroll-snap ถัดจากองค์ประกอบนั้นในแผงองค์ประกอบ คลิกป้ายเพื่อสลับการแสดงการวางซ้อนการเลื่อนแบบสแนปบนหน้าเว็บ

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

ปัญหา Chromium: 862450

เครื่องมือตรวจสอบหน่วยความจำใหม่

ใช้เครื่องมือตรวจสอบหน่วยความจำใหม่เพื่อตรวจสอบ ArrayBuffer ใน JavaScript รวมถึงหน่วยความจำ Wasm

เปิดหน้าสาธิตนี้ ในแผงแหล่งที่มา ให้เปิดไฟล์ demo-js.js แล้วตั้งค่าเบรกพอยท์ที่บรรทัดที่ 18

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับการตรวจสอบ JavaScript ArrayBuffer และ WebAssembly.Memory ด้วยเครื่องมือตรวจสอบหน่วยความจำแบบใหม่นี้ได้ในเอกสารประกอบ

เครื่องมือตรวจสอบหน่วยความจำ

ปัญหา Chromium: 1166577

แผงการตั้งค่าป้ายใหม่ในแผงองค์ประกอบ

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

แผงการตั้งค่าป้ายในแผงองค์ประกอบ

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

ปัญหา Chromium: 1066772

ตัวอย่างรูปภาพที่ปรับปรุงแล้วด้วยข้อมูลสัดส่วนภาพ

ตอนนี้ตัวอย่างรูปภาพในแผงองค์ประกอบแสดงข้อมูลเพิ่มเติมเกี่ยวกับรูปภาพ ซึ่งได้แก่ ขนาดที่แสดงผล สัดส่วนภาพที่แสดงผล ขนาดภายใน สัดส่วนภาพภายใน และขนาดไฟล์

ข้อมูลนี้จะช่วยให้คุณเข้าใจรูปภาพได้ดีขึ้นและใช้การเพิ่มประสิทธิภาพได้หากต้องการ

ตัวอย่างรูปภาพพร้อมข้อมูลสัดส่วนภาพ

ข้อมูลสัดส่วนภาพจะอยู่ในแผงเครือข่ายด้วยเมื่อคุณคลิกดูตัวอย่างรูปภาพ

ข้อมูลสัดส่วนภาพในแผงเครือข่าย

ปัญหา Chromium: 1149832, 1170656

ปุ่มเงื่อนไขเครือข่ายใหม่พร้อมตัวเลือกในการกำหนดค่า Content-Encoding

ระบบจะเพิ่มปุ่มเงื่อนไขเครือข่ายใหม่ในแผงเครือข่าย ให้คลิกเพื่อเปิดแท็บเงื่อนไขของเครือข่าย

ระบบจะเพิ่มตัวเลือกการเข้ารหัสเนื้อหาที่ยอมรับใหม่ในแท็บเงื่อนไขของเครือข่าย กำหนดค่าเพื่อทดสอบว่ามีการเข้ารหัสการตอบกลับของเซิร์ฟเวอร์อย่างถูกต้องในเบราว์เซอร์ที่ไม่รองรับ gzip, Brotli หรือ Content-Encoding อื่นๆ ในอนาคตหรือไม่

ปุ่มเงื่อนไขเครือข่ายใหม่พร้อมตัวเลือกสำหรับกำหนดค่าการเข้ารหัสเนื้อหา

ปัญหา Chromium: 1162042

การเพิ่มประสิทธิภาพแผงรูปแบบ

ทางลัดใหม่สำหรับดูค่าที่คำนวณแล้วในแผงรูปแบบ

ตอนนี้คุณสามารถคลิกขวาที่พร็อพเพอร์ตี้ CSS ในแผงรูปแบบและเลือกดูค่าที่คำนวณแล้วเพื่อดูค่า CSS ที่คำนวณได้

แป้นพิมพ์ลัดใหม่สำหรับดูค่าที่คำนวณแล้ว

ปัญหา Chromium: 1076198

การรองรับคีย์เวิร์ด accent-color

UI ที่เติมข้อความอัตโนมัติของแผงรูปแบบจะตรวจหาคีย์เวิร์ด CSS accent-color แล้ว ซึ่งจะช่วยให้นักพัฒนาเว็บระบุสีเฉพาะจุดสำหรับการควบคุม UI (เช่น ช่องทำเครื่องหมาย ปุ่มตัวเลือก) ที่องค์ประกอบสร้างขึ้นได้

พร็อพเพอร์ตี้ CSS accent-color ยังอยู่ในขั้นทดลอง โปรดเปิดใช้ chrome://flags/#enable-experimental-web-platform-features เพื่อทดสอบ

สีเฉพาะจุด

ปัญหา Chromium: 1092093

จัดหมวดหมู่ปัญหาด้วยสีและไอคอน

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

  • ข้อผิดพลาดของหน้าเว็บ (สีแดง) ปัญหาที่ส่งผลกระทบต่อฟังก์ชันการทำงานของหน้าเว็บในทันที เช่น การตั้งค่าส่วนหัว CORS ไม่ถูกต้อง ฯลฯ
  • การเปลี่ยนแปลงที่ส่งผลกับส่วนอื่นในระบบ (สีเหลือง) ปัญหาที่แจ้งเกี่ยวกับการเปลี่ยนแปลงที่กำลังจะเกิดขึ้นกับแพลตฟอร์มเว็บที่ใช้ร่วมกันไม่ได้ซึ่งอาจส่งผลให้ฟังก์ชันการทำงานของหน้าเว็บหายไป (เช่น คำเตือนเกี่ยวกับการเปลี่ยนแปลง CORS RFC 1918 ที่กำลังจะเกิดขึ้น)
  • การปรับปรุงที่เป็นไปได้ (สีน้ำเงิน) การปรับปรุงที่เป็นไปได้ในหน้า แต่ปัจจุบันไม่ได้ทำให้ฟังก์ชันการทำงานพื้นฐานของหน้าลดลง (เช่น ปัญหาเกี่ยวกับการช่วยเหลือพิเศษ)

จัดหมวดหมู่ปัญหาด้วยสีและไอคอน

ปัญหา Chromium: 1183241

ลบโทเค็นความน่าเชื่อถือ

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

Trust Token เป็น API ใหม่เพื่อช่วยต่อสู้กับการประพฤติมิชอบและแยกบ็อตออกจากมนุษย์จริงๆ โดยไม่ต้องติดตามแบบไม่มีส่วนร่วม ดูวิธีเริ่มต้นใช้งาน Trust Token

ลบโทเค็นความน่าเชื่อถือ

ปัญหา Chromium: 1126824

ดูรายละเอียดเกี่ยวกับฟีเจอร์ที่ถูกบล็อกในมุมมองรายละเอียดเฟรม

ตอนนี้คุณจะดูรายละเอียดเกี่ยวกับฟีเจอร์ที่ถูกบล็อกได้ในส่วนนโยบายสิทธิ์ในมุมมองรายละเอียดของเฟรม

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

นโยบายสิทธิ์คือ API แพลตฟอร์มเว็บที่ช่วยให้เว็บไซต์สามารถอนุญาตหรือบล็อกการใช้ฟีเจอร์เบราว์เซอร์ในเฟรมของตัวเองหรือใน iframe ที่มีการฝัง

ฟีเจอร์ที่ถูกบล็อกในมุมมองรายละเอียดเฟรม

ปัญหา Chromium: 1158827

กรองการทดสอบในการตั้งค่าการทดสอบ

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

กรองการทดสอบในการตั้งค่าการทดสอบ

คอลัมน์ Vary Header ใหม่ในแผงพื้นที่เก็บข้อมูลแคช

ใช้คอลัมน์ Vary Header ใหม่ในแผงพื้นที่เก็บข้อมูลแคชเพื่อดูส่วนหัวการตอบกลับ HTTP Vary

คอลัมน์ส่วนหัว Vary

ปัญหา Chromium: 1186049

การปรับปรุงแผงแหล่งที่มา

รองรับฟีเจอร์ JavaScript ใหม่

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บรองรับฟีเจอร์ภาษา JavaScript แบบใหม่สำหรับการตรวจสอบแบรนด์ส่วนตัว หรือที่เรียกว่า #foo in obj

ฟีเจอร์การตรวจสอบแบรนด์ส่วนตัวนี้จะขยายการให้บริการ in Operator เพื่อรองรับการทดสอบช่องคลาสส่วนตัวในออบเจ็กต์ที่ระบุ

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

การตรวจสอบแบรนด์ส่วนตัวของ JavaScript

ปัญหา Chromium: 11374

การสนับสนุนระดับสูงสำหรับการแก้ไขข้อบกพร่องของเบรกพอยท์

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บตั้งค่าเบรกพอยท์ได้อย่างถูกต้องในหลายๆ สคริปต์อย่างถูกต้องแล้ว Bundler ของ JavaScript สมัยใหม่ (เช่น Webpack, Rollup) รองรับฟีเจอร์การแยกโค้ด แต่มีบางกรณีที่คอมโพเนนต์ที่แชร์รายการหนึ่งสามารถรวมอยู่ในหลายเส้นทาง (การแยกโค้ด)

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

ปัญหา Chromium: 1142705, 979000, 1180794

รองรับการแสดงตัวอย่างเมื่อวางเมาส์เหนือเครื่องหมาย []

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บรองรับการแสดงตัวอย่างเมื่อวางเมาส์เหนือนิพจน์สมาชิก JavaScript ที่ใช้เครื่องหมาย [] ในแผงแหล่งที่มา

รองรับการแสดงตัวอย่างการวางเมาส์เหนือเครื่องหมาย "[]"

ปัญหา Chromium: 1178305

เค้าโครงของไฟล์ HTML ที่ได้รับการปรับปรุง

ขณะนี้เครื่องมือสำหรับนักพัฒนาเว็บรองรับเค้าโครงของไฟล์ HTML ได้ดีขึ้นแล้ว ในแผงแหล่งที่มา ให้เปิดไฟล์ HTML คุณสามารถเปิด/ปิดโครงร่างโค้ดด้วยแป้นพิมพ์ Cmd + Shift + O ใน Mac หรือ Ctrl + Shift + O ใน Windows

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

เค้าโครงของไฟล์ HTML ที่ได้รับการปรับปรุง

ปัญหาของ Chromium: 761019, 1191465

สแต็กเทรซข้อผิดพลาดที่เหมาะสมสำหรับการแก้ไขข้อบกพร่อง Wasm

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

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

สแต็กเทรซข้อผิดพลาดที่เหมาะสมสำหรับการแก้ไขข้อบกพร่อง Wasm

Chrome เวอร์ชันเก่าทางด้านซ้ายไม่แสดงตำแหน่งต้นทาง (เช่น dsquare) ในสแต็กเทรซข้อผิดพลาด แต่เวอร์ชันใหม่ทางด้านขวาจะแสดง

ปัญหา Chromium: 1189161

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

ลองใช้ 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