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

แผงสื่อใหม่

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

แผงสื่อใหม่

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

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

ปัญหา Chromium: 1018414

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

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

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

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

ปัญหา Chromium: 1100253

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

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

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

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

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

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

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

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

เช่น เมื่อติดตั้งแบบอักษร "รูบิก" ในอุปกรณ์และกฎ @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 ได้แล้ว

จำลอง Preferreds-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 รายงานภาพเคลื่อนไหวที่ไม่ได้ประกอบกันซึ่งไม่ค่อยดีและทำให้ CLS ลดลง
  • ฟังเหตุการณ์ unload รายงานเหตุการณ์ unload ลองใช้เหตุการณ์ pagehide หรือ visibilitychange แทน เนื่องจากเหตุการณ์ unload ไม่ได้เริ่มทำงานอย่างน่าเชื่อถือ

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

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

ปัญหา Chromium: 772558

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

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

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

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

ปัญหา 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) และ นโยบายเครื่องมือเปิดข้ามต้นทาง (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 ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจึงแสดงค่าที่ถอดรหัสแล้วเพื่อให้เนื้อหามีความโปร่งใสยิ่งขึ้น

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

ปัญหา Chromium: 1103854

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

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

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

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

ปัญหา Chromium: 1106221

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

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

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

ประเภททรัพยากรการเปลี่ยนเส้นทางที่แสดง

ปัญหา Chromium: 997694

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

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

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

ปัญหา Chromium: 1067184

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

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

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

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

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

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

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

ยกเลิก Chrome 82 แล้ว

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59