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

แผงสื่อใหม่

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

จำลอง prefers-reduced-data

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

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

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

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

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บรองรับฟีเจอร์ภาษา JavaScript ล่าสุดได้ดียิ่งขึ้นแล้ว ดังนี้

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

ปัญหาเกี่ยวกับ 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 Workers

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

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

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

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

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

ในตัวอย่างด้านล่าง ให้สังเกตที่ข้อมูลสรุปในตอนแรก 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)

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

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

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

การอัปเดตแผงองค์ประกอบและเครือข่าย

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

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

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

ปัญหา Chromium: 1093227

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

แผงคุณสมบัติกลับมาแล้ว ซึ่งเลิกใช้งานแล้วใน Chrome 84 ในเครื่องมือสำหรับนักพัฒนาเว็บเวอร์ชันในอนาคต เราจะปรับปรุงเวิร์กโฟลว์การตรวจสอบคุณสมบัติขององค์ประกอบ

ปัญหาเกี่ยวกับ Chromium: 1105205, 1116085

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

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

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

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

เติมแบบอักษรที่กำหนดเองโดยอัตโนมัติในแผงรูปแบบ

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

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

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

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

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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