مقدمه
مهم نیست که از بافت 2D یا 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 Inspection در DevTools در Chrome وجود دارد که به ما امکان می‌دهد دقیقاً همین کار را انجام دهیم!
در این مقاله به شما نشان خواهم داد که چگونه از این ویژگی برای شروع اشکال‌زدایی کار بوم خود استفاده کنید. بازرس از هر دو زمینه 2D و WebGL پشتیبانی می‌کند، بنابراین مهم نیست از کدام‌یک استفاده می‌کنید، باید بتوانید اطلاعات اشکال‌زدایی مفید را فوراً دریافت کنید.
درحال شروع کردن
برای شروع، به about:flags در Chrome بروید و «فعال کردن آزمایش‌های ابزارهای توسعه‌دهندگان» را روشن کنید
سپس، به DevTools بروید و روی چرخ‌دنده 
در گوشه پایین سمت راست کلیک کنید. از آنجا می‌توانید به آزمایش‌ها بروید و بازرسی Canvas را فعال کنید:
برای اعمال تغییرات، باید DevTools را ببندید و دوباره باز کنید (می‌توانید از Alt+R یا Option+R استفاده کنید که جایگزین‌های مفیدی هستند).
وقتی DevTools دوباره باز شد، به بخش Profiles بروید و گزینه جدید Canvas Profiler را خواهید دید.
برای شروع، متوجه خواهید شد که Canvas Profiler غیرفعال است. وقتی صفحه‌ای دارید که حاوی بوم نقاشی است که می‌خواهید اشکال‌زدایی کنید، کافی است روی فعال کردن فشار دهید و صفحه دوباره بار می‌شود و آماده ضبط تماس‌های <canvas> خواهد بود:
باید تصمیم بگیرید که می‌خواهید یک قاب را ضبط کنید یا قاب‌های متوالی را، که در آن قاب دقیقاً همان چیزی است که در «خط زمان DevTools» می‌بینید.
تک‌قاب تماس‌ها را تا پایان قاب فعلی ضبط می‌کند و سپس متوقف می‌شود. ازسوی‌دیگر، قاب‌های متوالی همه قاب‌های همه عناصر <canvas> را تا زمانی که به آن بگویید متوقف شود ضبط می‌کند. انتخاب حالت به نحوه استفاده شما از عنصر <canvas> بستگی دارد. برای پویانمایی درحال اجرا، ممکن است بخواهید یک قاب را ضبط کنید. برای پویانمایی کوتاهی که در پاسخ به رویداد کاربر رخ می‌دهد، ممکن است لازم باشد فریم‌های متوالی را ضبط کنید.
با این کار، همه چیز آماده است و می‌توانیم ضبط را شروع کنیم!
درحال ضبط قاب‌ها
برای ضبط کردن، کافی است روی شروع فشار دهید و سپس مثل همیشه با برنامه‌تان تعامل برقرار کنید. پس‌از مدتی، به DevTools برگردید و اگر به‌طور متوالی ضبط می‌کنید، روی توقف کلیک کنید.
اکنون نمایه جدید و درخشانی در فهرست سمت راست دارید که تعداد تماس‌های بافت ضبط‌شده در همه عناصر <canvas> را نشان می‌دهد. روی نمایه کلیک کنید تا صفحه‌ای شبیه به این را ببینید:
در قاب پایینی، فهرستی از همه قاب‌های ضبط‌شده را خواهید دید که می‌توانید در آن‌ها گام بردارید و وقتی روی هرکدام کلیک می‌کنید، نماگرفت در بالا وضعیت عنصر <canvas> را در پایان آن قاب به شما نشان خواهد داد. اگر چند عنصر <canvas> دارید، می‌توانید بااستفاده از منو زیر نماگرفت انتخاب کنید کدام‌یک نشان داده شود.
درون قاب، گروه‌های فراخوانی ترسیم را خواهید دید. هر گروه فراخوانی ترسیم حاوی یک فراخوانی ترسیم است که آخرین فراخوانی در گروه خواهد بود. پس فراخوانی ترسیم چیست؟ برای بافت ۲بعدی، این موارد شامل clearRect()، drawImage()، fill()، stroke()، putImageData() یا هر تابع پردازنده نوشتار می‌شود و برای WebGL شامل clear()، drawArrays()، یا drawElements() می‌شود. اساساً هر چیزی که محتوای میان‌گیر ترسیم فعلی را تغییر دهد. (اگر به گرافیک علاقه ندارید، می‌توانید میان‌گیر را به‌عنوان یک نقشه بیتی با پیکسل‌هایی که درحال دستکاری آن‌ها هستیم درنظر بگیرید.)
اکنون تنها کاری که باید انجام دهید این است که فهرست را مرور کنید. می‌توانید این کار را در سطح قاب، گروه فراخوانی ترسیم، یا فراخوانی انجام دهید. از هر روشی که برای پیمایش فهرست استفاده کنید (دکمه‌هایی درست زیر نماگرفت وجود دارد که به شما کمک می‌کند سریع پیمایش کنید)، بافت را در آن نقطه خواهید دید، یعنی می‌توانید به‌سرعت اشکال‌ها را هنگام بروز پیدا و رفع کنید.
پیدا کردن تفاوت‌ها
ویژگی مفید دیگر این است که می‌توانید ببینید کدام ویژگی‌ها و متغیرها بین دو تماس تغییر کرده‌اند.
برای دیدن آن، کافی است روی دکمه نوار کناری (
) کلیک کنید تا نمای جدیدی ظاهر شود. همان‌طور که فراخوانی‌های ترسیم را گام‌به‌گام بررسی می‌کنید، ویژگی‌هایی را که به‌روز شده‌اند خواهید دید. اگر نشانگر را روی میان‌گیرها یا آرایه‌ها نگه دارید، محتوای آن‌ها نمایش داده می‌شود.
صدایتان را به گوش دیگران برسانید!
اکنون می‌دانید که چگونه کار بوم نقاشی خود را در DevTools در Chrome اشکال‌زدایی کنید. اگر بازخوردی درباره ابزار Canvas Profiler دارید، لطفاً اشکالی ثبت کنید یا در گروه Chrome DevTools پست کنید. اگر اشکالی پیدا کردید یا چیز دیگری وجود دارد که می‌خواهید هنگام بازرسی <canvas> ببینید، به ما اطلاع دهید، زیرا ابزارهای Chrome واقعاً فقط ازطریق استفاده و بازخورد توسعه‌دهندگان بهبود می‌یابند.