สิ่งใหม่ๆ ใน 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

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

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

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

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

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

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

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

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

ดูการอัปเดตเพิ่มเติมสำหรับเครื่องมือสำหรับนักพัฒนาเว็บได้ในมีอะไรใหม่ใน 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() ไม่มีผลกับออบเจ็กต์ไฟล์ แต่จะลบเฉพาะออบเจ็กต์ประเภทข้อความเท่านั้น

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

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

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

สมัครใช้บริการ

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

ขอโทษครับ Adriana Jara นะ ทันทีที่ Chrome 123 เปิดตัว ผมจะมาบอกว่ามีอะไรใหม่ใน Chrome