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

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

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

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

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

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

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

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

ปัญหาใน Chromium: 1270700

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

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

ก่อนหน้านี้ต้องทำหลายขั้นตอนเพื่อเลียนแบบธีมในแท็บการแสดงผล

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

ปัญหาใน Chromium: 1314299

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

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

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

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

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

ปัญหาใน Chromium: 833147

การโหลดซ้ำที่เบรกพอยท์ดีขึ้น

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

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

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

การโหลดซ้ำที่เบรกพอยท์ดีขึ้น

ปัญหาใน Chromium: 1014415, 1004038, 1112863, 1134899

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

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

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

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

ปัญหาใน Chromium: 1295750

ส่งนิพจน์แบบเรียลไทม์ด้วยปุ่ม Enter

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

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

ส่งนิพจน์แบบเรียลไทม์ด้วยปุ่ม Enter

ปัญหาใน Chromium: 1260744

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

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

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

ปัญหาใน Chromium: 1257499

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

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

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

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

ปัญหาใน Chromium: 1024156

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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

ปัญหาใน Chromium: 1268754

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

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

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

เลือกสีนอกเบราว์เซอร์

ปัญหาใน Chromium: 1245191

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

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

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

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

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

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