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

Jecelyn Yeen

ฟีเจอร์เวอร์ชันตัวอย่าง: แผงภาพรวม CSS ใหม่

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

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

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

อ่านข้อมูลเพิ่มเติมเกี่ยวกับแผงภาพรวม CSS ได้ที่บทความนี้

แผงภาพรวม CSS

ปัญหาใน Chromium: 1254557

กู้คืนและปรับปรุงประสบการณ์การแก้ไขและความยาวของ CSS

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

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

โปรดรายงานปัญหาที่พบผ่าน goo.gle/length-feedback

คุณปิดใช้ได้โดยไปที่การตั้งค่า > ฟีเจอร์ทดลอง > ช่องทําเครื่องหมายเปิดใช้เครื่องมือเขียนความยาว CSS ในแผงรูปแบบ

ปัญหาเกี่ยวกับ Chromium: 1259088, 1172993

การอัปเดตแท็บการแสดงผล

จำลองฟีเจอร์สื่อ CSS prefers-contrast

จำลองฟีเจอร์สื่อ CSS prefers-contrast

ฟีเจอร์สื่อ prefers-contrast ใช้เพื่อตรวจหาว่าผู้ใช้ขอคอนทราสต์ในหน้าเว็บมากหรือน้อย

เปิดเมนูคำสั่ง เรียกใช้คำสั่งแสดงการแสดงผล แล้วตั้งค่าเมนูแบบเลื่อนลงจำลองฟีเจอร์สื่อ CSS prefers-contrast

ปัญหาใน Chromium: 1139777

จำลองฟีเจอร์ธีมมืดอัตโนมัติของ Chrome

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

Chrome 96 เปิดตัวช่วงทดลองใช้จากต้นทางสำหรับธีมมืดอัตโนมัติใน Android ฟีเจอร์นี้จะทำให้เบราว์เซอร์ใช้ธีมมืดที่สร้างขึ้นโดยอัตโนมัติกับเว็บไซต์ที่ใช้ธีมสว่าง เมื่อผู้ใช้เลือกใช้ธีมมืดในระบบปฏิบัติการ

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

จำลองฟีเจอร์ธีมมืดอัตโนมัติของ Chrome

ปัญหาใน Chromium: 1243309

คัดลอกประกาศเป็น JavaScript ในแผงรูปแบบ

ระบบได้เพิ่มตัวเลือกใหม่ 2 รายการในเมนูบริบทเพื่อให้คุณคัดลอกกฎ CSS เป็นพร็อพเพอร์ตี้ JavaScript ได้อย่างง่ายดาย ตัวเลือกแป้นพิมพ์ลัดเหล่านี้มีประโยชน์อย่างยิ่ง โดยเฉพาะสำหรับนักพัฒนาซอฟต์แวร์ที่ทำงานกับไลบรารี CSS-in-JS

ในแผงสไตล์ ให้คลิกขวาที่กฎ CSS คุณเลือกคัดลอกประกาศเป็น JS เพื่อคัดลอกกฎเดียว หรือคัดลอกประกาศทั้งหมดเป็น JS เพื่อคัดลอกกฎทั้งหมดได้

เช่น ตัวอย่างด้านล่างจะคัดลอก paddingLeft: '1.5rem' ไปยังคลิปบอร์ด

คัดลอกประกาศเป็น JavaScript

ปัญหาใน Chromium: 1253635

แท็บเพย์โหลดใหม่ในแผงเครือข่าย

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

แท็บเพย์โหลดในแผงเครือข่าย

ปัญหาใน Chromium: 1214030

ปรับปรุงการแสดงพร็อพเพอร์ตี้ในแผงพร็อพเพอร์ตี้

ตอนนี้บานหน้าต่างพร็อพเพอร์ตี้จะแสดงเฉพาะพร็อพเพอร์ตี้ที่เกี่ยวข้องแทนที่จะแสดงพร็อพเพอร์ตี้ทั้งหมดของอินสแตนซ์ ตอนนี้เราได้นำต้นแบบและเมธอด DOM ออกแล้ว

การปรับปรุงแผงพร็อพเพอร์ตี้ใน Chrome 95 ช่วยให้คุณค้นหาพร็อพเพอร์ตี้ที่เกี่ยวข้องได้ง่ายขึ้น

การแสดงพร็อพเพอร์ตี้ในแผงพร็อพเพอร์ตี้

ปัญหาใน Chromium: 1226262

การอัปเดตคอนโซล

ตัวเลือกในการซ่อนข้อผิดพลาด CORS ในคอนโซล

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

ในคอนโซล ให้คลิกไอคอนการตั้งค่า แล้วยกเลิกการเลือกช่องทำเครื่องหมายแสดงข้อผิดพลาด CORS ในคอนโซล

ตัวเลือกในการซ่อนข้อผิดพลาด CORS ในคอนโซล

ปัญหาใน Chromium: 1251176

Intlออบเจ็กต์Intlที่เหมาะสมจะแสดงตัวอย่างและประเมินในคอนโซล

ตอนนี้ออบเจ็กต์ Intl มีตัวอย่างที่เหมาะสมแล้วและจะได้รับการประเมินอย่างรวดเร็วใน Console ก่อนหน้านี้ระบบไม่ได้ประเมินออบเจ็กต์ Intl อย่างกระตือรือร้น

ออบเจ็กต์ Intl ในคอนโซล

ปัญหาใน Chromium: 1073804

สแต็กเทรซที่ไม่พร้อมกันที่สอดคล้องกัน

ตอนนี้ Console จะรายงานasync Stack Trace สำหรับฟังก์ชัน async เพื่อให้สอดคล้องกับงานแบบอะซิงโครนัสอื่นๆ และสอดคล้องกับสิ่งที่แสดงใน Call Stack

สแต็กเทรซที่ไม่พร้อมกัน

ปัญหาใน Chromium: 1254259

เก็บแถบด้านข้างของคอนโซล

แถบด้านข้างของคอนโซลจะยังคงอยู่ต่อไป ใน Chrome 94 เราได้ประกาศการเลิกใช้งานแถบด้านข้างของ Console ที่กำลังจะเกิดขึ้น และขอความคิดเห็นและความกังวลจากนักพัฒนาแอป

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

แถบด้านข้างของคอนโซล

ปัญหาเกี่ยวกับ Chromium: 1232937, 1255586

เลิกใช้งานบานหน้าต่างแคชของแอปพลิเคชันในแผงแอปพลิเคชันแล้ว

ตอนนี้เราได้นำแผงแคชของแอปพลิเคชันในแผงแอปพลิเคชันออกแล้ว เนื่องจากเราได้นำการรองรับ AppCache ออกจาก Chrome และเบราว์เซอร์อื่นๆ ที่ใช้ Chromium

ปัญหาใน Chromium: 1084190

[ทดลอง] บานหน้าต่าง Reporting API ใหม่ในแผงแอปพลิเคชัน

Reporting API ออกแบบมาเพื่อช่วยคุณตรวจสอบการละเมิดความปลอดภัยของหน้าเว็บ การเรียก API ที่เลิกใช้งานแล้ว และอื่นๆ

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

โปรดทราบว่าขณะนี้ส่วนปลายทางยังอยู่ระหว่างการพัฒนา (ไม่แสดงปลายทางการรายงานในตอนนี้)

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Reporting API ได้ที่บทความนี้

แผง Reporting API ในแผงแอปพลิเคชัน

ปัญหาใน Chromium: 1205856

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

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

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

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

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

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