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