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

Jecelyn Yeen

Chrome 100

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

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

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

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

ดูและแก้ไขกฎ @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

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

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

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

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

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

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

ปัญหาใน Chromium: 1261130

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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

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