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

Jecelyn Yeen

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

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

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

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

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

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

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

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

ปัญหา Chromium: 887173

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

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

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

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1257499

ตรวจสอบว่าหน้าเว็บแคชได้โดยใช้แท็บแคชย้อนกลับ/ไปข้างหน้า

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

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

หากต้องการทดสอบหน้าเว็บหนึ่งๆ ให้ไปที่หน้านั้นใน Chrome จากนั้นไปที่แอปพลิเคชัน > แคชการย้อนกลับและเดินหน้าในเครื่องมือสำหรับนักพัฒนาเว็บ จากนั้นคลิกปุ่มทดสอบแคช Back/Forward แล้วเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะพยายามไปยังส่วนต่างๆ แล้วกลับไปยังหน้าเดิมเพื่อดูว่ากู้คืนหน้าเว็บจาก 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

ปัญหา 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 เพื่อช่วยให้คุณตรวจสอบรายงานที่สร้างขึ้นบนหน้าเว็บและสถานะของรายงานได้

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

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

แผง Reporting API

ปัญหา Chromium: 1200732

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

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

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

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

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

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