เกริ่นนำ
ไม่ว่าคุณจะใช้บริบทแบบ 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 พัฒนาขึ้นเท่านั้น