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

Jecelyn Yeen

นําเข้าและส่งออกเส้นทางของผู้ใช้ที่บันทึกไว้เป็นไฟล์ JSON

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

เช่น ดาวน์โหลดไฟล์ JSON นี้ คุณสามารถนําเข้าด้วยปุ่มนําเข้าและเล่นการนําทางผู้ใช้ซ้ำ

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

  • ส่งออกเป็นไฟล์ JSON ดาวน์โหลดไฟล์บันทึกเป็นไฟล์ JSON
  • ส่งออกเป็นสคริปต์ @puppeteer/replay ดาวน์โหลดไฟล์บันทึกเป็นสคริปต์ Puppeteer Replay
  • ส่งออกเป็นสคริปต์ Puppeteer ดาวน์โหลดไฟล์บันทึกเป็นสคริปต์ Puppeteer

โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับความแตกต่างระหว่างตัวเลือกเหล่านี้ในเอกสารประกอบ

ตัวเลือกการส่งออกในแผงโปรแกรมอัดเสียง

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

ดูเลเยอร์ตามลำดับชั้นในแผงสไตล์

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

ในตัวอย่างนี้ มีการกำหนดเลเยอร์แคสเคด 3 เลเยอร์ ได้แก่ page, component และ base ในแผงสไตล์ คุณสามารถดูเลเยอร์แต่ละเลเยอร์และสไตล์ของเลเยอร์

คลิกชื่อเลเยอร์เพื่อดูลําดับเลเยอร์ เลเยอร์ page มีความเฉพาะเจาะจงสูงสุด พื้นหลัง box จึงมีสีเขียว

ดูเลเยอร์ตามลำดับชั้นในแผงสไตล์

ปัญหา Chromium: 1240596

การรองรับฟังก์ชันสี hwb()

ตอนนี้คุณดูและแก้ไขรูปแบบสี HWB ในเครื่องมือสำหรับนักพัฒนาเว็บได้แล้ว

ในแผงสไตล์ ให้กดแป้น Shift ค้างไว้แล้วคลิกตัวอย่างสีใดก็ได้เพื่อเปลี่ยนรูปแบบสี เพิ่มรูปแบบสี HWB

หรือจะเปลี่ยนรูปแบบสีเป็น HWB ในเครื่องมือเลือกสีก็ได้

ฟังก์ชันสี hwb()

ปรับปรุงการแสดงที่พักส่วนตัว

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

พร็อพเพอร์ตี้ส่วนตัวในคอนโซล

ปัญหา Chromium: 1296855, https://crbug.com/1303407

ไฮไลต์อื่นๆ

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

  • ตอนนี้ Back-Forward Cache จะแสดงรหัสส่วนขยายที่บล็อก bfcache หากมี (1284548)
  • แก้ไขการรองรับการเติมข้อความอัตโนมัติสำหรับออบเจ็กต์ที่คล้ายกับอาร์เรย์ ชื่อคลาส CSS, map.get และแท็ก HTML (1297101, 1297491, 1293807, 1296983)
  • แก้ไขการไฮไลต์ที่ไม่ถูกต้องเมื่อดับเบิลคลิกคำและเลิกทำฟีเจอร์เติมข้อความอัตโนมัติ (1298437, 1298667)
  • แก้ไขแป้นพิมพ์ลัดของความคิดเห็นในแผงแหล่งที่มา (1296535)
  • เปิดใช้การรองรับการใช้แป้น Alt (ตัวเลือก) อีกครั้งสำหรับการเลือกหลายรายการในแผงแหล่งที่มา (1304070)

[ทดลอง] โหมดระยะเวลาและสแนปชอตใหม่ในแผง Lighthouse

นอกจากโหมดการนําทางที่มีอยู่แล้ว ตอนนี้แผง Lighthouse ยังรองรับโหมดการวัดเส้นทางของผู้ใช้อีก 2 โหมด ได้แก่ ระยะเวลาและภาพรวม

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

โดยแต่ละโหมดจะมีกรณีการใช้งาน ข้อดี และข้อจำกัดที่แตกต่างกัน โปรดดูข้อมูลเพิ่มเติมในเอกสารประกอบของ Lighthouse

โหมดระยะเวลาและสแนปชอตในแผงควบคุม Lighthouse

ปัญหา Chromium: 772558

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

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

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

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

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

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