สิ่งที่จำเป็นต้องทราบมีดังนี้
- ปรับปรุงการจัดการพื้นที่เก็บข้อมูลด้วย Storage Buckets API
- เราได้ทำการปรับปรุงเครื่องมือสำหรับนักพัฒนาเว็บในแผงประสิทธิภาพ
- เลือกรักษาความแม่นยำเมื่อคัดลอกและวาง HTML โดยใช้ ตัวเลือก
unsanitized
Async Clipboard API ใหม่ - นอกจากนี้ยังมีอีกมากมาย
ฉันชื่อ 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
หากต้องการดูลูกศร ให้ค้นหาเหตุการณ์ดังกล่าวในการติดตามแล้วคลิกเหตุการณ์นั้น
ดูการอัปเดตเพิ่มเติมสำหรับเครื่องมือสำหรับนักพัฒนาเว็บได้ในมีอะไรใหม่ใน 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
- มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (122)
- การเลิกใช้งานและการนำ Chrome 122 ออก
- การอัปเดต ChromeStatus.com สำหรับ Chrome 122
- รายการเปลี่ยนแปลงที่เก็บแหล่งที่มาของ Chromium
- ปฏิทินการเผยแพร่ของ Chrome
สมัครใช้บริการ
หากต้องการติดตามข้อมูลล่าสุด โปรดสมัครรับข้อมูล ช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome และคุณจะได้รับการแจ้งเตือนทางอีเมลเมื่อเราเปิดตัววิดีโอใหม่
ขอโทษครับ Adriana Jara นะ ทันทีที่ Chrome 123 เปิดตัว ผมจะมาบอกว่ามีอะไรใหม่ใน Chrome