สิ่งที่จำเป็นต้องทราบมีดังนี้
- ใช้ Document Picture in Picture API เพื่อเพิ่มประสิทธิภาพการทำงานของผู้ใช้
- ตอนนี้คุณแก้ไขข้อบกพร่องของสไตล์ชีตที่หายไปในเครื่องมือสำหรับนักพัฒนาเว็บได้ง่ายขึ้น
- นอกจากนี้ยังมีอีกมากมาย
ฉันชื่อ Adriana Jara มาเจาะลึกว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 116 กัน
Document Picture-in-Picture API
Document Picture-in-Picture API ช่วยให้คุณเปิดหน้าต่างที่แสดงอยู่ด้านบนเสมอซึ่งสามารถป้อนข้อมูลเนื้อหา HTML ใดก็ได้
หน้าต่างการแสดงภาพซ้อนภาพใน Document Picture-in-Picture API คล้ายกับหน้าต่างต้นทางเดียวกันที่ว่างเปล่าซึ่งเปิดโดยใช้ window.open() โดยมีความแตกต่างบางอย่างดังนี้
- หน้าต่างภาพในภาพจะลอยอยู่เหนือหน้าต่างอื่นๆ
- หน้าต่างการแสดงภาพซ้อนภาพจะปิดไปก่อนหน้าต่างที่เปิดอยู่เสมอ
- ไปยังส่วนต่างๆ ของหน้าต่างภาพซ้อนภาพไม่ได้
- เว็บไซต์ไม่สามารถกำหนดตำแหน่งหน้าต่างของฟีเจอร์ภาพซ้อนภาพได้
HTML ต่อไปนี้จะตั้งค่าวิดีโอเพลเยอร์ที่กำหนดเองและองค์ประกอบปุ่มเพื่อเปิดวิดีโอเพลเยอร์ในหน้าต่างการแสดงภาพซ้อนภาพ
<div id="playerContainer">
<div id="player">
<video id="video"></video>
</div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>
JavaScript ต่อไปนี้จะเรียก documentPictureInPicture.requestWindow() เมื่อผู้ใช้คลิกปุ่มเพื่อเปิดหน้าต่างภาพในภาพเปล่า สัญญาที่ส่งกลับมาจะแก้ไขด้วยออบเจ็กต์ JavaScript สำหรับหน้าต่างการแสดงภาพซ้อนภาพ ระบบจะย้ายวิดีโอเพลเยอร์ไปยังหน้าต่างนั้นโดยใช้ append()
pipButton.addEventListener('click', async () => {
const player = document.querySelector("#player");
// Open a Picture-in-Picture window.
const pipWindow = await documentPictureInPicture.requestWindow();
// Move the player to the Picture-in-Picture window.
pipWindow.document.body.append(player);
});
ดูรายละเอียดและตัวอย่างเพิ่มเติมได้ในภาพซ้อนภาพสำหรับองค์ประกอบใดก็ได้
เครื่องมือสำหรับนักพัฒนาเว็บไม่มีการปรับปรุงการแก้ไขข้อบกพร่องสไตล์ชีต
เครื่องมือสำหรับนักพัฒนาเว็บได้รับการปรับปรุงหลายประการในการระบุและแก้ไขข้อบกพร่องของสไตล์ชีตที่ขาดหายไป
อย่างแรก: ตอนนี้โครงสร้างแหล่งที่มา > หน้า จะแสดงเฉพาะสไตล์ชีตที่ทำให้ใช้งานได้และโหลดเสร็จสมบูรณ์แล้วเท่านั้น เพื่อลดความสับสน
นอกจากนี้ แหล่งที่มา > เครื่องมือแก้ไขจะขีดเส้นใต้และแสดงเคล็ดลับเครื่องมือแสดงข้อผิดพลาดย่อยข้างคำสั่ง "ไม่สําเร็จ", @import,url() และ href ด้วย
- ตอนนี้คอนโซลนอกเหนือไปจากลิงก์ไปยังคำขอที่ล้มเหลวแล้ว ขณะนี้ยังมีลิงก์ไปยังบรรทัดที่แน่นอนซึ่งอ้างอิงสไตล์ชีตที่ไม่สามารถโหลดได้
แผงเครือข่ายจะป้อนข้อมูลคอลัมน์ผู้เริ่มอย่างสม่ำเสมอด้วยลิงก์ไปยังบรรทัดที่อ้างอิงสไตล์ชีตที่โหลดไม่สำเร็จ
แผงปัญหาจะแสดงปัญหาทั้งหมดในการโหลดสไตล์ชีต ซึ่งรวมถึง URL ที่ไม่ถูกต้อง คำขอที่ไม่สำเร็จ และคำสั่ง @import ที่วางผิดตำแหน่ง
ดูข่าวสารใน DevTools เพื่อดูรายละเอียดทั้งหมดและข้อมูลเพิ่มเติมเกี่ยวกับ DevTools ใน Chrome 116
และอีกมากมาย
แน่นอนว่ายังมีอีกมากมาย
- เส้นทางการเคลื่อนไหวช่วยให้ผู้เขียนกำหนดตำแหน่งของวัตถุกราฟิกใดก็ได้และทำให้เคลื่อนไหวไปตามเส้นทางที่นักพัฒนาแอประบุ
- ตอนนี้ระบบรองรับพร็อพเพอร์ตี้
displayและcontent-visibilityในภาพเคลื่อนไหวของคีย์เฟรม ซึ่งช่วยให้คุณเพิ่มภาพเคลื่อนไหวที่ออกได้ใน CSS เท่านั้น - ตอนนี้คุณใช้ fetch API กับเครื่องมืออ่านบัฟเฟอร์ที่ผู้ใช้นำมาเองได้แล้ว ซึ่งจะช่วยลดภาระงานและสำเนาของการเก็บขยะ และปรับปรุงการตอบสนองสำหรับผู้ใช้
อ่านเพิ่มเติม
เราพูดถึงไฮไลต์สำคัญเพียงบางส่วนเท่านั้น ไปที่ลิงก์ด้านล่างเพื่อดูการเปลี่ยนแปลงเพิ่มเติมใน Chrome 116
- มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (116)
- การเลิกใช้งานและการนำ Chrome 116 ออก
- การอัปเดต ChromeStatus.com สำหรับ Chrome 116
- รายการการเปลี่ยนแปลงที่เก็บข้อมูลซอร์สโค้ด Chromium
- ปฏิทินการเผยแพร่ของ Chrome
สมัครใช้บริการ
หากต้องการติดตามข้อมูลล่าสุด โปรดติดตามช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome แล้วคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่
ฉันชื่อ Adriana Jara และพร้อมที่จะมาบอกคุณถึงสิ่งใหม่ๆ ใน Chrome ทันทีที่ Chrome 117 เปิดตัว