Toggle Debug

Ndizvo chaizvo mabhokisi chete. Hazvinakidze parizvino, asi zvinotipa zvibato zvekubata gare gare neCSS neJavaScript. Zvakanaka, ndiri kushandisa cascade layers pano nekuti inochengeta zvinhu zvakarongeka kana wawedzera dzimwe nyika. Heino danho rakashata:

/* =================================== CASCADE LAERS SETUP Odha zvinhu: base → inoshanda → debug ==================================== */

/* Tsanangura layer yekurongeka pamberi */ @layer base, inoshanda, debug;

/* Layer 1: Base masitayipi - default kutaridzika */ @layer base { .bhatani { kumashure: #333; muganhu-radius: 50%; hupamhi: 70px; kureba: 70px; kuratidza: flex; justify-content: centre; align-zvinhu: pakati; }

.kumbomira { upamhi: 20px; kureba: 70px; kumashure: #333; kuratidza: inline-block; } }

/* Layer 2: Active states - inobata mabhatani akadzvanywa */ @layer inoshanda { .button.active { kumashure: #0f0; /* Yakasvibirira yakasvibirira kana yakadzvanywa */ shandura: chiyero(1.1); /* Inowedzera bhatani zvishoma */ }

.pause.active { kumashure: #0f0; shandura: scaleY(1.1); /* Inotambanudza yakamira kana yakadzvanywa */ } }

/* Layer 3: Debug overlays - ruzivo rwekuvandudza */ @layer debug { .button::after { zvemukati: attr(data-value); /* Inoratidza kukosha kwenhamba */ saizi yefonti: 12px; ruvara: #fff; } }

Kunaka kweiyi nzira ndeyokuti chidimbu chimwe nechimwe chine chinangwa chakajeka. Iyo base layer haingafe yakapfuura inoshanda, uye inoshanda haingafe yakapfuura debug, zvisinei nehunhu. Izvi zvinobvisa iyo CSS chaiyo hondo dzinowanzotambudza maturusi ekugadzirisa. Ikozvino zvinoita sekunge mamwe masumbu akagara pane yakasviba kumashure. Kutendeseka, kwete zvakanyanya kuipa.

Kuwedzera JavaScript JavaScript nguva. Apa ndipo apo mutongi anoita chimwe chinhu. Isu tichagadzira iyi nhanho nhanho. Danho 1: Gadzira State Management Kutanga, isu tinoda zvinosiyana kuti titarise mamiriro e debugger: // =================================== // KUTUNGAMIRIRA KWENYIKA // ===================================

rega kumhanya = nhema; // Inotarisa kana debugger iri kushanda let rapId; // Inochengeta chikumbiro cheAnimationFrame ID yekukanzura

Aya akasiyana anodzora animation loop inoramba ichiverenga gamepad yekupinda. Nhanho 2: Bata DOM References Tevere, tinowana mareferensi kune ese eHTML zvinhu zvatichave tichivandudza: // =================================== // DOM Element REFERENCES // ===================================

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");

Kuchengeta aya mareferensi kumberi kunoshanda kupfuura kubvunza DOM kakawanda. Nhanho 3: Wedzera Kiyibhodhi Fallback Kuti tiedze pasina chidzori chemuviri, tichamepu makiyi ekhibhodi kumabhatani: // =================================== // KEYBOARD FALLBACK (yekuyedza pasina mutongi) // ===================================

const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // 'p' kiyi inodzora mabhawa ekumbomira ese ari maviri };

Izvi zvinoita kuti tiedze iyo UI nekudzvanya makiyi pane keyboard. Nhanho 4: Gadzira Iyo Main Update Loop Apa ndipo panoitika mashiripiti. Iri basa rinomhanya risingaperi uye rinoverenga gamepad state: // =================================== // MAIN GAMEPAD UPDATE LOOP // ===================================

basa updateGamepad() { // Tora ese akabatana gamepads const gamepads = navigator.getGamepads(); kana (!gamepads) dzoka;

// Shandisa yekutanga yakabatana gamepad const gp = gamepads[0];

kana (gp) { // Gadziridza bhatani rinotaura nekushandura iyo "inoshanda" kirasi btnA.classList.toggle("active", gp.buttons[0].pressed); btnB.classList.toggle("active", gp.buttons[1].pressed); btnX.classList.toggle("active", gp.buttons[2].pressed);

// Bata kumbomira bhatani (bhatani index 9 pane akawanda controller) const pausePressed = gp.buttons[9].yakadzvanywa; pause1.classList.toggle("active", pausePressed); pause2.classList.toggle("active", pausePressed);

// Gadzira runyoro rwemabhatani akadzvanywa parizvino ekuratidzira chimiro rega kudzvanywa = []; gp.buttons.forEach((btn, i) => { kana (btn.pressed)pressed.push("Button" + i); });

// Gadziridza chimiro chinyorwa kana chero mabhatani akatsikirirwa kana (pressed.length> 0) { status.textContent = "Vakadzvanywa: " + pressed.join(", "); } }

// Enderera loop kana debugger iri kushanda kana (kumhanya) { rafId = requestAnimationFrame(updateGamepad); } }

Iyo classList.toggle() nzira inowedzera kana kubvisa kirasi inoshanda zvichienderana nekuti bhatani rakadzvanywa, izvo zvinotanga yedu CSS layer masitaera. Danho 5: Bata Keyboard Zviitiko Ava vateereri vechiitiko vanoita kuti keyboard inodzokera shure ishande: // =================================== // KEYBOARD EVENT HANDLERS // ===================================

document.addEventListener("keydown", (e) => { kana (keyMap[e.kiyi]) { // Bata imwechete kana akawanda zvinhu kana (Array.isArray(keyMap[e.kiyi])) { keyMap[e.key].forEach(el => el.classList.add("active"); } zvimwe { keyMap[e.key].classList.add("active"); } status.textContent = "Kiyi yakadzvanywa: " + e.key.toUpperCase(); } });

document.addEventListener("keyup", (e) => { kana (keyMap[e.kiyi]) { // Bvisa inoshanda kana kiyi yaburitswa kana (Array.isArray(keyMap[e.kiyi])) { keyMap[e.key].forEach(el => el.classList.remove("inoshanda"); } zvimwe { keyMap[e.key].classList.remove("inoshanda"); } status.textContent = "Kiyi yaburitswa: " + e.key.toUpperCase(); } });

Danho 6: Wedzera Kutanga / Kumisa Kudzora Chekupedzisira, isu tinoda nzira yekuchinjisa debugger nekudzima: // =================================== // TOGGLE DEBUGGER ON/OFF // ===================================

document.getElementById("toggle").addEventListener("tinya", () => { kumhanya = !kumhanya; // Flip iyo inomhanya mamiriro

kana (kumhanya) { status.textContent = "Debugger iri kushanda..."; updateGamepad(); // Tanga iyo yekuvandudza loop } zvimwe { status.textContent = "Debugger haishande"; kanzuraAnimationFrame(rafId); // Kumisa loop } });

Saka hongu, dzvanya bhatani uye rinopenya. Sunda tsvimbo uye inofamba. Ndizvo. Chimwezve chinhu: mbishi tsika. Dzimwe nguva unongoda kuona nhamba, kwete mwenje.

Panguva ino, unofanira kuona:

Iyo iri nyore pa-screen controller, Mabhatani anoita sezvaunosangana navo, uye Kuverengera kusinga gadziriswe kunoratidza kudzvanywa mabhatani indices.

Kuita kuti izvi zvisanyanya kujeka, heino kukurumidza demo ye-on-screen controller inoita munguva chaiyo:

Zvino, kudzvanya Tanga Kurekodha matanda zvese kusvika warova Stop Recording. 2. Kutumira Data kune CSV/JSON Kana tave nerogi, isu tichada kuichengeta.

Export JSON Export CSV

Danho 1: Gadzira The Download Mubatsiri Kutanga, isu tinoda basa rekubatsira rinobata kurodha mafaira mubrowser: // =================================== // FILE DOWNLOAD MUBATSI // ===================================

basa downloadFile(zita refaira, zvirimo, mhando = "zvinyorwa/plain") { // Gadzira blob kubva pane zviri mukati const blob = new Blob ([zviri mukati], {rudzi}); const url = URL.createObjectURL(blob);

// Gadzira yenguva pfupi yekurodha link uye tinya iyo const a = document.createElement("a"); a.href = url; a.download = filename; a.click();

// Chenesa chinhu URL mushure mekurodha setTimeout(() => URL.revokeObjectURL(url), 100); }

Iri basa rinoshanda nekugadzira Blob (binary hombe chinhu) kubva kudata rako, kugadzira URL yechinguvana kwairi, uye nekudzvanya zvakarongwa link yekurodha. Kucheneswa kunovimbisa kuti hatiburitse ndangariro. Nhanho 2: Bata JSON Export JSON yakanakira kuchengetedza iyo yakazara data chimiro:

// =================================== // EXPORT AS JSON // ===================================

document.getElementById("export-json").addEventListener("tinya", () => { // Tarisa kana paine chero chinhu chekutumira kunze kana (!frames.length) { console.warn("Hapana rekodhi iripo yekutumira kunze."); return; }

// Gadzira mubhadharo une metadata uye mafuremu const payload = { yakagadzirwaPa: new Date().toISOString(), mafuremu };

// Dhawunirodha seyakarongwa JSON downloadFile( "gamepad-log.json", JSON.stringify(payload, null, 2), "application/json" ); });

Iyo JSON fomati inochengeta zvese zvakarongeka uye zviri nyore kupatsanurwa, zvichiita kuti ive yakakodzera kurodha kumashure mumidziyo yedev kana kugovera nevatambi vechikwata. Nhanho 3: Bata CSV Export Kune CSV inotengeswa kunze kwenyika, isu tinofanirwa kudzikamisa iyo hierarchical data kuita mitsara nemakoramu:

//==================================== // EXPORT AS CSV // ===================================

document.getElementById("export-csv").addEventListener("tinya", () => { // Tarisa kana paine chero chinhu chekutumira kunze kana (!frames.length) { console.warn("Hapana rekodhi iripo yekutumira kunze."); return; }

// Vaka CSV musoro mutsara (makoramu echitambi chenguva, mabhatani ese, ese mademo) const headerButtons = mafuremu[0].buttons.map((_, i) => btn${i}); const headerAxes = mafuremu[0].axes.map((_, i) => axis${i}); const header = ["t", ...headerButtons, ...headerAxes].join(",") + "\n";

// Vakai CSV data mitsara const mitsara = mafuremu.map(f => { const btnVals = f.buttons.map(b => b.value); return [f.t, ...btnVals, ...f.axes].join(","); }).join("\n");

// Dhawunirodha se CSV downloadFile("gamepad-log.csv", musoro + mitsara, "zvinyorwa/csv"); });

CSV ine hungwaru pakuongorora dhata nekuti inovhura yakananga muExcel kana Google Sheets, ichikutendera kuti ugadzire machati, data rekusefa, kana mapatani ekuona. Iye zvino mabhatani ekutumira kunze ari mukati, iwe uchaona maviri matsva sarudzo pane pani: Export JSON uye Export CSV. JSON yakanaka kana iwe uchida kukanda iyo yakasvibira danda kumashure mumidziyo yako ye dev kana kutenderedza chimiro. CSV, kune rumwe rutivi, inovhura yakananga muExcel kana Google Sheets kuitira kuti ugone kuchata, kusefa, kana kuenzanisa zvinopinda. Mufananidzo unotevera unoratidza kuti pani inotaridzika sei neaya ekuwedzera ekudzora.

3. Snapshot System Dzimwe nguva haudi kurekodha kuzere, kungokurumidza "screenshot" yematunhu ekuisa. Ndipo panobatsira bhatani reKutora Snapshot.

Tora Mufananidzo

Uye JavaScript:

// =================================== // Tora SNAPSHOT // ===================================

document.getElementById("snapshot").addEventListener("tinya", () => { // Tora ese akabatana gamepads const pads = navigator.getGamepads(); const activePads = [];

// Loop kuburikidza uye ubate mamiriro ega rega rakabatana gamepad ye (const gp yemapadhi) { kana (!gp) enderera; // Svetuka nzvimbo dzisina chinhu

activePads.push({ id: gp.id, // Controller name/model timestamp: performance.now(), mabhatani: gp.buttons.map(b => ({ kudzvinyirirwa: b.kudzvinyirirwa, kukosha: b.value })), mbezo: [...gp.axes] }); }

// Tarisa kana paine ma gamepads akawanikwa kana (!activePads.length) { console.warn("Hapana magamepads akabatana nesnapshot."); chenjedzo ("Hapana mutongi aonekwa!"); return; }

// Log uye zivisa mushandisi console.log("Snapshot:", activePads); chenjedzo });

Snapshots inoomesa iyo chaiyo mamiriro emutongi wako panguva imwe chete munguva. 4. Ghost Input Replay Ikozvino kune iyo inonakidza: ghost input replay. Izvi zvinotora danda uye kuriridza kumashure senge fantom mutambi ari kushandisa controller.

Replay Last Recording

JavaScript yekudzokorora: // =================================== // GHOST REPLAY // ===================================

document.getElementById("replay").addEventListener("tinya", () => { // Ita shuwa kuti tine rekodhi rekutamba zvakare kana (!frames.length) { alert("Hapana kurekodha kuti udzokorore!"); return; }

console.log("Kutanga ghost replay...");

// Tevera nguva yekutamba kwakawiriraniswa regai startTime = performance.now (); regai frameIndex = 0;

// Replay animation loop basa danho() { const now = performance.now(); const elapsed = now - startTime;

// Gadzirisa mafuremu ese aifanira kunge akaitika parizvino apo (frameIndex < frames.length && mafuremu[frameIndex].t <= yapfuura) { const frame = mafuremu [frameIndex];

// Gadziridza UI neyakarekodhwa bhatani btnA.classList.toggle("active", frame.buttons[0].pressed); btnB.classList.toggle("active", frame.buttons[1].pressed); btnX.classList.toggle("active", frame.buttons[2].pressed);

// Gadziridza chimiro chekuratidzira rega kudzvanywa = []; frame.buttons.forEach((btn, i) => { kana (btn.pressed) yakadzvanywa.push("Button" + i); }); kana (pressed.length> 0) { status.textContent = "Ghost:" + pressed.join(", "); }

frameIndex++; }

// Ramba chiuno kana paine mamwe mafuremu kana (frameIndex < frames.length) { requestAnimationFrame(danho); } zvimwe { console.log("Replayapedza."); status.textContent = "Kutambazve kwapera"; } }

// Tanga replay nhanho (); });

Kuita kuti debugging iwedzere maoko-on, ndakawedzera ghost replay. Paunenge uchinge warekodha chikamu, unogona kurova replay uye woona iyo UI ichizviita, kunge mutambi wephantom ari kumhanyisa padhi. Bhatani idzva reReplay Ghost rinoratidza mupaneru yeizvi.

Rova Rekodha, kanganisa kutenderedza nemutongi zvishoma, mira, wozodzokorora. Iyo UI inongodzokorora zvese zvawakaita, kunge chipoko chinotevera zvaunopinza. Sei uchinetseka nezvekuwedzera izvi?

Kurekodha / kutumira kunze kunoita kuti zvive nyore kune vanoedza kuratidza chaizvo zvakaitika. Snapshots inoomesa chinguva munguva, inobatsira zvakanyanya paunenge uchidzingirira zvisinganzwisisike tsikidzi. Ghost replay yakanakira tutorials, macheki ekuwanika, kana kungoenzanisa setups padivi nepadivi.

Panguva ino, haingori demo rakatsvinda zvakare, asi chimwe chinhu chaunogona kunyatso shandisa. Real-World Use Cases Iye zvino tine debugger iyi inogona kuita zvakawanda. Inoratidza mhenyu yekuisa, inorekodha matanda, inoatumira kunze, uye inotodzokorodza zvinhu. Asi mubvunzo chaiwo ndewekuti: ndiani ane hanya chaizvo? Izvi zvinobatsira ani? Game Developers Vatongi chikamu chebasa, asi kuvagadzirisa? Kazhinji kurwadziwa. Fungidzira kuti uri kuyedza kurwa mutambo combo, senge ↓ → + punch. Pane kuti unyengetere, wakaidzvanya kaviri, unorekodha kamwe chete, woidzokorora. Ndapedza. Kana kuti unochinjanisa matanda eJSON newaunoshanda naye kuti utarise kana kodhi yako yevazhinji ichiita zvakafanana pamushini wavo. Izvo zvakakura. Accessibility Practitioners Izvi zviri padyo nemoyo wangu. Haasi munhu wese anotamba ne "standard" controller. Adaptive controllers anokanda kunze zvisinganzwisisike masaini dzimwe nguva. Nechishandiso ichi, unogona kuona chaizvo zviri kuitika. Vadzidzisi, vatsvakurudzi, chero ani. Vanogona kubata matanda, kuaenzanisa, kana kudzokorodza zvinopinda padivi-ne-parutivi. Pakarepo, zvinhu zvisingaoneki zvinova pachena. Kuedzwa Kwekuvimbiswa Kwehutano Matesta anowanzo nyora manotsi sekuti "Ndakapwanya mabhatani pano uye akatyoka." Hazvibatsiri zvakanyanya. Zvino? Ivo vanogona kutora iwo chaiwo madhindi, kutumira irogi, uye kuitumira kure. Hapana kufungidzira. Vadzidzisi Kana iwe uri kugadzira tutorials kana YouTube mavhidhiyo, ghost replay igoridhe. Iwe unogona kutaura chaizvo, "Hezvino izvo zvandakaita nemutongi," nepo UI ichiratidza zviri kuitika. Inoita kuti tsananguro dzinyatsojeka. Beyond Games Uye hongu, izvi hazvisi zvemitambo chete. Vanhu vakashandisa zvidzori zvemarobhoti, mapurojekiti ehunyanzvi, uye nzvimbo dzekusvikika. Nyaya imwe chete nguva dzese: chii chiri kunyatsoona browser? Neizvi, haufanirwe kufungidzira. Mhedziso Kugadzirisa kupinza kwemutongi kwagara kuchiita sekubhururuka bofu. Kusiyana neDOM kana CSS, hapana yakavakirwa-mukati inspector yemagamepads; ingori nhamba mbishi mukoni, inorasika nyore muruzha. Nemazana mashoma mitsetse yeHTML, CSS, uye JavaScript, takavaka chimwe chinhu chakasiyana:

Chiratidziro chekuona chinoita kuti zvisingaonekwe zvinopinda zvionekwe. A akaturikidzana CSS sisitimu inochengeta UI yakachena uye ichigoneka. Seti yezvigadziriso (kurekodha, kutumira kunze, snapshots, ghost replay) inoisimudza kubva demo kuenda kune yekuvandudza chishandiso.

Iyi purojekiti inoratidza kureba kwaungaenda nekusanganisa iyo Webhu Platform simba nediki rekugadzira muCSS Cascade Layers. Chishandiso chandachangobva kutsanangura muzere wakavhurika-sosi. Iwe unogona kubatanidza iyo GitHub repo uye uzviedze iwe pachako. Asi zvinonyanya kukosha, iwe unogona kuzviita iwe pachako. Wedzera zvidimbu zvako. Vaka yako wega replay logic. Isanganise nemutambo wako prototype. Kana kutoishandisa nenzira dzandisina kufungidzira. Zvekudzidzisa, kuwanikwa, kana kuongorora data. Pakupera kwezuva, izvi hazvisi zvekugadzirisa gamepads chete. Izvo ndezvekuvhenekera mwenje pazvinhu zvakavanzika, uye kupa vanogadzira chivimbo chekushanda nehardware iyo webhu haisati yambundira zvizere. Saka, batanidza mutongi wako, vhura mupepeti wako, uye tanga kuedza. Iwe unogona kushamiswa nezvinogona kuitwa nebrowser yako neCSS yako.

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