มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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

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

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

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

ปัญหา Chromium: 1214030

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

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

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

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

ปัญหา Chromium: 1226262

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

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

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

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

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

ปัญหา Chromium: 1251176

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

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

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

ปัญหา Chromium: 1073804

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

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

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

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

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

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

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

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