สิ่งใหม่ๆ ใน 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 เครื่องมือสำหรับนักพัฒนาเว็บมีการปรับปรุงต่อไปนี้ในแผงประสิทธิภาพ

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

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

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

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

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

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

ตัวเลือก unsanitized ของ Async 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