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

Jecelyn Yeen

ฟีเจอร์เวอร์ชันตัวอย่าง: แผนผังการช่วยเหลือพิเศษแบบเต็มหน้า

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

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

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

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

ก่อนหน้านี้แผนผังการช่วยเหลือพิเศษจะอยู่ในแผงการช่วยเหลือพิเศษ มุมมองจะจำกัดไว้ให้คุณสำรวจได้เฉพาะโหนดเดียวและโหนดบรรพบุรุษ

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

แผนผังการช่วยเหลือพิเศษแบบเต็มหน้า

ปัญหาใน Chromium: 887173

การเปลี่ยนแปลงที่แม่นยำยิ่งขึ้นในแท็บการเปลี่ยนแปลง

ระบบจะจัดรูปแบบโค้ดที่เปลี่ยนแปลงในแท็บการเปลี่ยนแปลงโดยอัตโนมัติ

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

แท็บการเปลี่ยนแปลง

ปัญหาใน Chromium: 1238818, 1268754 , 1086491

ตั้งค่าการหมดเวลาให้นานขึ้นสำหรับการบันทึกโฟลว์ผู้ใช้

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

ตัวอย่างเช่น ฉันบันทึกโฟลว์ของผู้ใช้ในหน้าเดโมนี้เพื่อโหลดและคลิกรายการเมนู อย่างไรก็ตาม การโหลดรายการในเมนูจะช้า (ใช้เวลา 6 วินาที) การเล่นซ้ำโฟลว์ผู้ใช้รายนี้ล้มเหลวเนื่องจากใช้เวลานานเกิน 5 วินาที (ค่าหมดเวลาเริ่มต้น)

เราสามารถใช้การตั้งค่าระยะหมดเวลาใหม่เพื่อแก้ไขปัญหานี้ได้ ขยายขั้นตอนที่เราคลิกรายการในเมนู แก้ไขขั้นตอนโดยเพิ่มการหมดเวลาและตั้งค่าเป็น 6000 มิลลิวินาที (เท่ากับ 6 วินาที)

(ไม่บังคับ) คุณปรับระยะหมดเวลาได้ในการตั้งค่าการเล่นซ้ำสำหรับทุกขั้นตอน ขยายการตั้งค่าการเล่นซ้ำ แล้วแก้ไขค่าการหมดเวลา

การตั้งค่าการหมดเวลาสำหรับการบันทึกโฟลว์ผู้ใช้

ปัญหาใน Chromium: 1257499

ตรวจสอบว่าหน้าเว็บแคชได้ด้วยแท็บ Back-Forward Cache

Back-Forward Cache (หรือ bfcache) คือการเพิ่มประสิทธิภาพเบราว์เซอร์ที่ช่วยให้ไปข้างหน้าและย้อนกลับไปยังส่วนต่างๆ ได้ทันที

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

หากต้องการทดสอบหน้าเว็บใดหน้าหนึ่ง ให้ไปที่หน้าเว็บนั้นใน Chrome แล้วไปที่แอปพลิเคชัน > แคชย้อนกลับ-ไปข้างหน้าในเครื่องมือสำหรับนักพัฒนาเว็บ จากนั้นคลิกปุ่มทดสอบ Back-Forward Cache แล้ว DevTools จะพยายามไปยังส่วนต่างๆ ออกจากหน้าเว็บและกลับมาเพื่อพิจารณาว่ากู้คืนหน้าเว็บจาก bfcache ได้หรือไม่

ในฐานะนักพัฒนาเว็บ สิ่งสำคัญคือคุณต้องทราบวิธีเพิ่มประสิทธิภาพหน้าเว็บสำหรับ bfcache ในเบราว์เซอร์ทั้งหมด เนื่องจากจะช่วยปรับปรุงประสบการณ์การท่องเว็บของผู้ใช้ได้อย่างมาก โดยเฉพาะผู้ใช้ที่ใช้เครือข่ายหรืออุปกรณ์ที่ช้า

แท็บแคชย้อนหลัง

ปัญหาใน Chromium: 1110752

ตัวกรองแผงพร็อพเพอร์ตี้ใหม่

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

โดยค่าเริ่มต้น ระบบจะไม่แสดงพร็อพเพอร์ตี้ที่มีค่าเป็น null หรือ undefined เลือกช่องทําเครื่องหมายแสดงทั้งหมดเพื่อดูพร็อพเพอร์ตี้ทั้งหมด

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

ตัวกรองบานหน้าต่างพร็อพเพอร์ตี้

ปัญหาใน Chromium: 1269674

จำลองฟีเจอร์สื่อสีที่บังคับของ CSS

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

เปิดเมนูคำสั่ง เรียกใช้คำสั่งแสดงการแสดงผล แล้วตั้งค่าเมนูแบบเลื่อนลงจำลองฟีเจอร์สื่อ CSS forced-colors

ฟีเจอร์สื่อสีที่บังคับของ CSS

ปัญหาใน Chromium: 1130859

คำสั่งแสดงไม้บรรทัดเมื่อวางเหนือ

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

ก่อนหน้านี้ คุณจะเปิดใช้ไม้บรรทัดของหน้าได้ผ่านช่องทำเครื่องหมายการตั้งค่า > แสดงไม้บรรทัดเท่านั้น

คำสั่งแสดงไม้บรรทัดเมื่อวางเหนือ

ปัญหาใน Chromium: 1270562

รองรับ row-reverse และ column-reverse ในเครื่องมือแก้ไข Flexbox

เอดิเตอร์ Flexbox ได้เพิ่มปุ่มใหม่ 2 ปุ่มเพื่อรองรับ row-reverse และ column-reverse ใน flex-direction

เครื่องมือแก้ไข Flexbox

ปัญหาใน Chromium: 1263866

แป้นพิมพ์ลัดใหม่เพื่อเล่น XHR ซ้ำและขยายผลการค้นหาทั้งหมด

แป้นพิมพ์ลัดเพื่อเล่น XHR ซ้ำในแผงเครือข่าย

เลือกคำขอ XHR ในแผงเครือข่าย แล้วกด R บนแป้นพิมพ์เพื่อเล่น XHR ซ้ำ ก่อนหน้านี้ คุณจะเล่น XHR ซ้ำได้ผ่านเมนูตามบริบทเท่านั้น (คลิกขวา > เล่น XHR ซ้ำ)

เล่น XHR ซ้ำ

ปัญหาใน Chromium: 1050021

แป้นพิมพ์ลัดเพื่อขยายผลการค้นหาทั้งหมด

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

เปิดแท็บค้นหาผ่าน Esc > เมนู3 จุด > ค้นหา ป้อนสตริงการค้นหา (เช่น ฟังก์ชัน) แล้วกด Enter เพื่อดูรายการผลการค้นหา มุ่งเน้นที่ผลการค้นหาและใช้แป้นพิมพ์ลัดต่อไปนี้เพื่อขยาย/ยุบไฟล์ที่ค้นหา

  • Windows / Linux - Ctrl + Shift + { หรือ }
  • MacOS - Cmd + Options + { หรือ }

ไปที่แป้นพิมพ์ลัดเพื่อดูแป้นพิมพ์ลัดใน Chrome DevTools

ปัญหาใน Chromium: 1255073

Lighthouse 9 ในแผง Lighthouse

ตอนนี้แผง Lighthouse กำลังเรียกใช้ Lighthouse 9 ตอนนี้ Lighthouse จะแสดงองค์ประกอบทั้งหมดที่แชร์รหัสเดียวกัน

รหัสองค์ประกอบที่ไม่ซ้ำกันเป็นปัญหาด้านการช่วยเหลือพิเศษที่พบได้ทั่วไป เช่น รหัสที่อ้างอิงในแอตทริบิวต์ aria-labelledby จะใช้ในองค์ประกอบหลายรายการ

ดูรายละเอียดเพิ่มเติมเกี่ยวกับการอัปเดตได้ที่มีอะไรใหม่ใน Lighthouse 9.0

​การตรวจสอบ Lighthouse สำหรับ "องค์ประกอบที่โฟกัสได้ทั้งหมดต้องมี `id` ที่ไม่ซ้ำกัน" ซึ่งแสดงองค์ประกอบ 2 รายการที่มี `id` เดียวกัน

ปัญหาใน Chromium: 772558

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

ปรับปรุงความเสถียรมากมายในแผงแหล่งที่มาเนื่องจากเราอัปเกรดให้ใช้ CodeMirror 6 การปรับปรุงที่สำคัญบางส่วนมีดังนี้

  • เร็วขึ้นอย่างมากเมื่อเปิดไฟล์ขนาดใหญ่ (เช่น WASM, JavaScript)
  • ไม่ต้องเลื่อนแบบสุ่มอีกต่อไปเมื่อก้าวผ่านโค้ด
  • ปรับปรุงคำแนะนำการเติมข้อความอัตโนมัติสำหรับแหล่งที่มาที่แก้ไขได้ (เช่น ข้อมูลโค้ด การลบล้างในเครื่อง)

ปัญหาใน Chromium: 1241848

ไฮไลต์อื่นๆ

การแก้ไขที่สำคัญในรุ่นนี้มีดังนี้

  • แสดงแผนภาพ Waterfall ของคำขอเครือข่ายอย่างถูกต้อง ก่อนหน้านี้รูปแบบไม่ถูกต้อง (1275501)
  • การไฮไลต์โค้ดใช้งานไม่ได้เมื่อค้นหาในเอกสารที่มีบรรทัดยาวมากในแผงแหล่งที่มา ตอนนี้ปัญหาได้รับการแก้ไขแล้ว (1275496)
  • ไม่มีแท็บ Payload ที่ซ้ำกันในคำขอเครือข่ายอีกต่อไป (1273972)
  • แก้ไขรายละเอียดการเปลี่ยนแปลงเลย์เอาต์ที่ขาดหายไปในส่วนสรุปของแผงประสิทธิภาพ (1259606)
  • รองรับอักขระใดก็ได้ (เช่น ,, .) ในคำค้นหาการค้นหาเครือข่าย (1267196)

[ทดลอง] จุดสิ้นสุดในแผง Reporting API

เราได้เปิดตัวแผง Reporting API เวอร์ชันทดลองใน Chrome 96 เพื่อช่วยคุณตรวจสอบรายงานที่สร้างขึ้นในหน้าเว็บและสถานะของรายงาน

ตอนนี้ส่วนปลายทางพร้อมใช้งานแล้ว ซึ่งจะแสดงภาพรวมของปลายทางทั้งหมดที่กำหนดค่าไว้ในส่วนหัว Reporting-Endpoints

ดูวิธีใช้ Reporting API เพื่อตรวจสอบการละเมิดความปลอดภัย การเรียก API ที่เลิกใช้งานแล้ว และอื่นๆ

แผง Reporting API

ปัญหาใน Chromium: 1200732

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

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

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

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

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

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