การแก้ไขข้อบกพร่องที่เกี่ยวข้องกับการเลื่อนทำได้ง่ายขึ้นด้วยป้ายการเลื่อนใหม่ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ โพสต์นี้จะอธิบายว่าองค์ประกอบที่เลื่อนได้คืออะไร เหตุใดจึงอาจหายาก และฟีเจอร์ใหม่นี้จะช่วยคุณค้นหาองค์ประกอบดังกล่าวได้อย่างรวดเร็วได้อย่างไร นอกจากนี้ เราจะพาคุณไปดูเบื้องหลังการพัฒนาป้ายเลื่อน
เอลิเมนต์ที่เลื่อนได้คืออะไร
หากคุณเลื่อนเนื้อหาภายในองค์ประกอบได้ แสดงว่าองค์ประกอบดังกล่าวเป็นองค์ประกอบที่เลื่อนได้ (หรือคอนเทนเนอร์แบบเลื่อน) และจะมีแถบเลื่อนหรือไม่ก็ได้
เหตุใดจึงหาองค์ประกอบที่เลื่อนได้ยาก
การแก้ไขข้อบกพร่องของการเลื่อนนั้นทำได้ยาก หากไม่มีเครื่องมือที่แสดงองค์ประกอบที่เลื่อนได้อย่างชัดเจน ผู้ใช้อาจหลงทางได้ง่าย โดยเฉพาะอย่างยิ่งในหน้าเว็บที่ซับซ้อนที่ไม่มีแถบเลื่อน
การค้นหาองค์ประกอบที่เลื่อนได้ด้วยตนเองอาจเป็นกระบวนการทดลองและข้อผิดพลาดที่น่าเบื่อหน่าย
- คุณเลือกองค์ประกอบและแก้ไขสไตล์ขององค์ประกอบได้
- แถบเลื่อนหายไปไหม หากไม่ ให้ทำซ้ำขั้นตอน
ขอแนะนำป้ายเลื่อน
ใน Chrome 130 คุณสามารถใช้ป้ายการเลื่อนใหม่ในแผงองค์ประกอบเพื่อค้นหาองค์ประกอบที่เลื่อนได้
ตัวอย่างเช่น ให้ลองหาองค์ประกอบที่ทําให้แถบเลื่อนปรากฏในตัวอย่างต่อไปนี้โดยใช้ป้ายเลื่อนใหม่
การใช้งานทางเทคนิคของป้ายเลื่อนใหม่
เบื้องหลัง การติดตั้งใช้งานจะแบ่งออกเป็น 2 ส่วน ได้แก่
- การระบุองค์ประกอบที่เลื่อนได้ ใช้สัญญาณ
Blink’s(เครื่องมือแสดงผลของ Chrome) เพื่อระบุองค์ประกอบที่เลื่อนได้หรือที่เลื่อนได้เนื่องจากการเปลี่ยนแปลงในหน้า - การแสดงป้ายเลื่อน เมื่อได้รับสัญญาณแล้ว เราจะใส่ป้ายใหม่ (คล้ายกับป้ายตารางกริดที่มีอยู่) ข้างองค์ประกอบที่เลื่อนได้ในแผงองค์ประกอบ
การระบุองค์ประกอบที่เลื่อนได้
เราใช้เมธอด IsUserScrollable ใน Blink เพื่อระบุองค์ประกอบที่เลื่อนได้ เมธอดนี้จะระบุว่าโหนดเลื่อนได้หรือไม่โดยตรวจสอบว่าโหนดแสดงเกินขอบตามแนวแกน X หรือ Y หรือไม่ ซึ่งบ่งบอกว่าเนื้อหามีขนาดใหญ่เกินขนาดคอนเทนเนอร์และเลื่อนได้ เราจะเรียกใช้เมธอดนี้ทุกครั้งที่โหลดองค์ประกอบใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บเพื่อระบุคอนเทนเนอร์ที่เลื่อนได้
ในการอัปเดตสถานะการเลื่อนได้ขององค์ประกอบที่โหลดไว้แล้วแบบไดนามิก เราจำเป็นต้องเจาะลึกโค้ดเบสของเครื่องมือแสดงผล Blink เพื่อติดตามตำแหน่งที่เพิ่มหรือนำพื้นที่ที่เลื่อนได้ของโหนดออก
คอมโพเนนต์ PaintLayerScrollableArea จะจัดการการประมวลผลข้อมูลเกินของตรรกะหลัก กล่าวโดยละเอียดคือ เมธอด UpdateScrollableAreaSet จะมีหน้าที่ตรวจหาเมื่อเกิดข้อผิดพลาดในการรับค่าเกินหรือแก้ไขข้อผิดพลาดดังกล่าวแล้ว
ระบบจะส่งต่อข้อมูลนี้ไปยังแบ็กเอนด์ของเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์โดยส่งข้อมูลอ้างอิงของโหนดที่เปลี่ยน ScrollableArea
จากนั้นแบ็กเอนด์จะตรวจสอบโหนดอีกครั้งโดยใช้เมธอด IsUserScrollable เพื่อดูสถานะใหม่ หลังจากยืนยันความสามารถในการเลื่อนแล้ว ระบบจะส่งสัญญาณไปยังส่วนหน้าโดยใช้ Chrome DevTools Protocol เพื่อให้ UI แสดงการเปลี่ยนแปลงในเนื้อหาที่เลื่อนได้อย่างถูกต้อง
การแสดงป้ายการเลื่อน
หากต้องการเพิ่มป้ายใหม่ในหน้าเว็บส่วนหน้าของเครื่องมือสำหรับนักพัฒนาเว็บ เราได้สร้างเมธอดแฮนเดิลใน ElementsTreeOutline ที่ได้รับ nodeId ขององค์ประกอบที่เปลี่ยนสถานะการเลื่อนได้โดยเหตุการณ์
ในตัวแฮนเดิลนั้น เราจะดึงข้อมูลออบเจ็กต์ ElementsTreeElement โดยใช้ nodeId และสั่งให้อัปเดตป้ายเลื่อน
การอัปเดตป้ายเลื่อนเกี่ยวข้องกับการตรวจสอบว่าองค์ประกอบเลื่อนได้หรือไม่ และมีป้ายเลื่อนอยู่แล้วหรือไม่ ระบบจะดำเนินการต่อไปนี้ตามเงื่อนไขเหล่านี้
- หากองค์ประกอบเลื่อนได้และยังไม่มีป้ายเลื่อน ระบบจะเพิ่มป้ายเลื่อน
- หากองค์ประกอบเลื่อนไม่ได้แต่มีป้ายเลื่อน ระบบจะนำป้ายที่มีอยู่ออก
ตรรกะพิเศษสำหรับจัดการเอกสารระดับบนสุดที่เลื่อนได้
เมื่อเอกสารระดับบนสุดเลื่อนได้ เราจะถือว่านี่เป็นกรณีพิเศษเนื่องจากเราไม่แสดงองค์ประกอบ #document สำหรับเอกสารหลัก แต่จะแสดงสำหรับ iframe เท่านั้น ด้วยเหตุนี้ เราจึงแสดงป้ายบนองค์ประกอบ #document โดยตรงไม่ได้
เราจึงตัดสินใจแสดงป้ายเลื่อนบนองค์ประกอบ </html> แทน ซึ่งรวมถึงป้ายใน Quirks mode ที่ document.scrollingElement() แสดงผลเป็น <body> หรือ null การตัดสินใจนี้จะช่วยป้องกันความสับสนระหว่างเอกสารที่เลื่อนได้กับองค์ประกอบเนื้อหาที่เลื่อนได้ โดยเฉพาะในหน้าเว็บที่เลื่อนเนื้อหาได้อิสระ
เราพบว่าวิธีนี้เป็นวิธีที่ชัดเจนที่สุดในการแสดงให้เห็นว่าองค์ประกอบใดที่เลื่อนได้
การเปลี่ยนแปลงโปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (CDP)
หากต้องการผสานรวมป้ายเลื่อนใหม่ คุณต้องทําการเปลี่ยนแปลงใน Chrome DevTools Protocol (CDP) CDP ทำหน้าที่เป็นโปรโตคอลการสื่อสารระหว่างเครื่องมือสำหรับนักพัฒนาเว็บกับ Chrome
เราจึงต้องเปลี่ยนโปรโตคอลให้ครอบคลุมทั้ง 2 กรณี ดังนี้
- โหนดนี้เลื่อนได้ไหมเมื่อโหลดในเครื่องมือสำหรับนักพัฒนาเว็บ
- โหนดนี้อัปเดตสถานะการเลื่อนได้หรือไม่
โหนดนี้เลื่อนได้หรือไม่เมื่อโหลดในเครื่องมือสำหรับนักพัฒนาเว็บ
เราได้เพิ่มพร็อพเพอร์ตี้ใหม่ชื่อ isScrollable ลงในประเภทข้อมูล DOM.Node ซึ่งจะส่งทุกครั้งที่โหลดโหนดใหม่ในหน้าเว็บ DevTools
เราตัดสินใจที่จะป้อนข้อมูลพร็อพเพอร์ตี้นี้เฉพาะในกรณีที่เป็นจริงเท่านั้น เพื่อหลีกเลี่ยงการโหลดข้อมูลที่ไม่จำเป็น ดังนั้นเมื่อไม่มีการส่งพร็อพเพอร์ตี้ เราจะถือว่าองค์ประกอบนั้นเลื่อนไม่ได้
โหนดนี้อัปเดตสถานะการเลื่อนได้หรือไม่
หากต้องการตรวจจับว่าโหนดอัปเดตสถานะการเลื่อนได้หรือไม่ เราได้เปิดตัวเหตุการณ์ใหม่ scrollableFlagUpdated ใน CDP ซึ่งจะทริกเกอร์เมื่อใดก็ตามที่องค์ประกอบได้รับหรือสูญเสียพื้นที่ที่เลื่อนได้ เหตุการณ์มีโครงสร้างดังนี้
# Fired when a node's scrollability state changes.
experimental event scrollableFlagUpdated
parameters
# The id of the node.
DOM.NodeId nodeId
# If the node is scrollable.
boolean isScrollable
เคล็ดลับมือโปร: ตรวจสอบการเปลี่ยนแปลงใหม่ของ CDP ในเบราว์เซอร์
หากสงสัยว่า Chrome สื่อสารกับเครื่องมือสำหรับนักพัฒนาเว็บอย่างไร เรามีวิธีง่ายๆ ให้คุณสำรวจ
แผงเครื่องมือตรวจสอบโปรโตคอลช่วยให้คุณดูเหตุการณ์แบบเรียลไทม์ที่แลกเปลี่ยนระหว่าง Chrome กับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ รวมถึงเหตุการณ์ที่เพิ่มใหม่สำหรับป้าย Scroll เช่น เมื่อแก้ไขสไตล์ขององค์ประกอบที่ส่งผลต่อความสามารถในการเลื่อน คุณจะเห็นเหตุการณ์ CDP ที่เกี่ยวข้องทันทีที่เกิดขึ้น
ดูคู่มือโดยละเอียดได้ที่ Protocol monitor: View and send CDP requests
นอกเหนือจากการเลื่อน: ขอแนะนำป้ายรายการเพิ่มเติม
และยิ่งไปกว่านั้น เรากำลังดำเนินการป้ายกำกับรายการที่แสดงเกินใหม่เพื่อระบุสาเหตุของการเลื่อน ป้ายนี้จะปรากฏข้างองค์ประกอบที่แสดงเกินคอนเทนเนอร์ ซึ่งจะช่วยให้คุณวิเคราะห์ปัญหาเกี่ยวกับเลย์เอาต์ได้อย่างรวดเร็ว
วิธีการทํางานมีดังนี้
- การแก้ไขข้อบกพร่องแบบอินเทอร์แอกทีฟ คลิกป้ายเลื่อนเพื่อเรียกใช้คําสั่ง DevTools Protocol ที่ระบุองค์ประกอบย่อยที่แสดงเกิน
- การแสดงภาพข้อมูลส่วนเกิน เราจะแมปขอบเขตขององค์ประกอบภายในคอนเทนเนอร์ที่เลื่อนได้เพื่อตรวจหาส่วนเกิน
- ไฮไลต์ผู้ก่อเหตุ ป้ายกำกับรายการที่แสดงเกินจะแจ้งองค์ประกอบที่แสดงเกินเหล่านี้ และคลิกป้ายกำกับดังกล่าวจะเป็นการไฮไลต์องค์ประกอบเหล่านั้นใน DOM โดยตรง
ซึ่งจะช่วยให้นักพัฒนาแอปมีเครื่องมือใหม่ที่มีประสิทธิภาพในการทําความเข้าใจและแก้ไขปัญหาเลย์เอาต์ที่เกิดจากเนื้อหาที่ยาวเกินไป เราเชื่อว่าการวิเคราะห์ในระดับที่ลึกยิ่งขึ้นนี้จะช่วยปรับปรุงเวิร์กโฟลว์การแก้ไขข้อบกพร่องได้อย่างมาก