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

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

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

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

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

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

แผงภาพรวม CSS

ปัญหา Chromium: 1254557

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

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

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

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

คุณสามารถปิดใช้งานได้ผ่านช่องทำเครื่องหมายการตั้งค่า > การทดสอบ > เปิดใช้เครื่องมือสร้างความยาวของ CSS ในแผงสไตล์

ปัญหา Chromium: 1259088, 1172993

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

จำลองฟีเจอร์สื่อ Preferreds-Constant ของ CSS

จำลองฟีเจอร์สื่อ Preferreds-Constant ของ CSS

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

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

ปัญหา 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 มีการดูตัวอย่างที่เหมาะสมแล้วในตอนนี้ และจะได้รับการประเมินอย่างละเอียดใน Console ก่อนหน้านี้ Intl ออบเจ็กต์ไม่ได้รับการประเมินอย่างละเอียด

ออบเจ็กต์ระหว่างประเทศในคอนโซล

ปัญหา Chromium: 1073804

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

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

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

ปัญหา Chromium: 1254259

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

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

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

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

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

เลิกใช้แผงแคชของแอปพลิเคชันในแผงแอปพลิเคชัน

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

ปัญหา Chromium: 1084190

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

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

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

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

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

แผงการรายงาน API ในแผงแอปพลิเคชัน

ปัญหา Chromium: 1205856

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

ลองใช้ 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