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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

ดูเลเยอร์แบบ Cascade ในแผงรูปแบบ

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

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

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

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

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