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

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

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

เปิดแผงและเริ่มการบันทึกใหม่ตามกรณีการใช้งาน ตัวอย่างเช่น ลองวัดการโหลดหน้าเว็บของหน้าสาธิตนี้กัน

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

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

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

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

แป้นพิมพ์ลัดใหม่เพื่อจำลองธีมสว่างและธีมมืด

ตอนนี้คุณสามารถจำลองธีมสว่างและธีมมืดได้เร็วขึ้น (ฟีเจอร์สื่อ CSS prefers-color-scheme) ด้วยแป้นพิมพ์ลัดใหม่ในแผงรูปแบบ

ก่อนหน้านี้ การจำลองธีมในแท็บการแสดงผลต้องใช้ขั้นตอนมากกว่านี้

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

การรักษาความปลอดภัยที่ได้รับการปรับปรุงในแท็บ "ตัวอย่างเครือข่าย"

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บได้ใช้นโยบายรักษาความปลอดภัยเนื้อหา (CSP) ในแท็บแสดงตัวอย่างในแผงเครือข่าย

เช่น ภาพหน้าจอแรกแสดงหน้าเว็บที่มีเนื้อหาผสม หน้าเว็บจะโหลดผ่านการเชื่อมต่อ HTTPS ที่ปลอดภัย แต่สไตล์ชีตจะโหลดผ่านการเชื่อมต่อ HTTP ที่ไม่ปลอดภัย

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

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

ปรับปรุงการโหลดซ้ำที่เบรกพอยท์

ตอนนี้โปรแกรมแก้ไขข้อบกพร่องจะยุติการทำงานของสคริปต์เมื่อโหลดซ้ำที่เบรกพอยท์

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

การดำเนินการเรียกใช้ JavaScript อย่างต่อเนื่องทำให้เกิดปัญหาอย่างมากสำหรับนักพัฒนาซอฟต์แวร์และอาจปล่อยให้ตัวแสดงผลไม่ทำงาน การเปลี่ยนแปลงนี้ปรับลักษณะการแก้ไขข้อบกพร่องให้กับเบราว์เซอร์อื่นๆ เช่น Firefox ด้วย

ปัญหาเกี่ยวกับ Chromium: 1014415, 1004038, 1112863, 1134899

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

จัดการข้อผิดพลาดในการเรียกใช้สคริปต์ในคอนโซล

ตอนนี้ข้อผิดพลาดระหว่างการประเมินสคริปต์ในคอนโซลจะสร้างเหตุการณ์ข้อผิดพลาดที่เหมาะสมซึ่งทริกเกอร์เครื่องจัดการ window.onerror และส่งเป็นเหตุการณ์ "error" ในออบเจ็กต์หน้าต่าง

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

แสดงออกแบบเรียลไทม์ด้วย Enter

เมื่อคุณพิมพ์นิพจน์แบบสดเสร็จแล้ว คุณสามารถคลิก Enter เพื่อยืนยัน ก่อนหน้านี้ การกด Enter จะทำให้มีการขึ้นบรรทัดใหม่ ซึ่งจะไม่สอดคล้องกับส่วนอื่นๆ ของเครื่องมือสำหรับนักพัฒนาเว็บ

หากต้องการเพิ่มบรรทัดใหม่ในตัวแก้ไขนิพจน์แบบเรียลไทม์ ให้ใช้ Shift + Enter แทน

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

ยกเลิกการบันทึกโฟลว์ผู้ใช้เมื่อเริ่มต้น

คุณยกเลิกการบันทึกได้ในช่วงที่เริ่มบันทึกการไหลเวียนของผู้ใช้ ก่อนหน้านี้ไม่มีตัวเลือกให้ยกเลิกการบันทึก

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

แสดงองค์ประกอบเทียมที่มีการไฮไลต์ที่สืบทอดมาในแผงรูปแบบ

ดูเอลิเมนต์เทียมที่มีการไฮไลต์ (เช่น ::selection, ::spelling-error, ::grammar-error และ ::highlight) ในแผงรูปแบบ ก่อนหน้านี้ไม่มีการแสดงกฎเหล่านี้

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

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

ไฮไลต์เบ็ดเตล็ด

การแก้ไขที่สำคัญในรุ่นนี้มีดังนี้

• ตอนนี้แผงคุณสมบัติจะแสดงพร็อพเพอร์ตี้ของผู้เข้าถึงที่มีค่าโดยค่าเริ่มต้น มีการซ่อนหน้าดังกล่าวโดยไม่ได้ตั้งใจ (1309087)
• ตอนนี้แผงรูปแบบแสดงกฎ @support ที่ถูกลบอย่างถูกต้องในรูปแบบขีดทับ ก่อนหน้านี้ กฎต้องไม่ขีดฆ่า (1298025)
• แก้ไขตรรกะการจัดรูปแบบ CSS ในแผงแหล่งที่มาที่ทำให้เกิดบรรทัดว่างหลายบรรทัดเมื่อแก้ไข CSS (1309588)
• จำกัดตัวเลือกขยายซ้ำของออบเจ็กต์ในคอนโซลสูงสุดที่ 100 รายการ เพื่อไม่ให้เป็นเช่นนี้ตลอดไปสำหรับวัตถุที่เป็นวงกลม (1272450)

[ทดลอง] คัดลอกการเปลี่ยนแปลง CSS

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

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

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

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

[ทดลอง] การเลือกสีนอกเบราว์เซอร์

เปิดใช้การทดลองนี้เพื่อเลือกสีนอกเบราว์เซอร์ด้วยตัวเลือกสี ก่อนหน้านี้คุณสามารถเลือกสีได้ในเบราว์เซอร์เท่านั้น

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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