สิ่งใหม่ๆ ใน Chrome 122

Adriana Jara

สิ่งที่จำเป็นต้องทราบมีดังนี้

ฉันชื่อ Adriana Jara มาเจาะลึกกันเลยและดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 122

Storage Buckets API

Storage Buckets API มีรายละเอียดมากขึ้นเพื่อให้จัดการพื้นที่เก็บข้อมูลถาวรได้ดียิ่งขึ้น

แต่เดิม เมื่อพื้นที่เก็บข้อมูลในอุปกรณ์ของผู้ใช้เต็ม ข้อมูลที่จัดเก็บด้วย API เช่น IndexedDB หรือ localStorage จะสูญหายโดยที่ผู้ใช้ไม่สามารถเข้าไปได้ วิธีหนึ่งที่จะทำให้พื้นที่เก็บข้อมูลถาวรคือการใช้เมธอด persist() ของอินเทอร์เฟซ StorageManager อย่างไรก็ตาม วิธีการขอพื้นที่เก็บข้อมูลถาวรนี้เป็นแบบทั้งหมดหรือไม่มีเลย

แนวคิดหลักของ Storage Buckets API คือการให้สิทธิ์เว็บไซต์สร้างที่เก็บข้อมูลของพื้นที่เก็บข้อมูลหลายรายการ ซึ่งเบราว์เซอร์อาจเลือกลบที่เก็บข้อมูลแต่ละชุดแยกจากที่เก็บข้อมูลอื่น คุณจึงระบุลำดับความสำคัญของการเลิกใช้เพื่อให้แน่ใจว่าข้อมูลที่มีค่ามากที่สุดจะไม่ถูกลบได้ ที่เก็บข้อมูลของพื้นที่เก็บข้อมูลแต่ละชุดอาจมีข้อมูลที่เชื่อมโยงกับ API พื้นที่เก็บข้อมูลที่สร้างขึ้น เช่น IndexedDB และ CacheStorage

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

การปรับปรุงเครื่องมือสำหรับนักพัฒนาเว็บในแผงประสิทธิภาพ

ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome 122 ประกอบด้วยการปรับปรุงต่อไปนี้ในแผงประสิทธิภาพ

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

และตอนนี้ยังมีผู้เริ่มเหตุการณ์ในแทร็กหลักด้วย โดยค่าเริ่มต้น แทร็กประสิทธิภาพ > หลักจะแสดงลูกศรที่เชื่อมต่อตัวเริ่มต้นและเหตุการณ์ต่อไปนี้ที่ทำให้เกิด

  • การใช้รูปแบบหรือเลย์เอาต์ไม่ถูกต้อง -> คำนวณรูปแบบอีกครั้งหรือเลย์เอาต์
  • ขอเฟรมภาพเคลื่อนไหว -> เฟรมภาพเคลื่อนไหวเริ่มทำงาน
  • ขอโค้ดเรียกกลับที่ไม่มีการใช้งาน -> โค้ดเรียกกลับที่ไม่มีการใช้งาน
  • ติดตั้งตัวจับเวลา -> ตัวจับเวลาที่เริ่มทำงาน
  • สร้าง WebSocket -> ส่ง... และ รับแฮนด์เชค WebSocket หรือ ทำลาย WebSocket

หากต้องการดูลูกศร ให้ค้นหาเหตุการณ์ดังกล่าวในการติดตาม แล้วคลิกเหตุการณ์

ลูกศรจากคำขอและการเริ่มทำงานของโค้ดเรียกกลับที่ไม่มีการใช้งาน

ดูข้อมูลอัปเดตเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บเพิ่มเติมในมีอะไรใหม่ในเครื่องมือ Devtools 122

ตัวเลือก unsanitized ของ Clipboard API แบบไม่พร้อมกัน

เมื่อคัดลอกและวางโดยใช้ Async Clipboard API ตัวเลือก unsanitized สำหรับเมธอด read() จะทำให้แอปและเว็บไซต์ได้รับ HTML ที่ไม่ผ่านการตรวจสอบ ระบบจะล้างข้อมูลการอ่าน HTML จากคลิปบอร์ด เว้นแต่ว่าเว็บไซต์จะมีพร็อพเพอร์ตี้นี้

โดยค่าเริ่มต้น เมื่ออ่านประเภท MIME text/html โดยใช้ API แบบไม่พร้อมกัน ระบบจะเรียกใช้ตัวล้างทำความสะอาดเพื่อตัดเนื้อหาออกจากมาร์กอัป HTML เนื่องจากข้อกังวลด้านความปลอดภัย และจะมีสไตล์แทรกอยู่ใน HTML ผลลัพธ์ ซึ่งจะนำไปสู่เพย์โหลด HTML ขนาดใหญ่และสูญเสียคุณภาพของเนื้อหา HTML เมื่อนักพัฒนาเว็บหรือแอปบนอุปกรณ์เคลื่อนที่อ่านเนื้อหา

คุณสามารถดูความแตกต่างของเอาต์พุตได้ในตัวอย่างต่อไปนี้

อินพุต:

<style>p { color: blue; }</style><p>Hello, World!</p>'

ฆ่าเชื้อแล้ว (ค่าเริ่มต้น):

<p style='color: blue; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'>Hello, World!</p>

โดยมีตัวเลือก unsanitized

<html><head><style>p { color: blue; }</style></head><body><p>Hello, World!</p></body></html>

ไปที่การเลิกบล็อกการเข้าถึงคลิปบอร์ดเพื่อดูข้อมูลเบื้องต้นของ Clipboard API

และอีกมากมาย

แน่นอน ยังมีคำถามอีกมากมาย

  • ใน CSS การค้นหาคอนเทนเนอร์ที่มีฟีเจอร์ที่ไม่รองรับจะไม่ตรงกัน ตัวอย่างเช่น ข้อความค้นหาต่อไปนี้ จะไม่ตรงเลยเนื่องจากคุณลักษณะที่ไม่รู้จัก:
@container (width > 0px) or (unknown) {}

  • dataTransfer.clearData() ไม่มีผลกับออบเจ็กต์ File โดยจะลบเฉพาะออบเจ็กต์ประเภทข้อความ

  • ด้วย drawingBufferStorage ของ WebGL คุณสามารถหลีกเลี่ยงสำเนาเพิ่มเติมเมื่อแปลงการแสดงผลเป็นรูปแบบพิกเซลบัฟเฟอร์การวาดเริ่มต้นและวาดเนื้อหาที่มีความแม่นยำมากกว่า 8 บิต

อ่านเพิ่มเติม

ซึ่งจะกล่าวถึงไฮไลต์ที่สำคัญบางส่วนเท่านั้น ไปที่ลิงก์ต่อไปนี้เพื่อดูการเปลี่ยนแปลงเพิ่มเติมใน Chrome 122

ติดตาม

โปรดติดตามช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome และคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่

ขอขอบคุณ คุณ Adriana Jara และทันทีที่มีการเปิดตัว Chrome 123 เราจะแจ้งให้คุณทราบเกี่ยวกับสิ่งใหม่ๆ ใน Chrome