การตรวจสอบ Canvas โดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

Paul Lewis

บทนำ

ไม่ว่าคุณจะใช้บริบท 2D หรือ WebGL ใครก็ตามที่เคยทำงานกับองค์ประกอบ <canvas> จะทราบดีว่าการแก้ไขข้อบกพร่องอาจเป็นเรื่องยากมาก การทำงานกับ Canvas มักเกี่ยวข้องกับรายการการเรียกใช้ที่ยาวและติดตามได้ยาก ดังนี้

function draw() {

  context.clearRect(0, 0, 258, 258);
  context.fillStyle = "#EEEEEE";
  context.beginPath();
  context.arc(129, 129, 127, 0, 6.28, true);
  context.closePath();
  context.fill();

  // … and on and on
}

บางครั้งคุณอาจต้องการบันทึกคำสั่งที่ส่งไปยังบริบท Canvas และทำตามคำสั่งทีละรายการ โชคดีที่มีฟีเจอร์การตรวจสอบ Canvas ใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บของ Chrome ที่ช่วยให้เราทำเช่นนั้นได้

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

เริ่มต้นใช้งาน

หากต้องการเริ่มต้นใช้งาน ให้ไปที่ about:flags ใน Chrome แล้วเปิด "เปิดใช้การทดสอบเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์"

รูปที่ 1 - การเปิดใช้การทดสอบเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน about:flags

จากนั้นไปที่ DevTools แล้วคลิกไอคอนรูปเฟือง ที่มุมขวาล่าง จากนั้นไปที่การทดสอบ แล้วเปิดใช้การตรวจสอบ Canvas ดังนี้

รูปที่ 2 - การเปิดใช้การตรวจสอบ Canvas ในการทดสอบของเครื่องมือสำหรับนักพัฒนาเว็บ

คุณต้องปิดและเปิดเครื่องมือสำหรับนักพัฒนาเว็บอีกครั้งเพื่อให้การเปลี่ยนแปลงมีผล (คุณสามารถใช้ Alt+R หรือ Option+R ซึ่งเป็นทางเลือกที่สะดวก)

เมื่อเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เปิดขึ้นอีกครั้ง ให้ไปที่ส่วนโปรไฟล์ แล้วคุณจะเห็นตัวเลือกเครื่องมือวิเคราะห์ Canvas ใหม่

ก่อนอื่น คุณจะเห็นว่าเครื่องมือวิเคราะห์ Canvas ปิดใช้อยู่ เมื่อคุณมีหน้าเว็บที่มี Canvas ที่ต้องการแก้ไขข้อบกพร่อง เพียงกดเปิดใช้ แล้วหน้าเว็บจะโหลดซ้ำพร้อมที่จะบันทึกการเรียก <canvas> ดังนี้

รูปที่ 3 - การเปิด Canvas Profiler

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

คำสำคัญ: เฟรมแสดงถึงการผ่านวนรอบเหตุการณ์ของหน้าเว็บ 1 ครั้ง ซึ่งรวมถึงการเรียกใช้ JavaScript, การจัดการเหตุการณ์, การอัปเดต DOM, การเปลี่ยนแปลงสไตล์, การจัดเลย์เอาต์และการวาดภาพ รวมถึงการจัดองค์ประกอบหน้าเว็บ เพื่อให้ภาพเคลื่อนไหวราบรื่น คุณต้องให้แต่ละเฟรมใช้เวลาน้อยกว่า 1/60 วินาที หรือ 16.6 มิลลิวินาที

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

รูปที่ 4 - การเลือกจำนวนเฟรมที่จะจับภาพ

เพียงเท่านี้ก็ตั้งค่าเสร็จเรียบร้อยและพร้อมเริ่มจับภาพแล้ว

กำลังจับภาพเฟรม

หากต้องการบันทึก เพียงกดเริ่ม แล้วโต้ตอบกับแอปพลิเคชันตามปกติ หลังจากผ่านไปสักพัก ให้กลับไปที่เครื่องมือสำหรับนักพัฒนาเว็บ และหากคุณบันทึกอย่างต่อเนื่อง ให้กดหยุด

ตอนนี้คุณมีโปรไฟล์ใหม่ที่โดดเด่นในรายการทางด้านซ้าย พร้อมด้วยจำนวนการเรียกใช้บริบทที่บันทึกไว้ในองค์ประกอบ <canvas> ทั้งหมด คลิกโปรไฟล์ แล้วคุณจะเห็นหน้าจอที่มีลักษณะดังนี้

รูปที่ 5 - โปรไฟล์ Canvas ในเครื่องมือสำหรับนักพัฒนาเว็บ

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

รูปที่ 6 - การเลือกบริบทของ Canvas

ภายในเฟรม คุณจะเห็นกลุ่มคำสั่งประมวลผล กลุ่มคำสั่งประมวลผลแต่ละกลุ่มจะมีคำสั่งประมวลผลรายการเดียว ซึ่งจะเป็นคำสั่งสุดท้ายในกลุ่ม แล้วคำสั่งประมวลผลคืออะไร สำหรับบริบท 2 มิติ จะเป็นสิ่งต่างๆ เช่น clearRect(), drawImage(), fill(), stroke(), putImageData() หรือฟังก์ชันการแสดงผลข้อความใดๆ และสำหรับ WebGL จะเป็น clear(), drawArrays() หรือ drawElements() โดยพื้นฐานแล้วคืออะไรก็ตามที่จะเปลี่ยนเนื้อหาของบัฟเฟอร์การวาดปัจจุบัน (หากคุณไม่สนใจเรื่องกราฟิก คุณอาจคิดว่าบัฟเฟอร์เป็นบิตแมปที่มีพิกเซลที่เรากำลังจัดการอยู่)

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

รูปที่ 7 - ปุ่มไปยังส่วนต่างๆ เพื่อข้ามรายการอย่างสะดวก

เกมจับผิดภาพ

ฟีเจอร์ที่มีประโยชน์อีกอย่างหนึ่งคือความสามารถในการดูว่าพร็อพเพอร์ตี้และตัวแปรใดมีการเปลี่ยนแปลงระหว่างการเรียก 2 ครั้ง

หากต้องการดูข้อมูลดังกล่าว เพียงคลิกปุ่มแถบด้านข้าง () แล้วมุมมองใหม่จะปรากฏขึ้น เมื่อคุณทำตามขั้นตอนต่างๆ ของคำสั่งประมวลผล คุณจะเห็นพร็อพเพอร์ตี้ที่ได้รับการอัปเดต บัฟเฟอร์หรืออาร์เรย์จะแสดงเนื้อหาเมื่อคุณวางเมาส์เหนือบัฟเฟอร์หรืออาร์เรย์นั้น

แสดงความคิดเห็นเลย

ตอนนี้คุณก็ทราบวิธีแก้ไขข้อบกพร่องของงาน Canvas ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แล้ว หากคุณมีความคิดเห็นเกี่ยวกับเครื่องมือ Canvas Profiler โปรดรายงานข้อบกพร่องหรือโพสต์ลงในกลุ่มเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome โปรดแจ้งให้เราทราบหากพบข้อบกพร่องหรือมีสิ่งอื่นใดที่คุณต้องการเห็นเมื่อตรวจสอบ <canvas> เนื่องจากเครื่องมือของ Chrome จะดีขึ้นได้ก็ต่อเมื่อมีการใช้งานและได้รับความคิดเห็นจากนักพัฒนาซอฟต์แวร์เท่านั้น