มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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()

ปรับปรุงการแสดงคุณสมบัติส่วนตัว

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

พร็อพเพอร์ตี้ส่วนตัวใน Console

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

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

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

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

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