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

Jecelyn Yeen

แผงสื่อใหม่

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงข้อมูลมีเดียเพลเยอร์ในแผงสื่อ

แผงสื่อใหม่

ก่อนที่จะมีแผงสื่อใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ ข้อมูลการบันทึกและการแก้ไขข้อบกพร่องเกี่ยวกับวิดีโอเพลเยอร์จะอยู่ใน chrome://media-internals

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

ปัญหาใน Chromium: 1018414

จับภาพหน้าจอของโหนดผ่านเมนูตามบริบทของแผงองค์ประกอบ

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

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

จับภาพหน้าจอของโหนด

ปัญหาใน Chromium: 1100253

การอัปเดตแท็บปัญหา

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

ปัญหาในข้อความคอนโซล

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

ช่องทำเครื่องหมายปัญหาเกี่ยวกับคุกกี้ของบุคคลที่สาม

ปัญหาเกี่ยวกับ Chromium: 1096481, 1068116, 1080589

จำลองแบบอักษรในเครื่องที่ขาดหายไป

เปิดแท็บการแสดงผล แล้วใช้ฟีเจอร์ปิดใช้แบบอักษรในเครื่องใหม่เพื่อจำลองแหล่งที่มาของlocal()ที่ขาดหายไปในกฎ@font-face

เช่น เมื่อติดตั้งแบบอักษร "Rubik" ในอุปกรณ์และ@font-face srcกฎใช้แบบอักษรดังกล่าว เป็นlocal()แบบอักษร Chrome จะใช้ไฟล์แบบอักษรในเครื่องจากอุปกรณ์ของคุณ

เมื่อเปิดใช้ปิดใช้แบบอักษรในเครื่องแล้ว DevTools จะไม่สนใจแบบอักษร local() และจะดึงข้อมูลจากเครือข่าย

จำลองแบบอักษรในเครื่องที่ขาดหายไป

บ่อยครั้งที่นักพัฒนาซอฟต์แวร์และนักออกแบบใช้สำเนาแบบอักษรเดียวกัน 2 ชุดที่แตกต่างกันระหว่างการพัฒนา

  • แบบอักษรในเครื่องสำหรับเครื่องมือออกแบบ และ
  • แบบอักษรบนเว็บสำหรับโค้ด

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

  • แก้ไขข้อบกพร่องและวัดประสิทธิภาพการโหลดและการเพิ่มประสิทธิภาพแบบอักษรบนเว็บ
  • ยืนยันความถูกต้องของกฎ CSS @font-face
  • ดูความแตกต่างระหว่างแบบอักษรบนเว็บกับเวอร์ชันในเครื่อง

ปัญหาใน Chromium: 384968

จำลองผู้ใช้ที่ไม่ได้ใช้งาน

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

จำลองผู้ใช้ที่ไม่ได้ใช้งาน

ปัญหาใน Chromium: 1090802

จำลอง prefers-reduced-data

Media Query prefers-reduced-data จะตรวจหาว่าผู้ใช้ต้องการให้แสดงเนื้อหาอื่น ที่ใช้ข้อมูลน้อยกว่าเพื่อให้หน้าเว็บแสดงผลหรือไม่

ตอนนี้คุณใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อจำลองprefers-reduced-dataการค้นหาสื่อได้แล้ว

จำลอง prefers-reduced-data

ปัญหาใน Chromium: 1096068

การรองรับฟีเจอร์ JavaScript ใหม่

ตอนนี้ DevTools รองรับฟีเจอร์ภาษา JavaScript ล่าสุดบางอย่างได้ดีขึ้นแล้ว ดังนี้

  • ตัวดำเนินการกำหนดค่าเชิงตรรกะ - ตอนนี้ DevTools รองรับการกำหนดค่าเชิงตรรกะด้วยตัวดำเนินการใหม่ &&=, ||= และ ??= ในแผงคอนโซลและแหล่งที่มา
  • จัดรูปแบบ ตัวคั่นตัวเลข - ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะจัดรูปแบบตัวคั่นตัวเลขอย่างถูกต้อง ในแผงแหล่งที่มา

ปัญหาเกี่ยวกับ Chromium: 1086817, 1080569

Lighthouse 6.2 ในแผง Lighthouse

ตอนนี้แผง Lighthouse กำลังเรียกใช้ Lighthouse 6.2 ดูรายการการเปลี่ยนแปลงทั้งหมดได้ในบันทึกประจำรุ่น

ยกเลิกการปรับขนาดรูปภาพ

การตรวจสอบใหม่ใน Lighthouse 6.2

  • หลีกเลี่ยงงานในเทรดหลักที่ใช้เวลานาน รายงานงานที่ใช้เวลานานที่สุดในเทรดหลัก เหมาะสำหรับการระบุปัจจัยที่แย่ที่สุดที่ทำให้อินพุตล่าช้า
  • รวบรวมข้อมูลลิงก์ได้ ตรวจสอบว่าแอตทริบิวต์ href ขององค์ประกอบแท็ก Anchor ลิงก์กับปลายทางที่เหมาะสม เพื่อให้ระบบค้นพบลิงก์ได้
  • องค์ประกอบรูปภาพที่ไม่มีขนาด - ตรวจสอบว่าได้ตั้งค่า width และ height ที่ชัดเจนในองค์ประกอบรูปภาพหรือไม่ ขนาดรูปภาพที่ชัดเจนจะช่วยลดการเปลี่ยนเลย์เอาต์และปรับปรุง CLS ได้
  • หลีกเลี่ยงการใช้ภาพเคลื่อนไหวที่ไม่ได้ทำการ Composite รายงานภาพเคลื่อนไหวที่ไม่ได้ทำการ Composite ซึ่งดูไม่ราบรื่นและ ลด CLS
  • รอรับเหตุการณ์ unload รายงานunloadเหตุการณ์ ลองพิจารณาใช้เหตุการณ์ pagehide หรือ visibilitychange แทน เนื่องจากเหตุการณ์ unload ไม่ทํางานอย่างสม่ำเสมอ

การตรวจสอบที่อัปเดตใน Lighthouse 6.2 มีดังนี้

  • นำ JavaScript ที่ไม่ได้ใช้ออก ตอนนี้ Lighthouse จะปรับปรุงการตรวจสอบหากหน้าเว็บมีแผนที่แหล่งที่มาของ JavaScript ที่เข้าถึงได้แบบสาธารณะ

ปัญหาใน Chromium: 772558

การเลิกใช้งานการแสดง "ต้นทางอื่นๆ" ในแผง Service Worker

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บมีลิงก์ให้ดูรายการ Service Worker ทั้งหมดจากต้นทางอื่นๆ ในแท็บเบราว์เซอร์ใหม่แล้ว - chrome://serviceworker-internals/?devtools

ก่อนหน้านี้ เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงรายการที่ซ้อนอยู่ใต้แผงแอปพลิเคชัน > บานหน้าต่าง Service Worker

ลิงก์ไปยังต้นทางอื่นๆ

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

แสดงสรุปความครอบคลุมสำหรับรายการที่กรอง

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

ในตัวอย่างด้านล่าง โปรดสังเกตว่าตอนแรกข้อมูลสรุปจะระบุว่า 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. จากนั้นจะระบุว่า 57 kB of 604 kB (10%) used so far. 546 kB unused.หลังจากใช้การกรอง CSS แล้ว

สรุปความครอบคลุมของรายการที่กรอง

ปัญหาใน Chromium: 1061385

มุมมองรายละเอียดเฟรมใหม่ในแผงแอปพลิเคชัน

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

มุมมองรายละเอียดเฟรมใหม่ในแผงแอปพลิเคชัน

ปัญหาใน Chromium: 1093247

รายละเอียดเฟรมสำหรับหน้าต่างที่เปิดอยู่

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงหน้าต่าง / ป๊อปอัปที่เปิดอยู่ใต้แผนผังเฟรมด้วย มุมมองรายละเอียดเฟรม ของหน้าต่างที่เปิดจะมีข้อมูลความปลอดภัยเพิ่มเติม

รายละเอียดเฟรมหน้าต่างที่เปิดอยู่

ปัญหาใน Chromium: 1107766

ข้อมูลความปลอดภัยและการแยก (COEP / COOP)

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงบริบทที่ปลอดภัย Cross-Origin-Embedder-Policy (COEP) และ Cross-Origin-Opener-Policy (COOP) ในรายละเอียดเฟรม

ข้อมูลด้านความปลอดภัยและการแยก

เราจะเพิ่มข้อมูลความปลอดภัยเพิ่มเติมลงในมุมมองรายละเอียดเฟรมในเร็วๆ นี้

ปัญหาใน Chromium: 1051466

การอัปเดตแผง Elements และ Network

คำแนะนำสีที่เข้าถึงได้ในแผงรูปแบบ

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะแนะนำสีสำหรับข้อความที่มีคอนทราสต์ของสีต่ำ

ในตัวอย่างด้านล่าง h1 มีข้อความคอนทราสต์ต่ำ หากต้องการแก้ไข ให้เปิดเครื่องมือเลือกสีของcolor พร็อพเพอร์ตี้ในแผงรูปแบบ หลังจากขยายส่วนอัตราส่วนคอนทราสต์แล้ว DevTools จะให้คำแนะนำสี AA และ AAA คลิกสีที่แนะนำเพื่อใช้สี

ปัญหาใน Chromium: 1093227

คืนค่าแผงคุณสมบัติในแผงองค์ประกอบ

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

แผงคุณสมบัติในแผงองค์ประกอบ

ปัญหาใน Chromium: 1105205, 1116085

ค่าส่วนหัว X-Client-Data ที่มนุษย์อ่านได้ในแผงเครือข่าย

เมื่อตรวจสอบทรัพยากรเครือข่ายในแผงเครือข่าย ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะจัดรูปแบบค่าส่วนหัว X-Client-Data ในแผงส่วนหัวเป็นโค้ด

X-Client-Dataส่วนหัว HTTP มีรายการรหัสการทดสอบและฟีเจอร์ Chrome ที่เปิดใช้ ในเบราว์เซอร์ ค่าส่วนหัวดิบจะมีลักษณะเป็นสตริงทึบเนื่องจากเข้ารหัส Base64 บัฟเฟอร์โปรโตคอลที่ซีเรียล DevTools จะแสดงค่าที่ถอดรหัสแล้วเพื่อให้เนื้อหามีความโปร่งใสมากขึ้นสำหรับนักพัฒนาซอฟต์แวร์

ค่าส่วนหัว `X-Client-Data` ที่มนุษย์อ่านได้

ปัญหาใน Chromium: 1103854

เติมข้อความอัตโนมัติสำหรับแบบอักษรที่กำหนดเองในแผงรูปแบบ

ตอนนี้ระบบจะเพิ่มรูปแบบตัวอักษรที่นำเข้าลงในรายการการเติมข้อความอัตโนมัติของ CSS เมื่อแก้ไขfont-family พร็อพเพอร์ตี้ในแผงรูปแบบ

ในตัวอย่างนี้ 'Noto Sans' คือแบบอักษรที่กำหนดเองซึ่งติดตั้งในเครื่องภายในระบบ โดยจะแสดงใน รายการเติมข้อความอัตโนมัติของ CSS ก่อนหน้านี้ไม่ได้เป็นเช่นนั้น

เติมข้อความอัตโนมัติสำหรับแบบอักษรที่กำหนดเอง

ปัญหาใน Chromium: 1106221

แสดงประเภททรัพยากรในแผงเครือข่ายอย่างสม่ำเสมอ

ตอนนี้ DevTools จะแสดงประเภททรัพยากรเดียวกันกับคำขอเครือข่ายเดิมอย่างสม่ำเสมอ และจะต่อท้าย / Redirect กับค่าคอลัมน์ประเภทเมื่อมีการเปลี่ยนเส้นทาง (สถานะ 302)

ก่อนหน้านี้เครื่องมือสำหรับนักพัฒนาเว็บจะเปลี่ยนประเภทเป็น Other ในบางครั้ง

ประเภททรัพยากรการเปลี่ยนเส้นทางโฆษณา Display

ปัญหาใน Chromium: 997694

ปุ่มล้างในแผงองค์ประกอบและแผงเครือข่าย

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

ปุ่มล้างในแผงองค์ประกอบและแผงเครือข่าย

ปัญหาใน Chromium: 1067184

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

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

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

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

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

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