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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เปิดเมนูคำสั่ง เรียกใช้คำสั่ง Show Rendering แล้วตั้งค่าเมนูแบบเลื่อนลง Emulate CSS of CSS feature forces-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 รายการ โดยที่ทั้ง 2 องค์ประกอบมี "id" เดียวกัน

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

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

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

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

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

ไฮไลต์เบ็ดเตล็ด

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

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

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

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

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

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

แผง Reporting API

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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