Toggle Debug

Ha e le hantle ke mabokose feela. Ha e sa thabise leha ho le joalo, empa e re fa malebela a ho tšoara hamorao ka CSS le JavaScript. Ho lokile, ke sebelisa li-cascade layers mona hobane e boloka lintho li hlophisitsoe hang ha u eketsa linaha tse ling. Mona ke mokhoa o makatsang:

/* =================================== HLOKO LA LESAKA Odara e bohlokoa: motheo → e sebetsang → lokisa bothata ==================================== */

/* Hlalosa tatellano ea lera ka pele */ @layer base, e sebetsang, debug;

/* Lera 1: Mekhoa ea motheo - ponahalo ea kamehla */ @layer base { .konopo { bokamorao: #333; moeli-radius: 50%; bophara: 70px; bophahamo: 70px; pontšo: flex; lokafatsa-kahare: setsi; lokisa-lintho: bohareng; }

.khefutsa { bophara: 20px; bophahamo: 70px; bokamorao: #333; pontšo: inline-block; } }

/* Lera 2: Maemo a sebetsang - o sebetsana le likonopo tse hatelitsoeng */ @layer e sebetsang { .button.e sebetsang { bokamorao: #0f0; /* Botala bo khanyang ha u tobetse */ fetola: sekala(1.1); /* E holisa konopo hanyane */ }

.pause.a sebetsa { bokamorao: #0f0; fetola: scaleY(1.1); /* E otlolla holimo ha e tobelitsoe */ } }

/* Lera 3: Likoaelo tsa Debug - lintlha tsa nts'etsopele */ @layer debug { .konopo::kamora { dikahare: attr(boleng ba data); /* E bonts'a boleng ba linomoro */ boholo ba fonte: 12px; mmala: #ff; } }

Botle ba mokhoa ona ke hore lera ka leng le na le morero o hlakileng. The base layer e keke ea hlola e sebetsa, 'me e sebetsang e ka se tlole mokhoa oa ho lokisa bothata, ho sa tsotelehe hore na ke eng. Sena se felisa lintoa tse ikhethang tsa CSS tseo hangata li hlaselang lisebelisoa tsa ho lokisa liphoso. Hona joale ho bonahala eka lihlopha tse ling li lutse ka morao ho lefifi. Ka 'nete, ha ho mpe haholo.

Ho eketsa JavaScript Nako ea JavaScript. Mona ke moo molaoli a hlileng a etsang ho hong. Re tla etsa sena mohato ka mohato. Mohato oa 1: Hlophisa Tsamaiso ea Naha Taba ea pele, re hloka mefuta e fapaneng ho latela boemo ba debugger: // =================================== // TSAMAISO YA MMUO // ===================================

tlohela ho matha = bohata; // E latela hore na debugger e sebetsa tlohela rafId; // E boloka ID ea kopo eaAnimationFrame bakeng sa ho hlakoloa

Liphetoho tsena li laola loop ea animation e lulang e bala ho kenella ha gamepad. Mohato oa 2: Tšoara Litšupiso tsa DOM Ka mor'a moo, re fumana litšupiso tsa likarolo tsohle tsa HTML tseo re tla li ntlafatsa: // =================================== // LITŠOANTŠISO TSA 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("boemo");

Ho boloka litšupiso tsena ka pele ho sebetsa hantle ho feta ho botsa DOM khafetsa. Mohato oa 3: Kenya Keyboard Fallback Bakeng sa ho etsa liteko ntle le molaoli, re tla etsa 'mapa oa linotlolo tsa keyboard ho likonopo: // =================================== // KEYBOARD FALLBACK (bakeng sa teko ntle le molaoli) // ===================================

const keyMapa = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // 'p' senotlolo se laola libaka tse peli tsa khefu };

Sena se re lumella ho leka UI ka ho tobetsa linotlolo ho keyboard. Mohato oa 4: Etsa The Main Update Loop Mona ke moo boselamose bo etsahalang. Ts'ebetso ena e sebetsa khafetsa 'me e bala boemo ba gamepad: // =================================== // TLHOKOMELISO EA SEHLOOHO SA GAMEPAD // ===================================

tshebetso updateGamepad() { // Fumana lipampiri tsohle tse hokahaneng const gamepads = navigator.getGamepads(); haeba (!gamepads) e khutla;

// Sebelisa papali ea pele e hokahaneng const gp = li-gamepads[0];

haeba (gp) { // Likonopo tsa ntlafatso ka ho fetola sehlopha se "sebetsang". btnA.classList.toggle("active", gp.buttons[0].petelitsoe); btnB.classList.toggle("active", gp.buttons[1].petelitsoe); btnX.classList.toggle("active", gp.buttons[2].petelitsoe);

// Tšoara konopo ea khefu (konopo index 9 ho balaoli ba bangata) const pausePressed = gp.buttons[9].petelitsoe; pause1.classList.toggle("active", pausePressed); pause2.classList.toggle("active", pausePressed);

// Theha lenane la likonopo tse hatisitsoeng hajoale bakeng sa ponts'o ea maemo letsetsa = []; gp.buttons.forEach((btn, i) => { haeba (btn.petelitsoe)petelitsoe.push("Konopo" + i); });

// Nchafatsa mongolo oa boemo haeba ho tobetsoe likonopo life kapa life haeba (petelitsoe.length> 0) { status.textContent = "E hatisitsoe: " + petelitsoe.join(", "); } }

// Tsoela pele ka loop haeba debugger e ntse e sebetsa haeba (ho matha) { rafId = requestAnimationFrame(updateGamepad); } }

Mokhoa oa classList.toggle() o eketsa kapa o tlosa sehlopha se sebetsang ho latela hore na konopo e hatisitsoe, e leng se hlahisang mekhoa ea rona ea CSS layer. Mohato oa 5: Tšoara Liketsahalo tsa Keyboard Bamameli bana ba liketsahalo ba etsa hore keyboard e khutlisetsoe morao: // =================================== // KEYBOARD SEBETSI TSA LIKETSAHALO // ===================================

document.addEventListener("keydown", (e) => { haeba (keyMap[e.key]) { // Tšoara likarolo tse le 'ngoe kapa tse ngata haeba (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("active"); } tse ling { keyMap[e.key].classList.add("active"); } status.textContent = "Konopo e tobetse: " + e.key.toUpperCase(); } });

document.addEventListener("keyup", (e) => { haeba (keyMap[e.key]) { // Tlosa boemo bo sebetsang ha senotlolo se lokolloa haeba (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("active"); } tse ling { keyMap[e.key].classList.tlosa("a sebetsang"); } status.textContent = "Senotlolo se lokollotsoeng: " + e.key.toUpperCase(); } });

Mohato 6: Eketsa Qala / Stop Control Qetellong, re hloka mokhoa oa ho bulela le ho tima debugger: // =================================== // TOGGRE DEBUGGER ON/OFF // ===================================

document.getElementById("toggle").addEventListener("tobetsa", () => { matha = !ho matha; // Qetella boemo ba ho matha

haeba (ho matha) { status.textContent = "Debugger e sebetsa..."; updateGamepad(); // Qala loop ea ntlafatso } tse ling { status.textContent = "Debugger ha e sebetse"; hlakolaAnimationFrame(rafId); // Emisa sekgoqetsane } });

Kahoo ee, tobetsa konopo 'me ea khanya. Sututsa thupa mme e tsamaye. Ho felile ke lehlohonolo. Ntho e 'ngoe hape: litekanyetso tse tala. Ka linako tse ling u batla feela ho bona linomoro, eseng mabone.

Tabeng ena, o lokela ho bona:

Selaoli se bonolo se skrineng, Likonopo tse arabelang ha u sebelisana le tsona, le 'Malo oa boikhethelo oa ho lokisa bothata o bonts'ang li-indices tsa konopo ea konopo.

Ho etsa hore sena se be bobebe, mona ke setšoantšo se potlakileng sa molaoli oa skrineng se sebetsang ka nako ea nnete:

Joale, ho tobetsa Qala ho Rekota ho boloka tsohle ho fihlela o otla Stop Record. 2. Ho romela Boitsebiso ho CSV/JSON Hang ha re e-na le logi, re tla batla ho e boloka.

Export JSON Export CSV

Mohato oa 1: Etsa The Download Helper Taba ea pele, re hloka ts'ebetso ea mothusi e sebetsanang le ho jarolla lifaele ho sebatli: // =================================== // FELA DOWNLOAD MOTHUSI // ===================================

mosebetsi downloadFile(lebitso la faele, litaba, mofuta = "mongolo / thota") { // Bopa seboko ho tsoa ho litaba const blob = Blob e ncha ([litaba], {mofuta }); const url = URL.createObjectURL(blob);

// Theha sehokelo sa nakoana sa ho jarolla ebe o se tobetsa const a = document.createElement("a"); a.href = url; a.download = filename; a.tobetsa();

// Hloekisa URL ea ntho ka mor'a ho khoasolla setTimeout(() => URL.revokeObjectURL(url), 100); }

Mosebetsi ona o sebetsa ka ho theha Blob (ntho e kholo ea binary) ho tsoa ho data ea hau, ho hlahisa URL ea nakoana bakeng sa eona, le ho tobetsa ka mokhoa oa lenaneo sehokelo sa ho jarolla. Ho hloekisoa ho tiisa hore ha re tsoe mohopolong. Mohato oa 2: Tšoara JSON Export JSON e nepahetse bakeng sa ho boloka sebopeho se felletseng sa data:

// =================================== // HO HLOKAHALA JOALOKA JSON // ===================================

document.getElementById("export-json").addEventListener("tobetsa", () => { // Sheba hore na ho na le letho le ka rekisoang haeba (!liforeimi.bolelele) { console.warn("Ha ho rekoto e fumanehang bakeng sa ho romelloa kantle ho naha."); khutla; }

// Theha phalliso ka metadata le liforeimi const payload = { e entsoeKa: new Date().toISOString(), liforeimi };

// Khoasolla joalo ka JSON e hlophisitsoeng downloadFile( "gamepad-log.json", JSON.stringify(payload, null, 2), "application/json" ); });

Sebopeho sa JSON se boloka ntho e 'ngoe le e' ngoe e hlophisitsoe 'me e arohanngoa habonolo, e etsa hore e be e loketseng ho kenya lisebelisoa tsa dev kapa ho arolelana le basebetsi-'moho. Mohato oa 3: Tšoara CSV Export Bakeng sa li-export tsa CSV, re hloka ho batalatsa lintlha tsa maemo a holimo ka mela le likholomo:

//=================================== // HO ROMELA KA JOALOKA CSV // ===================================

document.getElementById("export-csv").addEventListener("tobetsa", () => { // Sheba hore na ho na le letho le ka rekisoang haeba (!liforeimi.bolelele) { console.warn("Ha ho rekoto e fumanehang bakeng sa ho romelloa kantle ho naha."); khutla; }

// Theha mola oa lihlooho tsa CSV (likholomo tsa setempe sa linako, likonopo tsohle, lilepe tsohle) const headerButtons = liforeimi[0].buttons.map((_, i) => btn${i}); const headerAxes = liforeimi[0].axes.map((_, i) => axis${i}); const header = ["t", ...headerButtons, ...headerAxes].join(",") + "\n";

// Theha mela ea data ea CSV const rows = liforeimi.mapa(f => { const btnVals = f.buttons.map(b => b.boleng); khutlisetsa [f.t, ...btnVals, ...f.axes].join(","); }).kenela("\n");

// Khoasolla joalo ka CSV downloadFile("gamepad-log.csv", hlooho + mela, "text/csv"); });

CSV e bohlale bakeng sa tlhahlobo ea data hobane e bula ka kotloloho ho Excel kapa Google Sheets, e u lumella ho etsa lichate, data ea sefa, kapa mekhoa ea ho bona ka mahlo. Kaha joale likonopo tsa kantle ho naha li se li le teng, u tla bona likhetho tse peli tse ncha phanele: Export JSON le Export CSV. JSON e ntle haeba u batla ho lahlela thipa e tala ka har'a lisebelisoa tsa hau tsa dev kapa ho pota-pota sebopeho. CSV, ka lehlakoreng le leng, e bula ka kotloloho ho Excel kapa Google Sheets hore o tsebe ho chata, ho sefa kapa ho bapisa lintho tse kentsoeng. Setšoantšo se latelang se bontša hore na phanele e shebahala joang ka li-control tseo tse ling.

3. Mokhoa oa ho nka lifoto Ka linako tse ling ha u hloke ho rekota ka botlalo, "screenshot" e potlakileng ea linaha tsa ho kenya. Ke moo konopo ea Take Snapshot e thusang.

Nka Senepe

Le JavaScript:

// =================================== // NTS'OETSA MOTHO // ===================================

document.getElementById("snapshot").addEventListener("tobetsa", () => { // Fumana lipampiri tsohle tse hokahaneng const pads = navigator.getGamepads(); const activePads = [];

// Lokolla 'me u nke boemo ba papali e' ngoe le e 'ngoe e hokahaneng bakeng sa (const gp of pads) { haeba (!gp) tsoela pele; // Tlola dikotjana tse se nang letho

activePads.push({ id: gp.id, // Lebitso la molaoli/mohlala timestamp: performance.now(), likonopo: gp.buttons.map(b => ({ petelitsoe: b.hatelloa, boleng: b.boleng })), lilepe: [...gp.axes] }); }

// Sheba hore na ho na le li-gamepads tse fumanoeng haeba (!activePads.length) { console.warn("Ha ho lipampiri tsa lipapali tse hoketsoeng bakeng sa senepe."); tlhokomeliso("Ha ho molaoli ea fumanoeng!"); khutla; }

// Kenya le ho tsebisa mosebedisi console.log("Snapshot:", activePads); lemosa });

Li-snapshots li homisa boemo bo nepahetseng ba molaoli oa hau ka motsotso o le mong. 4. Ghost Input Replay Joale bakeng sa e monate: replay ea ghost input. Sena se nka logi ebe se e bapala ka pono joalo ka ha sebapali sa phantom se sebelisa molaoli.

Bapala hape Rekoto ea ho Qetela

JavaScript bakeng sa ho bapala hape: // =================================== // THAPELO YA SEPOHO // ===================================

document.getElementById("replay").addEventListener("tobetsa", () => { // Netefatsa hore re na le kgatiso eo re ka e bapalang hape haeba (!liforeimi.bolelele) { tlhokomeliso("Ha ho rekoto e ka bapalang hape!"); khutla; }

console.log("Ho qala papali ea ghost ...");

// Nako ea pina bakeng sa ho bapaloa ho hokahaneng let startTime = performance.now(); let frameIndex = 0;

// Bapala sekgoqetsane sa ditshwantshiso tshebetso mohato() { const now = performance.now(); const elapsed = hona joale - startTime;

// Hlakola liforeimi tsohle tse neng li lokela hore ebe li etsahetse hajoale ha (frameIndex < frames.length && frames[frameIndex].t <= e fetile) { const foreimi = liforeimi[frameIndex];

// Ntlafatsa UI ka li-button tse rekotiloeng btnA.classList.toggle("active", frame.buttons[0].petelitsoe); btnB.classList.toggle("active", frame.buttons[1].petelitsoe); btnX.classList.toggle("active", frame.buttons[2].petelitsoe);

// Pontšo ea boemo ba ntlafatso letsetsa = []; frame.buttons.forEach((btn, i) => { haeba (btn.petelitsoe) tobetsa.push("Konopo" + i); }); haeba (petelitsoe.length> 0) { status.textContent = "Ghost:" + pressed.join(", "); }

frameIndex++; }

// Tsoela pele ka loop haeba ho na le liforeimi tse ling haeba (frameIndex < frames.length) { requestAnimationFrame(mohato); } tse ling { console.log("Replaye felile."); boemo.textContent = "Ho bapala hape ho fedile"; } }

// Qala ho bapala hape mohato (); });

Ho etsa hore bothata bo be bonolo haholoanyane, ke kentse replay ea ghost. Ha u se u rekotile lenaneo, u ka otla replay 'me u shebelle UI e e etsa, hoo e ka bang joalo ka ha sebapali sa phantom se ntse se matha pad. Konopo e ncha ea Replay Ghost e hlaha phanele bakeng sa sena.

Hit Record, senya le molaoli hanyane, emisa, ebe u bapala hape. UI e pheta ntho e 'ngoe le e' ngoe eo u e entseng, joalo ka sepoko se latelang seo u se entseng. Ke hobane'ng ha u ikhathatsa ka litlatsetso tsee?

Ho rekota / ho romela thepa ho etsa hore ho be bonolo ho bahlahlobi ho bontša hantle se etsahetseng. Li-snapshots li homa hanyane ka nako, li bohlokoa haholo ha u lelekisa likokoana-hloko. Ghost replay e ntle bakeng sa lithupelo, licheke tsa phihlello, kapa ho bapisa litlhophiso tsa taolo ka lehlakore.

Nakong ena, ha e sa le demo e makhethe, empa ke ntho eo u ka e sebelisang. Maemo a Tšebeliso ea 'Nete ea Lefatše Joale re na le debugger ena e ka etsang ho hongata. E bonts'a lintho tse kenngoeng ka ho fetesisa, e rekota li-log, e li romella kantle ho naha, ebile e pheta lintho. Empa potso ea sebele ke hore: ha e le hantle ke mang ea tsotellang? Sena se thusa mang? Baetsi ba Lipapali Balaoli ke karolo ea mosebetsi, empa ho ba lokisa? Hangata bohloko. Nahana u ntse u leka papali ea papali ea ntoa, joalo ka ↓ → + punch. Ho e-na le ho rapela, u e tobetse ka tsela e tšoanang habeli, u e rekota hang, ebe u e bapala hape. E felile. Kapa u fapanyetsana likutu tsa JSON le motho eo u sebetsang le eena ho bona hore na khoutu ea hau ea libapali tse ngata e etsa se tšoanang mochining oa bona. Seo se seholo. Litsebi tsa phihlello Ena e haufi le pelo ea ka. Ha se bohle ba bapalang ka "standard" controller. Balaoli ba ikamahanyang le maemo ba lahla matšoao a makatsang ka linako tse ling. Ka sesebelisoa sena, u ka bona hantle se etsahalang. Matichere, bafuputsi, mang kapa mang. Ba ka ts'oara lifate, ba li bapisa, kapa ba bapisa lintho tse kenang ka lehlakore. Ka tšohanyetso, lintho tse sa bonahaleng lia totobala. Teko ea Tiisetso ea Boleng Hangata bahlahlobisisi ba ngola lintlha tse kang "Ke khotlile likonopo mona 'me ea robeha." Ha e na thuso haholo. Jwale? Ba ka khona ho tšoara mechine e hatisang hantle, ba romela molaetsa ka ntle, 'me ba e romela. Ha ho khakanyo. Barupeli Haeba u etsa lithupelo kapa li-vids tsa YouTube, replay ea ghost ke khauta. U ka re, "Sena ke seo ke se entseng ka molaoli," ha UI e bontša hore e ntse e etsahala. E etsa hore litlhaloso li hlake haholoanyane. Ka Ntle ho Lipapali Mme ee, sena ha se taba ea lipapali feela. Batho ba sebelisitse lilaoli bakeng sa liroboto, merero ea bonono, le lihokelo tsa phihlello. Taba e tšoanang nako le nako: sebatli se hlile se bona eng? Ka sena, ha ua tlameha ho nahana. Qetello Ho lokisa bothata ho kenyelletso ea molaoli esale ho utloahala e le bofofu bo fofang. Ho fapana le DOM kapa CSS, ha ho na mohlahlobi ea hahelletsoeng ka har'a li-gamepads; ke linomoro tse tala feela ka har'a console, li lahleheloa habonolo ke lerata. Ka mela e makholo a 'maloa ea HTML, CSS, le JavaScript, re thehile ho hong ho fapaneng:

Debugger e bonahalang e etsang hore lintho tse sa bonahaleng li bonahale. Sistimi e hlophisitsoeng ea CSS e bolokang UI e hloekile ebile e khona ho lokisoa. Sehlopha sa lintlafatso (ho rekota, ho romela kantle, linepe, ghost replay) tse e phahamisang ho tloha ho demo ho ea ho sesebelisoa sa mohlahlami.

Morero ona o bonts'a hore na u ka ea hole hakae ka ho kopanya matla a Sethala sa Marang-rang le boqapi bo nyane ho CSS Cascade Layers. Sesebelisoa seo ke sa tsoa se hlalosa ka botlalo ke mohloli o bulehileng. U ka kopanya repo ea GitHub 'me u iketsetse eona. Empa habohlokoa le ho feta, u ka iketsetsa eona. Kenya lihlopha tsa hau. Iketsetse mohopolo oa replay. E kopanya le mohlala oa hau oa papali. Kapa u e sebelise ka tsela eo ke neng ke sa e nahane. Bakeng sa thuto, phihlello, kapa tlhahlobo ea data. Qetellong ea letsatsi, sena ha se taba ea ho lokisa li-gamepads feela. E mabapi le ho khantša leseli holim'a lisebelisoa tse patiloeng, le ho fa bahlahisi kholiseho ea ho sebetsa ka hardware eo websaete e ntseng e sa e amohele ka botlalo. Kahoo, hokela molaoli oa hau, bula mohlophisi oa hau, 'me u qale ho leka. U ka 'na ua makatsoa ke seo sebatli sa hau le CSS ea hau li ka se fihlelang e le kannete.

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