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

Jecelyn Yeen

Chrome 100

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

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

ดูและแก้ไขกฎ @supports ในแผงสไตล์

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

ดูและแก้ไข @supports ที่กฎ

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

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

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

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

  • data-testid
  • data-test
  • data-qa
  • data-cy
  • รหัสการทดสอบข้อมูล
  • data-qa-id
  • data-testing

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

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

เนื่องจากองค์ประกอบอีเมลมีการกําหนด data-testid ระบบจะใช้ 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