जखन कोनो कंट्रोलर प्लग करैत छी त बटन मैश करैत छी, लाठी के हिलाबैत छी, ट्रिगर खींचैत छी... आओर एकटा डेवलपर के रूप मे अहां के ओहि मे सं किछ नहिं देखय लेल मिलैत अछि. ब्राउज़र एकरा उठा रहल अछि, निश्चित, मुदा जा धरि अहाँ कंसोल मे नंबर लॉग नहि क’ रहल छी, ई अदृश्य अछि. गेमपैड एपीआई के संग माथ दर्द इएह अछि. ई सालों स’ चलि रहल अछि, आ वास्तव मे ई काफी शक्तिशाली अछि. बटन, लाठी, ट्रिगर, काज पढ़ि सकैत छी। मुदा बेसी लोक एकरा छूबैत नहि छथि. किएक? कारण, कोनो प्रतिक्रिया नहिं. डेवलपर टूल मे कोनो पैनल नहि। कोनो स्पष्ट तरीका नहि जे ई जानय के जे नियंत्रक त’ अहाँक विचार के काज तक क’ रहल अछि कि नहि. आन्हर उड़ब सन लगैत अछि। जे हमरा एतेक बग केलक जे एकटा छोट सन टूल बनेलहुं: गेमपैड कैस्केड डिबगर. कंसोल आउटपुट पर टकटकी लगा क देखबाक बजाय अहां कए कंट्रोलर क लाइव, इंटरैक्टिव व्यू भेटैत अछि । किछु दबाउ आ ओ स्क्रीन पर रिएक्ट करैत अछि। आ CSS Cascade Layers के संग, स्टाइल व्यवस्थित रहैत अछि, तें डिबग करब साफ अछि. एहि पोस्ट मे हम अहाँ केँ देखाएब जे नियंत्रक केँ डिबग करब एतेक दर्द किएक अछि, सीएसएस एकरा साफ करबा मे कोना मदद करैत अछि, आ अहाँ अपन प्रोजेक्ट लेल कोना पुन: उपयोग योग्य विजुअल डिबगर बना सकैत छी.
भले ही अहां सभ के लॉग क’ सकय छी, मुदा अहां के जल्दीए अपठनीय कंसोल स्पैम के संग खतम भ’ जाएत. जेना : १. [0,0,1,0,0,0.5,0,...]। [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
कोन बटन दबाओल गेल से कहि सकैत छी? शायद, मुदा आँखि मे तनाव आ किछु इनपुट छूटलाक बाद मात्र। त’, नहिं, जखन इनपुट पढ़बाक बात अबैत अछि त’ डिबगिंग आसानी सं नहिं होइत छैक. समस्या 3 : संरचना के अभाव भले ही अहाँ एकटा त्वरित विजुअलाइजर एक संग फेकब, मुदा स्टाइल जल्दीए गन्दा भ सकैत अछि। डिफ़ॉल्ट, सक्रिय, आओर डिबग स्थिति ओवरलैप भ' सकैत अछि, आओर बिना स्पष्ट संरचना के, अहां के CSS भंगुर भ' जाइत अछि आओर विस्तार करब कठिन भ' जाइत अछि. CSS Cascade Layers मदद क सकैत अछि. ओ सब शैली के “लेयर” में समूहबद्ध करैत छथि जे प्राथमिकता के हिसाब स’ क्रमबद्ध होइत अछि, तें अहाँ विशिष्टता स’ लड़ब आ अनुमान लगाबब छोड़ि दैत छी, “हमर डिबग स्टाइल किएक नहि देखा रहल अछि?” बल्कि, अहाँ अलग-अलग चिंता के कायम रखैत छी:
आधार : नियंत्रक के मानक, प्रारंभिक रूप | सक्रिय: दबाएल गेल बटन आ स्थानांतरित छड़ीक लेल हाइलाइट। डिबग: डेवलपरक लेल ओवरले (जैना, संख्यात्मक रीडआउट, गाइड, आओर एहि तरहक)।
जँ हम एहि अनुसार CSS मे लेयर परिभाषित करब त’ हमरा सभ लग: /* सबसँ कम सँ बेसी प्राथमिकता */ @ परत आधार, सक्रिय, डिबग;
@ परत आधार { /* ... */ } .
@ परत सक्रिय { /* ... */ } .
@ परत डिबग { /* ... */ } .
कारण जे प्रत्येक लेयर पूर्वानुमानित रूप सं ढेर भ जाइत अछि, अहां के हमेशा पता रहैत अछि जे कोन नियम जीतैत अछि. ओ पूर्वानुमान डिबगिंग क॑ खाली आसान नै बनाबै छै, बल्कि वास्तव म॑ प्रबंधनीय बनाबै छै । हम समस्या (अदृश्य, गन्दा इनपुट) आ दृष्टिकोण (कैस्केड लेयर के संग बनल एकटा दृश्य डिबगर) के कवर केने छी. आब हम डिबगर बनेबाक लेल स्टेप-बाय-स्टेप प्रक्रिया पर चलब. डिबगर अवधारणा छिपल इनपुट क॑ दिखाई दै के सबसें आसान तरीका छै कि बस ओकरा स्क्रीन प॑ आकर्षित करलऽ जाय । ई डिबगर त’ एहने काज करैत अछि। बटन, ट्रिगर, आ जॉयस्टिक सब के एकटा विजुअल भेटैत अछि.
क दबाउ : एकटा घेरा जरि जाइत अछि। लाठीकेँ धक्का दियौक : घेरा चारू कात फिसलैत अछि । एकटा ट्रिगर आधा खींचू : एकटा बार आधा रास्ता भरि जाइत अछि।
आब अहाँ 0 आ 1 पर टकटकी लगा क’ नहि देखैत छी, बल्कि वास्तव मे कंट्रोलर के लाइव रिएक्ट करैत देख रहल छी. बेशक, एक बेर जखन अहाँ डिफ़ॉल्ट, प्रेस, डिबग इन्फो, शायद रिकॉर्डिंग मोड सेहो जेहन स्टेट पर पाइलिंग शुरू क' दैत छी, तखन सीएसएस पैघ आ जटिल होबय लगैत अछि. ओतहि झरना परत काज अबैत छैक । एकटा स्ट्रिप्ड-डाउन उदाहरण एतय देल गेल अछि: @ परत आधार { .बटन { 1। पृष्ठभूमि: # 222; सीमा-त्रिज्या: 50%; चौड़ाई: 40px; ऊंचाई: 40px; } . } .
@ परत सक्रिय { .बटन.दबा देल गेल { पृष्ठभूमि: # 0f0; /* चमकदार हरे रंग के */ } . } .
@ परत डिबग { .बटन::के बाद { सामग्री: attr (डेटा-मूल्य); फॉन्ट-आकार: 12px; रंग: # fff; } . } .
परत क्रम मायने रखैत अछि: आधार → सक्रिय → डिबग.
आधार नियंत्रक खींचैत अछि। सक्रिय संभाल दबाएल राज्य। डिबग ओवरले पर फेंकैत अछि।
एकरा एहि तरहेँ तोड़बाक मतलब अछि जे अहाँ अजीब विशिष्टता युद्ध नहि लड़ि रहल छी. प्रत्येक परत के अपन जगह होइत छैक, आ अहाँ सदिखन जनैत छी जे की जीतैत अछि। बिल्डिंग इट आउट पहिने किछु पर्दा पर आनि ली। एकरा नीक देखय के जरूरत नहिं — बस अस्तित्व के जरूरत अछि जाहि सं हमरा सभ के किछु काज करय के अछि.
गेमपैड झरना डिबगर
