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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

แคชย้อนหลัง (หรือ 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

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

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

เปิดแท็บค้นหาผ่าน 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