Chrome DevTools का इस्तेमाल करके कैनवस की जांच करना

परिचय

इससे कोई फ़र्क़ नहीं पड़ता कि 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, दोनों कॉन्टेक्स्ट के साथ काम करता है. इसलिए, इनमें से किसी भी कॉन्टेक्स्ट का इस्तेमाल करने पर, आपको तुरंत डीबग करने से जुड़ी काम की जानकारी मिल सकती है.

शुरू करें

शुरू करने के लिए, Chrome में about:flags पर जाएं और “डेवलपर टूल के लिए एक्सपेरिमेंट चालू करें” को चालू करें

इसके बाद, DevTools पर जाएं और सबसे नीचे दाएं कोने में मौजूद, कॉग पर क्लिक करें. इसके बाद, एक्सपेरिमेंट पर जाएं और कैनवस की जांच की सुविधा चालू करें:

बदलाव लागू करने के लिए, आपको DevTools को बंद करके फिर से खोलना होगा. इसके लिए, Alt+R या Option+R का इस्तेमाल किया जा सकता है.

DevTools के फिर से खुलने पर, प्रोफ़ाइल सेक्शन पर जाएं. इसके बाद, आपको कैनवस प्रोफ़ाइलर का नया विकल्प दिखेगा.

सबसे पहले, आपको दिखेगा कि Canvas Profiler बंद है. जब आपके पास ऐसा पेज हो जिसमें मौजूद कैनवस को डीबग करना है, तो चालू करें दबाएं. इसके बाद, पेज फिर से लोड हो जाएगा और <canvas> कॉल कैप्चर करने के लिए तैयार हो जाएगा:

आपको यह तय करना होगा कि आपको एक फ़्रेम कैप्चर करना है या एक के बाद एक कई फ़्रेम. यह भी तय करना होगा कि फ़्रेम, DevTools की टाइमलाइन में दिखने वाले फ़्रेम जैसा ही हो.

सिंगल फ़्रेम, मौजूदा फ़्रेम के खत्म होने तक कॉल कैप्चर करता है. इसके बाद, यह रुक जाता है. दूसरी ओर, एक के बाद एक फ़्रेम, तब तक सभी <canvas> एलिमेंट के सभी फ़्रेम कैप्चर करता है, जब तक कि आप उसे रोकने का निर्देश नहीं देते. आपको कौनसा मोड चुनना है, यह इस बात पर निर्भर करता है कि <canvas> एलिमेंट का इस्तेमाल कैसे किया जा रहा है. किसी चल रहे ऐनिमेशन के लिए, हो सकता है कि आप एक फ़्रेम कैप्चर करना चाहें. उपयोगकर्ता इवेंट के जवाब में होने वाले छोटे ऐनिमेशन के लिए, आपको लगातार फ़्रेम कैप्चर करने पड़ सकते हैं.

अब हम सेट अप हो चुके हैं और वीडियो रिकॉर्ड करने के लिए तैयार हैं!

फ़्रेम कैप्चर करना

अपने ऐप्लिकेशन का इस्तेमाल करते हुए वीडियो रिकॉर्ड करने के लिए, शुरू करें बटन दबाएं. इसके बाद, अपने ऐप्लिकेशन का इस्तेमाल सामान्य तौर पर करें. कुछ समय बाद, DevTools पर वापस जाएं. अगर लगातार कैप्चर किया जा रहा है, तो रोकें दबाएं.

अब बाईं ओर मौजूद सूची में, आपके पास एक नई प्रोफ़ाइल होगी. इसमें सभी <canvas> एलिमेंट में कैप्चर किए गए कॉन्टेक्स्ट कॉल की संख्या भी दिखेगी. प्रोफ़ाइल पर क्लिक करने पर, आपको एक स्क्रीन दिखेगी. यह कुछ इस तरह दिखती है:

सबसे नीचे मौजूद पैनल में, आपको कैप्चर किए गए सभी फ़्रेम की सूची दिखेगी. इन पर क्लिक करके, फ़्रेम के क्रम में आगे-पीछे किया जा सकता है. हर फ़्रेम पर क्लिक करने पर, सबसे ऊपर मौजूद स्क्रीनशॉट में उस फ़्रेम के आखिर में <canvas> एलिमेंट की स्थिति दिखेगी. अगर आपके पास एक से ज़्यादा <canvas> एलिमेंट हैं, तो स्क्रीनशॉट के ठीक नीचे मौजूद मेन्यू का इस्तेमाल करके, यह चुना जा सकता है कि कौनसा एलिमेंट दिखाया जाए.

फ़्रेम में आपको ड्रॉ कॉल ग्रुप दिखेंगे. हर ड्रॉ कॉल ग्रुप में एक ड्रॉ कॉल होता है, जो उस ग्रुप का आखिरी कॉल होगा. ड्रॉ कॉल क्या है? 2D कॉन्टेक्स्ट के लिए, clearRect(), drawImage(), fill(), stroke(), putImageData() या टेक्स्ट रेंडरिंग फ़ंक्शन जैसे फ़ंक्शन इस्तेमाल किए जा सकते हैं. वहीं, WebGL के लिए clear(), drawArrays() या drawElements() जैसे फ़ंक्शन इस्तेमाल किए जा सकते हैं. यह ऐसी कोई भी चीज़ है जिससे ड्रॉइंग बफ़र के मौजूदा कॉन्टेंट में बदलाव होता है. (अगर आपको ग्राफ़िक्स की जानकारी नहीं है, तो बफ़र को ऐसे बिटमैप के तौर पर देखें जिसमें ऐसे पिक्सल हैं जिनमें हम बदलाव कर रहे हैं.)

अब आपको बस सूची में जाकर, अपने हिसाब से क्रम से लगाना है. ऐसा फ़्रेम, ड्रॉ कॉल ग्रुप या कॉल लेवल पर किया जा सकता है. सूची में किसी भी तरह से आगे बढ़ने पर, आपको उस कॉन्टेक्स्ट में जानकारी दिखेगी. स्क्रीनशॉट के ठीक नीचे, नेविगेट करने में मदद करने वाले बटन मौजूद हैं. इसका मतलब है कि गड़बड़ियां होने पर, उन्हें तुरंत ढूंढा और ठीक किया जा सकता है.

अंतर का पता लगाएं

एक और मददगार सुविधा यह है कि यह देखा जा सकता है कि दो कॉल के बीच कौनसी प्रॉपर्टी और वैरिएबल बदले हैं.

यह देखने के लिए कि आप बस साइडबार बटन () पर क्लिक करें और एक नया व्यू पॉप आउट होगा. ड्रॉ कॉल के दौरान, आपको अपडेट की गई प्रॉपर्टी दिखेंगी. किसी भी बफ़र या ऐरे पर कर्सर घुमाने पर, उसका कॉन्टेंट दिखेगा.

अपनी बात सुनें!

अब आपको Chrome के DevTools में अपने कैनवस वर्क को डीबग करने का तरीका पता है. अगर आपको कैनवस प्रोफ़ाइलर टूल के बारे में कोई सुझाव/राय देनी है या शिकायत करनी है, तो कृपया गड़बड़ी की शिकायत करें या Chrome DevTools ग्रुप में पोस्ट करें. अगर आपको <canvas> की जांच करते समय कोई गड़बड़ी मिलती है या आपको कुछ और देखना है, तो हमें बताएं. डेवलपर के इस्तेमाल और सुझावों से ही Chrome के टूल बेहतर होते हैं.