शुरुआती जानकारी
इस बात से कोई फ़र्क़ नहीं पड़ता कि आपने 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
}
कभी-कभी आपको कैनवस पर भेजे गए निर्देशों को कैप्चर करना होता है और इन निर्देशों को एक-एक करके देखना होता है. अच्छी बात यह है कि Chrome के DevTools में कैनवस जांचने की एक नई सुविधा मौजूद है, जिसकी मदद से हम ऐसा ही कर सकते हैं!
इस लेख में, हम आपको कैनवस के काम को डीबग करने के लिए, इस सुविधा को इस्तेमाल करने का तरीका बताएंगे. इंस्पेक्टर, 2D और WebGL, दोनों ही कॉन्टेक्स्ट के साथ काम करता है. इसलिए, आपको डीबग करने की ज़रूरी जानकारी सीधे मिल जाएगी. इससे कोई फ़र्क़ नहीं पड़ता कि आप किसे इस्तेमाल कर रहे हैं.
YouTube पर शुरुआत करना
शुरू करने के लिए, Chrome में about:flags पर जाएं. इसके बाद, “डेवलपर टूल एक्सपेरिमेंट चालू करें” को चालू करें
इसके बाद, DevTools पर जाएं और नीचे दाएं कोने में मौजूद कॉग 
को दबाएं. इसके बाद, एक्सपेरिमेंट पर जाकर कैनवस जांच की सुविधा चालू की जा सकती है:
बदलाव लागू करने के लिए, आपको DevTools बंद करके फिर से खोलना होगा (इसके लिए, Alt+R या Option+R का इस्तेमाल किया जा सकता है. हालांकि, इसका इस्तेमाल करना बहुत आसान है).
DevTools के फिर से खुलने पर, प्रोफ़ाइल सेक्शन में जाएं और आपको कैनवस प्रोफ़ाइलर का नया विकल्प दिखेगा.
शुरू करने से पहले, आपको दिखेगा कि कैनवस प्रोफ़ाइलर बंद है. कैनवस वाले पेज को डीबग करने के लिए, चालू करें को दबाएं. इसके बाद, <canvas> कॉल कैप्चर करने के लिए पेज फिर से लोड हो जाएगा:
आपको यह तय करना होगा कि आपको सिर्फ़ एक फ़्रेम कैप्चर करना है या एक के बाद एक फ़्रेम कैप्चर करना है. यहां एक फ़्रेम बिलकुल वैसा ही है जैसा आपको DevTools टाइमलाइन में दिखेगा.
सिंगल फ़्रेम, कॉल को तब तक कैप्चर करता है, जब तक मौजूदा फ़्रेम खत्म नहीं हो जाता और फिर रुक जाता है. वहीं दूसरी ओर, लगातार फ़्रेम पर, सभी <canvas> एलिमेंट के सभी फ़्रेम कैप्चर किए जाते हैं. ऐसा तब तक होता है, जब तक आप उन्हें रुकने के लिए न कहें. आपको कौनसा मोड चुनना है, यह इस बात पर निर्भर करता है कि <canvas> एलिमेंट का इस्तेमाल कैसे किया जा रहा है. किसी चल रहे ऐनिमेशन के लिए, हो सकता है कि आप एक फ़्रेम को कैप्चर करना चाहें. किसी उपयोगकर्ता इवेंट की वजह से ट्रिगर होने वाले छोटे ऐनिमेशन के लिए, हो सकता है कि आपको एक साथ कई फ़्रेम को कैप्चर करना पड़े.
इसके साथ ही, हम कैप्चर करने के लिए पूरी तरह से तैयार हैं!
फ़्रेम कैप्चर करना
कैप्चर करने के लिए, बस शुरू करें दबाएं और अपने ऐप्लिकेशन का इस्तेमाल सामान्य तौर पर करें. कुछ समय बाद DevTools पर वापस जाएं और अगर लगातार कैप्चर किया जा रहा है, तो बंद करें को दबाएं.
अब बाईं ओर दी गई सूची में एक शानदार नई प्रोफ़ाइल है. इसमें <canvas> एलिमेंट में कैप्चर किए गए कॉन्टेक्स्ट कॉल की संख्या दी गई है. प्रोफ़ाइल पर क्लिक करें और आपको एक स्क्रीन दिखाई देगी, जो कुछ इस तरह दिखाई देगी:
नीचे वाले पैनल में, कैप्चर किए गए सभी फ़्रेम की सूची दिखती है. हर फ़्रेम पर क्लिक करने पर, सबसे ऊपर मौजूद स्क्रीनशॉट में आपको उस फ़्रेम के आखिर में मौजूद <canvas> एलिमेंट की स्थिति दिखेगी. अगर आपके पास एक से ज़्यादा <canvas> एलिमेंट हैं, तो स्क्रीनशॉट के ठीक नीचे दिए गए मेन्यू का इस्तेमाल करके चुनें कि इनमें से कौनसा एलिमेंट दिखाया जाए.
फ़्रेम के अंदर आपको कॉल ग्रुप बनाने की सुविधा दिखेगी. हर ड्रॉ कॉल ग्रुप में एक ड्रॉ कॉल होता है जो ग्रुप में आखिरी कॉल होगा. ड्रॉ कॉल क्या होता है? 2D कॉन्टेक्स्ट के लिए clearRect(), drawImage(), fill(), stroke(), putImageData() या टेक्स्ट रेंडर करने वाले किसी भी फ़ंक्शन का फ़ॉर्मैट, WebGL के लिए clear(), drawArrays() या drawElements() होगा. इसमें वे सभी चीज़ें शामिल हैं जिनसे मौजूदा ड्रॉइंग बफ़र के कॉन्टेंट में बदलाव होगा. (अगर आपको ग्राफ़िक नहीं पसंद हैं, तो आप बफ़र को पिक्सल वाले बिट मैप की तरह समझ सकते हैं, जिसमें हम बदलाव कर रहे हैं.)
अब आपको बस सूची में चरण पूरे करने होंगे. आप ऐसा फ़्रेम पर कर सकते हैं, कॉल ग्रुप या कॉल लेवल ड्रॉ कर सकते हैं. आप लिस्ट में चाहे कोई भी तरीका चुनें (और स्क्रीनशॉट के ठीक नीचे बटन होते हैं, जो आपको तेज़ी से नेविगेट करने में मदद करते हैं), आपको उस समय पर कॉन्टेक्स्ट दिखेगा. इसका मतलब है कि गड़बड़ी ठीक करते ही उन्हें तुरंत ढूंढकर ठीक किया जा सकता है.
अंतर पहचानें
एक और काम की सुविधा यह है कि दो कॉल के बीच कौनसी प्रॉपर्टी और वैरिएबल में बदलाव हुआ है.
यह देखने के लिए कि आप साइडबार बटन (
) पर क्लिक करें, एक नया व्यू पॉप-आउट हो जाएगा. ड्रॉ कॉल में आगे बढ़ने पर आपको अपडेट की गई प्रॉपर्टी दिखेंगी. किसी भी बफ़र या कलेक्शन पर कर्सर घुमाने पर, उसका कॉन्टेंट दिखेगा.
अपनी बात सुनें!
अब आपको Chrome के DevTools में कैनवस के काम को डीबग करने का तरीका पता है. अगर आपके पास कैनवस प्रोफ़ाइल टूल के बारे में कोई सुझाव/राय या शिकायत है, तो कृपया गड़बड़ी की शिकायत करें या Chrome DevTools ग्रुप में पोस्ट करें. अगर आपको <canvas> की जांच करते समय कोई गड़बड़ी मिलती है या आपको कुछ और देखना है, तो हमें बताएं. ऐसा इसलिए, क्योंकि डेवलपर के इस्तेमाल और सुझाव, शिकायत या राय की मदद से ही Chrome के टूल बेहतर होते हैं.