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

แผงสื่อใหม่

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

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

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

ปัญหา Chromium: 1018414

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

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

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

ปัญหา Chromium: 1100253

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

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

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

ปัญหา Chromium: 1096481, 1068116, 1080589

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

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

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

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

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

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

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

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

ปัญหา Chromium: 384968

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

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

ปัญหา Chromium: 1090802

จำลอง prefers-reduced-data

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

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

ปัญหา Chromium: 1096068

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

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

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

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

Lighthouse 6.2 ในแผง Lighthouse

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

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

• หลีกเลี่ยงงานในเทรดหลักที่ใช้เวลานาน รายงานงานที่ใช้เวลานานที่สุดในเทรดหลัก เหมาะสำหรับการระบุปัจจัยที่แย่ที่สุดที่ทำให้อินพุตล่าช้า
• ลิงก์เป็นลิงก์ที่ระบบทำการ Crawl ได้ ตรวจสอบว่าแอตทริบิวต์ 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

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

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

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

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

ปัญหา Chromium: 1093227

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

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

ปัญหา Chromium: 1105205, 1116085

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

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

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

ปัญหา Chromium: 1103854

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

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

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

ปัญหา Chromium: 1106221

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

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

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

ปัญหา Chromium: 997694

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

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

ปัญหา Chromium: 1067184

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

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

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

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

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

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

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