Toggle Debug

Oko ngokwenene ziibhokisi nje. Ayinamdla okwangoku, kodwa isinika izibambo zokubamba kamva ngeCSS kunye neJavaScript. Kulungile, ndisebenzisa i-cascade layers apha kuba igcina izinto zicwangcisiwe nje ukuba wongeze amanye amazwe. Nantsi indlela engaqhelekanga:

/* ==================================== I-CASCADE LEERS SETUP Imiba yolandelelwano: isiseko → esebenzayo → ukulungisa ingxaki ===================================== */

/* Chaza ulungelelwaniso lomaleko ngaphambili */ @ isiseko soluhlu, siyasebenza, lungisa iimpazamo;

/* Uluhlu 1: Izitayile ezisisiseko- inkangeleko engagqibekanga */ @ isiseko { .iqhosha { imvelaphi: #333; Umda-radius: 50%; ububanzi: 70px; ubude: 70px; bonisa: flex; thethelela-umxholo: iziko; lungelelanisa-izinto: iziko; }

.nqumama { ububanzi: 20px; ubude: 70px; imvelaphi: #333; bonisa: ibhloko engaphakathi; } }

/* Uluhlu 2: Iimeko ezisebenzayo- iphatha amaqhosha acinezelweyo */ @ umaleko osebenzayo { .iqhosha.elisebenzayo { indawo yangasemva: #0f0; /* Buhlaza obuqaqambileyo xa ucinezelwe */ ukuguqula: isikali(1.1); /* Yandisa kancinane iqhosha */ }

.nqumama.esebenzayo { indawo yangasemva: #0f0; ukuguqula: isikaliY(1.1); /* Izolula ngokuthe nkqo xa icinezelwe */ } }

/* Umaleko wesi-3: Ukulungiswa kwempazamo - ulwazi lomphuhlisi */ @ulungiso lweempazamo { .iqhosha::emva { umxholo: attr(ixabiso ledatha); /* Ibonisa ixabiso lamanani */ ubungakanani befonti: 12px; umbala: #fff; } }

Ubuhle bale ndlela kukuba uluhlu ngalunye lunenjongo ecacileyo. Umaleko wesiseko awunakuze ubhale ngaphezulu osebenzayo, kwaye osebenzayo awunakuze ubhale ngaphezulu i-debug, nokuba yeyiphi na into ethile. Oku kuphelisa iimfazwe ezithile zeCSS ezihlala zibhuqa izixhobo. Ngoku kubonakala ngathi amanye amaqela ahleli kwimvelaphi emnyama. Ukunyaniseka, akukho kubi kakhulu.

Ukongeza iJavaScript Ixesha leJavaScript. Apha kulapho umlawuli eneneni esenza into. Siza kuyenza inyathelo ngenyathelo. Inyathelo loku-1: Misela uLawulo lweSizwe Okokuqala, sifuna izinto eziguquguqukayo ukulandelela imeko ye-debugger: // ===================================== // ULAWULO LWEZWE // =====================================

yeka ukubaleka = bubuxoki; // Ilanda ukuba ingaba idebugger iyasebenza na vumela i-rafId; // Igcina isicelo se-AnimationFrame ID yokurhoxiswa

Ezi ziguquguqukayo zilawula i-animation loop efunda ngokuqhubekayo igalelo le-gamepad. Inyathelo 2: Bamba iiReferensi zeDOM Okulandelayo, sifumana iimbekiselo kuzo zonke izinto ze-HTML esiza kuzihlaziya: // ===================================== // IREferensi ye-DOM ye-DOM // =====================================

const btnA = document.getElementById("btn-a"); const btnB = document.getElementById("btn-b"); const btnX = document.getElementById("btn-x"); const pause1 = document.getElementById("pause1"); const pause2 = document.getElementById("pause2"); const status = document.getElementById("status");

Ukugcina ezi referensi ngaphambili kusebenza ngakumbi kunokubuza i-DOM ngokuphindaphindiweyo. Inyathelo 3: Yongeza i-Keyboard Fallback Kuvavanyo ngaphandle kwesilawuli esibonakalayo, siza kwenza imephu yezitshixo zebhodi yezitshixo kumaqhosha: // ===================================== // I-KEYBOARD FALLBACK (yokuvavanya ngaphandle komlawuli) // =====================================

const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, phumla2] // 'p' isitshixo silawula zombini iibar zokumisa };

Oku kusenza sivavanye i-UI ngokucofa izitshixo kwibhodi yezitshixo. Inyathelo lesi-4: Yenza iLuphu yoHlaziyo oluPhambili Apha kulapho kwenzeka khona umlingo. Lo msebenzi uqhuba ngokuqhubekayo kwaye ufunda imeko ye-gamepad: // ===================================== // INGXELO YOMDLALO WOKUHLAZIYA LOOP // =====================================

uhlaziyo lomsebenziGamepad () { // Fumana zonke iipadi zomdlalo eziqhagamshelweyo const gamepads = navigator.getGamepads (); ukuba (!iiphedi zemidlalo) ziyabuya;

// Sebenzisa i-gamepad yokuqala eqhagamshelweyo const gp = iipadi zokudlala [0];

ukuba (gp) { // Hlaziya iqhosha lithetha ngokucofa iklasi "esebenzayo". btnA.classList.toggle("active", gp.buttons[0].cofaziwe); btnB.classList.toggle("active", gp.buttons[1].cofaziwe); btnX.classList.toggle("active", gp.buttons[2].cofaziwe);

// Bamba iqhosha lokumisa (iqhosha lesalathisi 9 kubalawuli abaninzi) const pauseIcinezelwe = gp.buttons[9].icinezelwe; pause1.classList.toggle("active", pausePressed); pause2.classList.toggle("active", pauseCiniziwe);

// Yakha uluhlu lwamaqhosha acinezelweyo ngoku ukubonisa ubume yeka icinezelwe = []; gp.buttons.forEach((btn, i) => { ukuba (btn.cofaziwe)cofa.tyhala("Iqhosha" + i); });

// Hlaziya isimo sombhalo ukuba nawaphi na amaqhosha acinezelwe ukuba (cofa.ubude > 0) { status.textContent = "Icinezelwe:" + pressed.join(", "); } }

// Qhubeka iluphu ukuba idebugger iyasebenza ukuba (iyabaleka) { rafId = requestAnimationFrame(updateGamepad); } }

Indlela ye classList.toggle () yongeza okanye isusa udidi olusebenzayo ngokusekelwe ekubeni iqhosha licinezelwe, nto leyo eyenza i CSS yethu izimbo. Inyathelo 5: Phatha iMisitho yekhibhodi Aba baphulaphuli bomsitho benza ukuba ikhibhodi ibuyele umva isebenze: // ===================================== // IZIPHATHI ZE-KEYBOARD EVENT // =====================================

document.addEventListener("isitshixo", (e) => { ukuba (isitshixo seMap[e.key]) { // Bamba izinto enye okanye ezininzi ukuba (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("esebenzayo")); } enye { keyMap[e.key].classList.yongeza("esebenzayo"); } status.textContent = "Iqhosha licinezelwe: " + e.key.toUpperCase(); } });

document.addEventListener("isitshixo", (e) => { ukuba (isitshixo seMap[e.key]) { // Susa imo esebenzayo xa isitshixo sikhululiwe ukuba (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("esebenzayo")); } enye { keyMap[e.key].classList.remove("esebenzayo"); } status.textContent = "Iqhosha likhululiwe: " + e.key.toUpperCase(); } });

Inyathelo 6: Yongeza iQalisa/Yeka uLawulo Okokugqibela, sifuna indlela yokuguqula nokuvala i-debugger: // ===================================== // QHUBEKA I-DEBUGGER IVULA/YIVILE // =====================================

document.getElementById("toggle").addEventListener("cofa", () => { ukubaleka = !ukubaleka; // Flip imo esebenzayo

ukuba (iyabaleka) { status.textContent = "Idebugger iyasebenza..."; updateGamepad(); // Qala uhlaziyo lwelophu } enye { status.textContent = "Idebugger ayisebenzi"; cancelAnimationFrame(rafId); // Misa iluphu } });

Ke ewe, cofa iqhosha kwaye liyakhazimla. Tyhala intonga kwaye iyashukuma. Yiyo leyo. Enye into: amaxabiso akrwada. Ngamanye amaxesha ufuna nje ukubona amanani, hayi izibane.

Ngeli nqanaba, kufuneka ubone:

Isilawuli esilula sesikrini, Amaqhosha asabelayo njengoko usebenzisana nawo, kunye Ufundo lolungiso lweempazamo olukhethiweyo olubonisa izalathi zeqhosha elicinezelweyo.

Ukwenza oku kungabonakali kancinci, nantsi idemo ekhawulezayo yesilawuli sesikrini esiphendula ngexesha lokwenyani:

Ngoku, ukucofa uQalisa ukuRekhoda kufakwa yonke into de ube ubethe Yeka ukuRekhoda. 2. Ukuthunyelwa kweDatha kwi-CSV/JSON Nje ukuba sibe nelogi, siya kufuna ukuyigcina.

Thumela ngaphandle iJSON Thumela ngaphandle CSV

Inyathelo 1: Yenza uMncedi wokuKhuphela Okokuqala, sifuna umsebenzi oncedisayo ophethe ukhuphelo lweefayile kwibrawuza: // ===================================== // IFAYILE YOKUKHUPHELA UMNCEDISI // =====================================

umsebenzi wokhuphelo lweFayile(igama lefayile, umxholo, uhlobo = "okubhaliweyo/okucacileyo") { // Yenza iblobhu kumxholo const blob = iBlob entsha ([umxholo], {uhlobo}); const url = URL.createObjectURL(blob);

// Yenza ikhonkco lokukhuphela okwethutyana kwaye ucofe const a = document.createElement("a"); a.href = url; a.download = igama lefayile; a.cofa();

// Coca into ye-URL emva kokukhuphela setTimeout(() => URL.revokeObjectURL(url), 100); }

Lo msebenzi usebenza ngokudala iBlob (into yebhinary enkulu) ukusuka kwidatha yakho, ukuvelisa i-URL yethutyana kuyo, kwaye ucofa ngokucofa ikhonkco lokukhuphela. Ukucoca kuqinisekisa ukuba asivuzi inkumbulo. Inyathelo 2: Phatha iJSON Export I-JSON igqibelele ukugcina ubume bedatha epheleleyo:

// ===================================== // UKUTHUMELA NJENGOKO JSON // =====================================

document.getElementById("export-json").addEventListener("cofa", () => { // Khangela ukuba kukho nantoni na ukuthumela ngaphandle ukuba (!amafreyimu.ubude) { console.warn("Akukho rekhodisho lukhoyo lokuthumela ngaphandle."); buya }

// Yenza umthwalo wokuhlawula ngemethadatha kunye nezakhelo umthwalo ohlawulayo = { yakhiweNge: Umhla omtsha().toISOString(), izakhelo };

// Khuphela ngokufomathiweyo kwe-JSON Khuphela iFayile( "gamepad-log.json", JSON.stringify(umthwalo wokuhlawula, null, 2), "isicelo / json" ); });

Ifomathi ye-JSON igcina yonke into icwangcisiwe kwaye icazululeka ngokulula, iyenza ilungele ukulayishwa kwakhona kwizixhobo ze-dev okanye ukwabelana nabalingane beqela. Inyathelo 3: Phatha i-CSV Export Kuthunyelo ngaphandle kwe-CSV, kufuneka sithambise idatha ye-hierarchical ibe yimigca kunye nekholamu:

//==================================== // UKUTHUMELA NJENGE-CSV // =====================================

document.getElementById("export-csv").addEventListener("cofa", () => { // Khangela ukuba kukho nantoni na ukuthumela ngaphandle ukuba (!amafreyimu.ubude) { console.warn("Akukho rekhodisho lukhoyo lokuthumela ngaphandle."); buya }

// Yakha umqolo weheader ye-CSV (iikholamu zesitampu sexesha, onke amaqhosha, zonke izembe) const headerButtons = izakhelo[0].buttons.map((_, i) => btn${i}); const headerAxes = izakhelo[0].axes.map((_, i) => axis${i}); const header = ["t", ...headerButtons, ...headerAxes].join(",") + "\n";

// Yakha imigca yedatha ye-CSV const imiqolo = izakhelo.map (f => { const btnVals = f.buttons.map(b => b.value); buyisela [f.t, ...btnVals, ...f.axes].join(","); }). dibanisa("\n");

// Khuphela njenge CSV downloadFile("gamepad-log.csv", header + rows, "text/csv"); });

I-CSV ikrelekrele kuhlalutyo lwedatha kuba ivula ngokuthe ngqo kwi-Excel okanye i-Google Sheets, ikuvumela ukuba wenze iitshathi, idatha yokucoca, okanye iipateni zokubona ngokubonakalayo. Ngoku ekubeni amaqhosha athumela ngaphandle engaphakathi, uya kubona ezimbini iinketho ezintsha kwiphaneli: Thumela i-JSON kunye nokuThumela ngaphandle kwe-CSV. I-JSON ilungile ukuba ufuna ukuphosa ilog ekrwada ngasemva kwizixhobo zakho ze-dev okanye ujikeleze isakhiwo. I-CSV, kwelinye icala, ivula ngqo kwi-Excel okanye i-Google Sheets ukuze ukwazi ukutshati, ukuhluza, okanye uthelekise amagalelo. Lo mfanekiso ulandelayo ubonisa ukuba indawo yolawulo ijongeka njani ngolawulo olongezelelweyo.

3. Isishwankathelo System Ngamanye amaxesha awufuni ukurekhodwa ngokupheleleyo, "umfanekiso wesikrini" okhawulezayo weendawo zokungenisa. Kulapho iqhosha lokuthatha i-Snapshot linceda.

Thatha umfanekiso

Kwaye iJavaScript:

// ===================================== // THATHA ISIFANEKISO // =====================================

document.getElementById("snapshot").addEventListener("cofa", () => { // Fumana zonke iipadi zomdlalo eziqhagamshelweyo const pads = navigator.getGamepads (); const activePads = [];

// Londoloza kwaye ubambe imeko ye-gamepad nganye eqhagamshelweyo ye (const gp yeepads) { ukuba (!gp) qhubeka; // Tsiba iindawo zokubeka ezingenanto

activePads.push({ id: gp.id, // Controller name/model isitampu sexesha: performance.now (), amaqhosha: gp.buttons.map(b => ({ icinezelwe: b.icinezelwe, ixabiso: b.xabiso })), izembe: [...gp.axes] }); }

// Jonga ukuba kukho naziphi na iipads ezifunyenweyo ukuba (!activePads.length) { console.warn("Azikho iipads eziqhagamshelwe kwisnapshot."); isilumkiso("Akukho mlawuli ufunyenweyo!"); buya }

// Ngena kwaye wazise umsebenzisi console.log("Snapshot:", activePads); isilumkiso(Umfanekiso okhawulezayo uthathiwe! Uthathiwe ${activePads.length} isilawuli(s).); });

Izifinyezo zimisa eyona meko yomlawuli wakho ngexesha elinye. 4. Ghost Input Replay Ngoku kumnandi: i-ghost input replay. Oku kuthatha ilogi kwaye idlale kwakhona ngokubonakalayo ngokungathi umdlali we-phantom usebenzisa umlawuli.

Phinda udlale uRekhodo lokugqibela

IJavaScript yokuphinda idlalwe: // ===================================== // UKUDLALA KWESIPOrho // =====================================

document.getElementById("replay").addEventListener("cofa", () => { // Qinisekisa ukuba sinokurekhodwa esizakuphinda sikudlale ukuba (!amafreyimu.ubude) { isilumkiso("Akukho rekhodiweyo lokudlala!"); buya }

console.log("Ukuqalisa ukudlala kwakhona kwesiporho...");

// Ukulandelela ixesha lokudlala okungqanyanisiweyo let startTime = performance.now (); vumela isakheloIsalathisi = 0;

// Phinda udlale loop yopopayi umsebenzi inyathelo() { const ngoku = performance.now (); Const elapsed = ngoku - startTime;

// Hlaziya zonke izakhelo ekumele ukuba zenzekile ngoku ngelixa (isakheloIsalathiso < isakhelo.ubude && nezakhelo[frameIndex].t <= idlulile) { const isakhelo = izakhelo[frameIndex];

// Hlaziya i-UI ngeqhosha elirekhodiweyo lithi btnA.classList.toggle("active", frame.buttons[0].cofaziwe); btnB.classList.toggle("active", frame.buttons[1].cofaziwe); btnX.classList.toggle("active", frame.buttons[2].cofaziwe);

// Hlaziya imo yokubonisa yeka icinezelwe = []; frame.buttons.forEach((btn, i) => { ukuba (btn.pressed) cofa.push("Iqhosha" + i); }); ukuba (cofa.ubude > 0) { status.textContent = "Ghost:" + pressed.join(", "); }

isakheloIsalathiso++; }

// Qhubeka iluphu ukuba kukho izakhelo ezininzi ukuba (isakhelo sesalathisi < isakhelo. ubude) { requestAnimationFrame(inyathelo); } enye { console.log("Phinda udlaleugqibile."); status.textContent = "Umdlalo kwakhona ugqityiwe"; } }

// Qala umdlalo kwakhona inyathelo(); });

Ukwenza ukulungisa iimpazamo kube lula ngakumbi, ndongeze i-ghost replay. Nje ukuba urekhode iseshoni, ungabetha i-replay kwaye ubukele i-UI iyenza, phantse njengomdlali we-phantom eqhuba ipad. Iqhosha elitsha le-Replay Ghost livela kwiqela lenjongo yale nto.

Betha Rekhoda, ngcolisa kunye nesilawuli kancinci, yima, emva koko udlale kwakhona. I-UI iphinda yonke into oyenzileyo, njengesiporho esilandela igalelo lakho. Kutheni uzikhathaza ngezi zongezo?

Ukurekhoda / ukuthumela ngaphandle kwenza kube lula kubavavanyi ukubonisa kanye ukuba kwenzeke ntoni. Izifinyezo ziqhwalela okomzuzwana ngexesha, ziluncedo kakhulu xa uleqa iibugs ezingaqhelekanga. Ukuphindaphinda kwesiporho kulungile kwizifundo, ukujonga ukufikeleleka, okanye ukuthelekisa nje ukuseta ulawulo ecaleni.

Okwangoku, ayiseyiyo nje idemo ecocekileyo, kodwa yinto onokuthi uyisebenze. Iimeko zokusetyenziswa kwehlabathi lokwenyani Ngoku sinayo le debugger enokwenza okuninzi. Ibonisa igalelo eliphilayo, iirekhodi zerekhodi, ithumela ngaphandle, kwaye iphinde iphinde idlale izinto. Kodwa umbuzo wokwenyani ngulo: ngubani ngokwenene okhathalayo? Iluncedo kubani? Abaphuhlisi beMidlalo Abalawuli bayinxalenye yomsebenzi, kodwa ukuyilungisa? Ngokuqhelekileyo intlungu. Khawufane ucinge ukuba uvavanya umdlalo wokulwa, njengo ↓ → + punch. Endaweni yokuba uthandaze, uyicinezele ngendlela enye kabini, uyirekhoda kube kanye, uze uyidlale kwakhona. Ugqibile. Okanye utshintshe iilogi ze-JSON kunye neqela elisebenza naye ukujonga ukuba ikhowudi yakho yabadlali abaninzi isabela ngendlela efanayo kumatshini wabo. Oko kukhulu. Iingcali zokuFikelela Le isondele entliziyweni yam. Akuyena wonke umntu odlala kunye nomlawuli "oqhelekileyo". Abalawuli abaguquguqukayo bakhupha iimpawu ezingaqhelekanga ngamanye amaxesha. Ngesi sixhobo, unokubona kanye oko kwenzekayo. Ootitshala, abaphandi, nabani na. Banokuthi babambe izigodo, bazithelekise, okanye baphinde badlale amagalelo ecaleni-ngecala. Ngequbuliso, izinto ezingabonakaliyo ziba sobala. Uvavanyo loQinisekiso loMgangatho Abavavanyi bahlala bebhala amanqaku afana nokuthi "Ndicole amaqhosha apha kwaye ophuka." Ayiluncedo kakhulu. Ngoku? Banokuthi babambe oomatshini bokushicilela kanye, bathumele ilog, kwaye bayithumele ngaphandle. Akukho ukuqikelela. Abafundisi Ukuba wenza ii-tutorials okanye iividiyo zeYouTube, ukuphindaphinda kwesiporho yigolide. Unokuthi ngokwenyani, "Nantsi into endiyenzileyo ngomlawuli," ngelixa i-UI ibonisa ukuba iyenzeka. Wenza iingcaciso zicace ngakumbi. Ngaphandle kweMidlalo Kwaye ewe, oku akukho malunga nemidlalo kuphela. Abantu basebenzise abalawuli kwiirobhothi, iiprojekthi zobugcisa, kunye nokufikelela kujongano. Umba ofanayo ngalo lonke ixesha: sibona ntoni isikhangeli? Ngale nto, akufuneki uqikelele. Ukuqukumbela Ukulungiswa kweempazamo kwigalelo lomlawuli bekusoloko kuvakala ngathi kubhabha ubumfama. Ngokungafaniyo ne-DOM okanye i-CSS, akukho mhloli owakhelwe-ngaphakathi weepads zomdlalo; ngamanani akrwada kwi-console, alahleka ngokulula kwingxolo. Ngamakhulu ambalwa emigca yeHTML, CSS, kunye neJavaScript, sakhe into eyahlukileyo:

I-debugger ebonakalayo eyenza amagalelo angabonakaliyo abonakale. Inkqubo ye-CSS enemaleko egcina i-UI icocekile kwaye ihlaziywa. Iseti yezixhasi (ukurekhoda, ukuthumela ngaphandle, iifoto ezikhawulezayo, ukudlala kwakhona kwesiporho) eziphakamisayo ukusuka kwidemo ukuya kwisixhobo sophuhlisi.

Le projekthi ibonisa ukuba ungahamba kangakanani ngokuxuba amandla e-Web Platform kunye nobuchule obuncinci kwi-CSS Cascade Layers. Isixhobo endisandula ukusichaza sisonke sivulekile-umthombo. Unokwenza i-repo ye-GitHub kwaye uzame yona. Kodwa okona kubalulekileyo, ungayenza ibe yeyakho. Yongeza ezakho iileya. Yakha eyakho ingqiqo yokudlala kwakhona. Yidibanise neprototype yakho yomdlalo. Okanye ndiyisebenzise ngendlela endingakhange ndiyicinge. Ukufundisa, ukufikeleleka, okanye uhlalutyo lwedatha. Ekupheleni kosuku, oku akukona nje ukulungisa iipads zomdlalo. Kumalunga nokukhanyisa amagalelo afihliweyo, kunye nokunika abaphuhlisi ukuzithemba ekusebenzeni ngehardware leyo iwebhu ayikayamkeli ngokupheleleyo. Ke, coca kwisilawuli sakho, vula umhleli wakho, kwaye uqalise ukuzama. Unokumangaliswa kukuba yintoni ibrawuza yakho kunye neCSS yakho enokuyenza ngokwenene.

You May Also Like

13 Trending Songs on TikTok in March 2026 (+ How to Use Them)

Our Best AI PM Workflows for Prototyping, Strategy, and Personal OS (2026)

China’s Cybersecurity Agency Issues Security Warning About OpenClaw