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

เกริ่นนำ

ไม่ว่าคุณจะใช้บริบทแบบ 2 มิติหรือ WebGL หรือไม่ก็ตาม ผู้ที่เคยทำงานกับองค์ประกอบ <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 ซึ่งช่วยให้เราทำเช่นนั้นได้

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

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

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

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

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

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

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

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

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

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

การจับภาพเฟรม

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

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

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

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

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

เห็นความแตกต่าง

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

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

ให้ทุกคนรับรู้

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