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

Jecelyn Yeen

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

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

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

ปัญหาใน Chromium: 1147872

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

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

CSS scroll-snap

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

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

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

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

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

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

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

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

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

ปัญหาใน Chromium: 1166577

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

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

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

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

ปัญหาใน Chromium: 1066772

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

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

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

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

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

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

ปัญหาใน Chromium: 1149832, 1170656

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

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

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

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

ปัญหาใน Chromium: 1162042

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

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

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

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

ปัญหาใน Chromium: 1076198

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

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

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

accent-color

ปัญหาใน Chromium: 1092093

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

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

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

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

ปัญหาใน Chromium: 1183241

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

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

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

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

ปัญหาใน Chromium: 1126824

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

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

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

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

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

ปัญหาใน Chromium: 1158827

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

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

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

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

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

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

ปัญหาใน Chromium: 1186049

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

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

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

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

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

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

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

การรองรับการแก้ไขข้อบกพร่องด้วยเบรกพอยต์ที่ดียิ่งขึ้น

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

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

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

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

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

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

ปัญหาใน Chromium: 1178305

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

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

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

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

ปัญหาใน Chromium: 761019, 1191465

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

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

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

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

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

ปัญหาใน Chromium: 1189161

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

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

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

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

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

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