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

Jecelyn Yeen

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

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

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

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

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

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

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

ปัญหา 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" บนออบเจ็กต์ window

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

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

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

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

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

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