หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Jecelyn Yeen

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

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

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

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

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

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

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

ปัญหา Chromium: 887173

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

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

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

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

ปัญหาเกี่ยวกับ Chromium: 1238818, 1268754 , 1086491

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

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

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

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

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

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

ปัญหา Chromium: 1257499

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

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

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

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

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

แท็บ Back-Forward Cache

ปัญหา Chromium: 1110752

ตัวกรองแผงคุณสมบัติใหม่

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

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

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

ตัวกรองแผงพร็อพเพอร์ตี้

ปัญหา Chromium: 1269674

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

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

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

ฟีเจอร์สื่อสีที่บังคับของ 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

ปัญหา 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)
ไม่มีแท็บเพย์โหลดที่ซ้ำกันในคำขอเครือข่ายอีกต่อไป (1273972)
แก้ไขรายละเอียดการเปลี่ยนเลย์เอาต์ที่ขาดหายไปในส่วนสรุปของแผงประสิทธิภาพ (1259606)
รองรับอักขระที่กำหนดเอง (เช่น ,, .) ในการค้นหา Network Search (1267196)

[ทดลอง] ปลายทางในแผง Reporting API

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

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

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

แผง API การรายงาน

ปัญหา Chromium: 1200732

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

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

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

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

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