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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

หรือเปลี่ยนรูปแบบสีเป็น HWB ได้ในตัวเลือกสี

ปรับปรุงการแสดงผลสถานที่ส่วนบุคคล

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

ปัญหาเกี่ยวกับ Chromium: 1296855, https://crbug.com/1303407

ไฮไลต์เบ็ดเตล็ด

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

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

• ส่งข้อเสนอแนะหรือความคิดเห็นถึงเราทาง crbug.com
• รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม   > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
• ทวีตที่ @ChromeDevTools
• แสดงความคิดเห็นว่ามีอะไรใหม่ในวิดีโอ YouTube เครื่องมือสำหรับนักพัฒนาเว็บ หรือวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

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

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