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

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

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

ปัญหา Chromium: 1147872

แสดงภาพ scroll-snap ของ CSS

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

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

ปัญหา Chromium: 1092093

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

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

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

ปัญหา Chromium: 1183241

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

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

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

ปัญหา Chromium: 1126824

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

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

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

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

ปัญหา Chromium: 1158827

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

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

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

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

ปัญหา Chromium: 1186049

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

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

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

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

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

ปัญหา Chromium: 11374

รองรับการแก้ไขข้อบกพร่องจุดหยุดพักที่ดีขึ้น

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

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

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

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

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

ปัญหา Chromium: 1178305

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

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

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

ปัญหา Chromium: 761019, 1191465

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

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

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

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

ปัญหา Chromium: 1189161

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

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

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

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

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

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

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools