สิ่งที่จำเป็นต้องทราบมีดังนี้
- ใช้ Document Picture in Picture API เพื่อเพิ่มประสิทธิภาพการทำงานของผู้ใช้
- ตอนนี้คุณสามารถแก้ไขข้อบกพร่องของสไตล์ชีตที่ขาดหายไปในเครื่องมือสำหรับนักพัฒนาเว็บได้ง่ายขึ้น
- และยังมีอื่นๆ อีกมากมาย
ฉันชื่อ Adriana Jara มาเจาะลึกกันเลยและดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 116
Document Picture-in-Picture API
Document Picture-in-Picture API ช่วยให้สามารถเปิดหน้าต่างด้านบนตลอดเวลาซึ่งสามารถเติมเนื้อหา HTML ที่กําหนดเองได้
หน้าต่าง Picture-in-Picture ใน 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
- ขณะนี้ คอนโซล นอกเหนือจากลิงก์ไปยังคำขอที่ล้มเหลวแล้ว ขณะนี้ยังมีลิงก์ไปยังบรรทัดที่เฉพาะเจาะจงซึ่งอ้างอิงสไตล์ชีตที่โหลดไม่สำเร็จ
แผงเครือข่ายจะสร้างคอลัมน์ Initiator อย่างสม่ำเสมอโดยมีลิงก์ไปยังบรรทัดที่ตรงกับสไตล์ชีตซึ่งโหลดไม่สำเร็จ
แผงปัญหาจะแสดงปัญหาการโหลดสไตล์ชีตทั้งหมด ซึ่งรวมถึง URL ที่ไม่ทำงาน คำขอที่ไม่สำเร็จ และคำสั่ง @import ที่วางไว้ผิดที่
ดูมีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บเพื่อดูรายละเอียดทั้งหมดและข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome 116
และอีกมากมาย
แน่นอนว่ายังมีอีกมากมาย
- เส้นทางการเคลื่อนไหวช่วยให้ผู้เขียนสามารถจัดตำแหน่งวัตถุที่เป็นกราฟิก และทำให้วัตถุเคลื่อนไหวไปตามเส้นทางที่นักพัฒนาแอประบุไว้
- ภาพเคลื่อนไหวในคีย์เฟรมรองรับคุณสมบัติ
displayและcontent-visibilityแล้ว ซึ่งช่วยให้เพิ่มภาพเคลื่อนไหวการออกใน CSS เท่านั้น - ตอนนี้ API การดึงข้อมูล ใช้กับ Bring Your Own Buffer Reader ได้แล้ว ซึ่งช่วยลดค่าใช้จ่ายและการคัดลอกขยะในการเก็บรวบรวมขยะ ตลอดจนปรับปรุงการตอบสนองของผู้ใช้
อ่านเพิ่มเติม
ซึ่งจะกล่าวถึงไฮไลต์ที่สำคัญบางส่วนเท่านั้น ไปที่ลิงก์ด้านล่างเพื่อดูการเปลี่ยนแปลงเพิ่มเติมใน Chrome 116
- มีอะไรใหม่ใน Chrome DevTools (116)
- การเลิกใช้งานและการนำ Chrome 116 ออก
- การอัปเดต ChromeStatus.com สำหรับ Chrome 116
- รายการเปลี่ยนแปลงที่เก็บของแหล่งที่มา Chromium
- ปฏิทินการเผยแพร่ Chrome
สมัครใช้บริการ
โปรดติดตามช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome และคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่
ขอแสดงความนับถือ Adriana Jara และทันทีที่มีการเปิดตัว Chrome 117 เราจะแจ้งให้คุณทราบว่ามีอะไรใหม่ใน Chrome