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

Jecelyn Yeen

Chrome 100

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

คุณสามารถดูวิดีโอเกี่ยวกับข่าวสารล่าสุดใน DevTools ได้โดยคลิกที่รูปภาพตามปกติ

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

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

ดูและแก้ไขกฎ @supports at

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

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

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

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

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

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

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

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

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