หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Jecelyn Yeen

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

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

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

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

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

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

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

ปัญหา 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 ส่งผลให้มีการเพิ่มบรรทัดใหม่ ซึ่งไม่สอดคล้องกับส่วนอื่นๆ ของเครื่องมือสำหรับนักพัฒนาเว็บ

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

คอมมิตนิพจน์แบบเรียลไทม์ด้วย Enter

ปัญหา Chromium: 1260744

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

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

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

ปัญหา Chromium: 1257499

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

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

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

หมายเหตุ: ในขณะนี้คุณต้องเรียกใช้ Chrome ด้วยแฟล็ก --enable-blink-features=HighlightInheritance เพื่อเปิดใช้ฟีเจอร์นี้

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

ปัญหา Chromium: 1024156

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1268754

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

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

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

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

ปัญหา Chromium: 1245191

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

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

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

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

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