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

Jecelyn Yeen

Chrome 100

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

และเช่นเคย คุณสามารถดูวิดีโอมีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บได้โดยคลิกรูปภาพ

ดูและแก้ไข @supports ที่กฎในแผงรูปแบบ

ตอนนี้คุณสามารถดูและแก้ไขกฎ @@supports ของ CSS ในแผงรูปแบบได้แล้ว การเปลี่ยนแปลงเหล่านี้ทำให้สามารถทดสอบกับกฎ @ แบบเรียลไทม์ได้ง่ายขึ้น เปิดหน้าสาธิตนี้ ตรวจสอบองค์ประกอบ <div class=”box”> ดูกฎแอตทริบิวต์ @supports ในแผงรูปแบบ คลิกการประกาศของกฎเพื่อแก้ไข

ปัญหาเกี่ยวกับ Chromium: 1222574, 1222573

การปรับปรุงแผงโปรแกรมอัดเสียง

รองรับตัวเลือกทั่วไปโดยค่าเริ่มต้น

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

• data-testid
• data-test
• Data-Qa
• Data-Cy
• data-test-id
• Data-QA-ID
• data-testing

แอตทริบิวต์ด้านบนเป็นตัวเลือกทั่วไปที่ใช้ในการทดสอบการทำงานอัตโนมัติ

เช่น เริ่มการบันทึกใหม่ด้วยหน้าสาธิตนี้ กรอกอีเมลและสังเกตค่าตัวเลือก

เนื่องจากองค์ประกอบอีเมลได้กำหนด data-testid ไว้ ระบบจึงใช้องค์ประกอบดังกล่าวเป็นตัวเลือกโดยอัตโนมัติแทนแอตทริบิวต์ id หรือ class

ปรับแต่งตัวเลือกการบันทึก

คุณปรับแต่งตัวเลือกสำหรับการบันทึกได้หากไม่ได้ใช้ตัวเลือกทั่วไป

ตัวอย่างเช่น หน้าสาธิตนี้ใช้แอตทริบิวต์ data-automate เป็นตัวเลือก เริ่มการบันทึกใหม่ และป้อน data-automate เป็นแอตทริบิวต์ตัวเลือก กรอกอีเมลและสังเกตค่าตัวเลือก ([data-automate=email-address])

เปลี่ยนชื่อไฟล์บันทึกเสียง

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

แสดงตัวอย่างพร็อพเพอร์ตี้ของคลาส/ฟังก์ชันเมื่อวางเมาส์เหนือ

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

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

เฟรมที่นำเสนอบางส่วนในแผงประสิทธิภาพ

ตอนนี้การบันทึกประสิทธิภาพจะแสดงหมวดหมู่เฟรมใหม่ "เฟรมที่นำเสนอบางส่วน" ในไทม์ไลน์เฟรม

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

ซึ่งทำให้ผู้ใช้เกิดความสับสนเนื่องจากภาพหน้าจอของ "เฟรมที่ถูกตัดทิ้ง" เหล่านี้ยังสะท้อนถึงการอัปเดตภาพอยู่

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

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

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

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

• อัปเดตสตริง User Agent ของ iPhone สำหรับอุปกรณ์ที่จำลอง iPhone ทุกรุ่นหลังจาก 5 จะมีสตริง user-agent ที่มี iPhone OS 13_2_3 (1289553)
• ตอนนี้คุณบันทึกข้อมูลโค้ดเป็นไฟล์ JavaScript โดยตรงได้แล้ว ก่อนหน้านี้คุณต้องเพิ่มนามสกุลไฟล์ .js ด้วยตนเอง (1137218)
• ตอนนี้แผงแหล่งที่มาแสดงชื่อตัวแปรของขอบเขตได้อย่างถูกต้องเมื่อแก้ไขข้อบกพร่องด้วยการแมปแหล่งที่มา ก่อนหน้านี้ แผงแหล่งที่มาจะแสดงชื่อตัวแปรขอบเขตที่ลดขนาดลงแม้จะมีการแมปแหล่งที่มา (1294682)
• ตอนนี้แผงแหล่งที่มาจะคืนค่าตำแหน่งการเลื่อนได้อย่างถูกต้องในการโหลดหน้าเว็บแล้ว ก่อนหน้านี้ตำแหน่งไม่ได้รับการกู้คืนอย่างถูกต้อง ซึ่งทําให้การแก้ไขข้อบกพร่องเกิดความไม่สะดวก (1294422)

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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