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

Jecelyn Yeen

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

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

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

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

แสดงภาพ Scroll-Snap ของ CSS

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

Scroll-Snap ของ CSS

เมื่อองค์ประกอบ HTML ในหน้าเว็บ (เช่น หน้าdemoนี้) ใช้ scroll-snap-type กับองค์ประกอบดังกล่าว คุณจะเห็นป้าย scroll-snap ข้างองค์ประกอบนั้นในแผงองค์ประกอบ คลิกป้ายเพื่อสลับการแสดงรูปภาพซ้อนทับแบบ Scroll Snap บนหน้าเว็บ

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

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

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

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

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

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

อ่านเอกสารประกอบเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการตรวจสอบ 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

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

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

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

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

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

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

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

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

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

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

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

คอลัมน์ "เปลี่ยนแปลงส่วนหัว"

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

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

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

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

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

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

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

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

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

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

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

ปัญหาเกี่ยวกับ Chromium: 1142705, 979000, 1180794

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

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

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

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

ปรับปรุงโครงร่างของไฟล์ HTML

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

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

ปรับปรุงโครงร่างของไฟล์ HTML

ปัญหาเกี่ยวกับ Chromium: 761019, 1191465

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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