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

จำลองฟีเจอร์สื่อต้องการ-คอนทราสต์ของ CSS

ฟีเจอร์สื่อ เพิ่มประสิทธิภาพ-คอนทราสต์ จะใช้เพื่อตรวจสอบว่าผู้ใช้ขอคอนทราสต์ในหน้าเว็บมากขึ้นหรือน้อยลง

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

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

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

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

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

เปิดเมนูคำสั่ง เรียกใช้คำสั่ง Show Rendering แล้วตั้งค่าเมนูแบบเลื่อนลง Emulate autoDark Mode

จำลองฟีเจอร์ธีมมืดอัตโนมัติของ 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 ไม่ได้รับการประเมินอย่างตั้งใจ

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

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

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

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

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

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

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

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

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

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

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

แผงแคชแอปพลิเคชันที่เลิกใช้งานในแผงแอปพลิเคชัน

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

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

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

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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