जब रउरा कवनो कंट्रोलर प्लग करीं त बटन के मैश करीं, लाठी के हिलावत बानी, ट्रिगर खींचत बानी... आ एगो डेवलपर का रूप में रउरा ओहमें से कवनो ना लउकत बा. ब्राउजर एकरा के उठावत बा, पक्का, बाकिर जबले रउरा कंसोल में नंबर लॉग ना करब तबले ई अदृश्य बा. गेमपैड एपीआई के संगे इहे सिरदर्द बा। ई बरिसन से चलत आवत बा, आ असल में ई काफी ताकतवर बा. बटन, लाठी, ट्रिगर, काम पढ़ सकेनी. बाकिर अधिकतर लोग एकरा के ना छूवेला. काहें? काहे कि कवनो प्रतिक्रिया नइखे. डेवलपर टूल में कवनो पैनल ना. कवनो साफ तरीका नइखे कि पता चल सके कि नियंत्रक भी रउरा जवन सोचत बानी ऊ कर रहल बा कि ना. आन्हर उड़ल जइसन लागत बा. जवन हमरा के एतना बग कइलस कि एगो छोट टूल बन गइल: गेमपैड कैस्केड डिबगर। कंसोल आउटपुट के टकटकी लगा के देखे के बजाय, आपके कंट्रोलर के लाइव, इंटरैक्टिव व्यू मिलेला। कुछ दबाईं त ऊ स्क्रीन पर रिएक्ट हो जाला. आ 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 में लेयर के परिभाषित करे के बा त हमनी के पास: /* सबसे कम से सबसे अधिक प्राथमिकता */ @ परत आधार, सक्रिय, डीबग बा;
@ परत आधार { 1999 के बा। /* ... */ के बा। } 1999 में भइल रहे।
@लेयर सक्रिय बा { /* ... */ के बा। } 1999 में भइल रहे।
@लेयर डीबग { 1999 के बा। /* ... */ के बा। } 1999 में भइल रहे।
काहे कि हर परत पूर्वानुमानित रूप से ढेर हो जाला, एहसे रउरा हमेशा पता चलेला कि कवन नियम जीतत बा. ऊ पूर्वानुमान डिबगिंग के ना खाली आसान बना देला, बलुक असल में प्रबंधनीय बना देला. हमनी के समस्या (अदृश्य, गन्दा इनपुट) आ दृष्टिकोण (कैस्केड लेयर के साथ बनल एगो विजुअल डिबगर) के कवर कइले बानी जा। अब हमनी के डिबगर बनावे खातिर स्टेप-बाय-स्टेप प्रक्रिया से गुजरब जा। डिबगर के अवधारणा के बारे में बतावल गइल बा छिपल इनपुट के देखाई देवे के सबसे आसान तरीका बा कि बस ओकरा के स्क्रीन प खींचल जाए। ई डिबगर इहे करेला. बटन, ट्रिगर, आ जॉयस्टिक सभके विजुअल मिल जाला।
ए दबाईं: एगो गोल रोशनी हो जाला। लाठी के धक्का दे दीं : गोल चारों ओर फिसल जाला। आधा रास्ता में ट्रिगर खींच लीं: आधा रास्ता में एगो बार भर जाला।
अब रउरा 0 आ 1 के टकटकी लगा के नइखीं देखत, बलुक असल में कंट्रोलर के लाइव रिएक्ट करत देखत बानी. बेशक, एक बेर जब आप डिफ़ॉल्ट, दबावल, डिबग इन्फो, शायद रिकॉर्डिंग मोड तक जईसन स्टेट प ढेर होखे लागी त सीएसएस बड़ अवुरी जटिल होखे लागेला। उहे ह जहाँ झरना के परत काम आवेला. इहाँ एगो स्ट्रिप्ड-डाउन उदाहरण दिहल गइल बा: @ परत आधार { 1999 के बा। .बटन { 1999 के बा। पृष्ठभूमि: # 222 के बा; सीमा-त्रिज्या: 50% के बा; चौड़ाई: 40px बा; ऊंचाई: 40px बा; } 1999 में भइल रहे। } 1999 में भइल रहे।
@लेयर सक्रिय बा { .बटन.दबा दिहल गइल { पृष्ठभूमि: # 0f0 के बा; /* चमकदार हरे रंग के */ } 1999 में भइल रहे। } 1999 में भइल रहे।
@लेयर डीबग { 1999 के बा। .बटन:: के बाद { सामग्री: attr (डेटा-मूल्य) के बा; फॉन्ट-साइज: 12px बा; रंग: # एफएफएफ के बा; } 1999 में भइल रहे। } 1999 में भइल रहे।
लेयर के क्रम मायने रखेला: आधार → सक्रिय → डिबग।
आधार नियंत्रक के खींच लेला। सक्रिय दबावल राज्य के संभालेला। डीबग ओवरले पर फेंक देला।
एकरा के एह तरह से तोड़ला के मतलब बा कि रउरा अजीबोगरीब विशिष्टता युद्ध नइखीं लड़त. हर परत के आपन जगह होला आ रउरा हमेशा जानत बानी कि का जीतेला. बिल्डिंग इट आउट के बारे में बतावल गइल बा पहिले कुछ परदा पर ले आवल जाव. एकरा के बढ़िया लागे के जरूरत नइखे — बस अस्तित्व के जरूरत बा जेहसे कि हमनी का लगे कुछ काम करे के होखे.
गेमपैड कैस्केड डिबगर
के बाके बा
