Thaum koj ntsaws rau hauv lub maub los, koj mash nyees khawm, txav cov sticks, rub lub triggers ... thiab raws li tus tsim tawm, koj pom tsis muaj dab tsi. Lub browser khaws nws, paub meej, tab sis tshwj tsis yog tias koj tab tom teev cov lej hauv lub console, nws tsis pom. Qhov ntawd yog qhov mob taub hau nrog Gamepad API. Nws tau nyob ib ncig ntawm xyoo, thiab nws yeej muaj zog heev. Koj tuaj yeem nyeem cov nyees khawm, sticks, triggers, ua haujlwm. Tab sis feem ntau cov neeg tsis kov nws. Vim li cas? Vim tsis muaj lus teb. Tsis muaj vaj huam sib luag hauv cov cuab yeej tsim tawm. Tsis muaj txoj hauv kev paub meej tias tus tswj hwm txawm ua li koj xav. Nws zoo li ya dig muag. Qhov ntawd ua rau kuv txaus los tsim cov cuab yeej me me: Gamepad Cascade Debugger. Tsis txhob ntsia ntawm console tso zis, koj tau txais kev nyob, sib tham sib saib ntawm tus maub los. Nias ib yam dab tsi thiab nws tshwm sim ntawm qhov screen. Thiab nrog CSS Cascade Layers, cov qauv nyob ruaj khov, yog li nws huv dua rau kev debug. Hauv cov ntawv tshaj tawm no, kuv yuav qhia koj tias vim li cas cov tswj kev debugging yog qhov mob, yuav ua li cas CSS pab ntxuav nws, thiab yuav ua li cas koj tuaj yeem tsim kom rov siv tau qhov pom kev debugger rau koj tus kheej cov haujlwm.
Txawm hais tias koj tuaj yeem nkag mus rau lawv tag nrho, koj yuav xaus nrog cov ntawv tsis txaus siab console spam. Piv txwv li: [0,0,1,0,0,0.5,0,...] [0,0,0,0,1,0,0,...] [0, 0, 1, 0, 0, 0, 0, ...]
Koj puas tuaj yeem qhia lub pob nyem twg? Tej zaum, tab sis tsuas yog tom qab straining koj ob lub qhov muag thiab ploj lawm ob peb inputs. Yog li, tsis yog, debugging tsis tuaj yeem yooj yim thaum nws los nyeem cov tswv yim. Teeb meem 3: Tsis muaj qauv Txawm hais tias koj muab tso ua ke ib qho kev pom sai sai, cov qauv tuaj yeem cuam tshuam sai. Default, nquag, thiab debug xeev tuaj yeem sib tshooj, thiab tsis muaj cov qauv meej, koj CSS ua nkig thiab nyuaj rau txuas ntxiv. CSS Cascade Layers tuaj yeem pab tau. Lawv pab pawg ua qauv rau hauv "txheej txheem" uas tau txiav txim los ntawm qhov tseem ceeb, yog li koj tsis txhob sib ntaus sib tua tshwj xeeb thiab kwv yees, "Vim li cas kuv tsis pom qhov debug style qhia?" Hloov chaw, koj muaj kev txhawj xeeb cais:
Base: Tus maub los tus qauv, thawj tsos. Active: Highlights rau nias khawm thiab txav sticks. Debug: Overlays rau cov neeg tsim khoom (piv txwv li, nyeem cov lej, cov lus qhia, thiab lwm yam).
Yog tias peb yuav txhais cov txheej hauv CSS raws li qhov no, peb yuav muaj: /* qis tshaj mus rau qhov tseem ceeb tshaj plaws */ @layer puag, nquag, debug;
@layer puag { /*...*/ }
@layer active { /*...*/ }
@layer debug { /*...*/ }
Vim hais tias txhua txheej stacks kwv yees, koj ib txwm paub cov cai twg yeej. Qhov kev kwv yees ua rau kev debugging tsis yog yooj yim dua, tab sis ua tau tswj tau. Peb tau npog qhov teeb meem (tsis pom, tsis pom kev tawm tswv yim) thiab txoj hauv kev (qhov pom debugger tsim nrog Cascade Layers). Tam sim no peb yuav taug kev los ntawm cov txheej txheem step-by-step los tsim qhov debugger. Lub tswv yim Debugger Qhov yooj yim tshaj plaws los ua kom pom cov tswv yim zais yog tsuas yog kos rau ntawm qhov screen. Qhov no yog qhov debugger ua. Nyees khawm, triggers, thiab joysticks tag nrho tau txais kev pom.
Nias A: Ib lub voj voog teeb. Nudge tus pas: Lub voj voog swb ib ncig. Rub tus txhais ib nrab: Ib qho bar puv ib nrab.
Tam sim no koj tsis tau ntsia ntawm 0s thiab 1s, tab sis qhov tseeb saib tus maub los ua neej nyob. Tau kawg, thaum koj pib piling ntawm cov xeev xws li default, nias, debug info, tej zaum txawm ib tug kaw hom, CSS pib tau loj thiab complex. Qhov ntawd yog qhov uas cov txheej cascade tuaj yeem ua ke. Ntawm no yog ib qho piv txwv stripped-down: @layer puag { .khawm { keeb kwm: #222; ciam teb-luv: 50%; dav: 40px; qhov siab: 40px; } }
@layer active { .button.pressed { keeb kwm: #0f0; /* ntsuab ntsuab */ } }
@layer debug { .khawm:: tom qab { cov ntsiab lus: attr(data-value); font-loj: 12px; xim: #ff; } }
Cov txheej txheem tseem ceeb: puag → nquag → debug.
base kos tus maub los. active handles nias lub xeev. debug cuam tshuam rau overlays.
Kev rhuav tshem nws zoo li qhov no txhais tau tias koj tsis tawm tsam kev ua tsov ua rog txawv txawv. Txhua txheej muaj nws qhov chaw, thiab koj ib txwm paub dab tsi yeej. Tsim Nws Tawm Cia peb tau txais ib yam dab tsi ntawm qhov screen ua ntej. Nws tsis tas yuav saib zoo - tsuas yog yuav tsum muaj nyob yog li peb muaj qee yam ua haujlwm nrog.
Gamepad Cascade Debugger
Qhov ntawd tsuas yog cov thawv ntawv xwb. Tsis zoo siab tsis tau, tab sis nws muab peb tes tuav tom qab nrog CSS thiab JavaScript. Okay, Kuv siv cov khaubncaws sab nraud povtseg ntawm no vim tias nws khaws cov khoom sib koom ua ke thaum koj ntxiv ntau lub xeev. Ntawm no yog ib qho kev hla dhau:
/* =================================== CASCADE LAYERS SETUP Order tseem ceeb: puag → nquag → debug ==================================== */
/* Txhais cov txheej txheem ua ntej */ @layer puag, nquag, debug;
/* Txheej 1: Base styles - zoo li qub */ @layer puag { .khawm { keeb kwm: #333; ciam teb-luv: 50%; dav: 70px;. loj: 70px;. zaub: flex; justify-cov ntsiab lus: center; align-khoom: center; }
.pause { dav: 20px; loj: 70px;. keeb kwm: #333; zaub: inline-block; } }
/* Txheej 2: Cov xeev nquag - tuav cov khawm nias */ @layer active { .button.active { keeb kwm: #0f0; /* Ci ntsuab thaum nias */ hloov: scale(1.1); /* me ntsis nthuav lub pob */ }
.pause.active { keeb kwm: #0f0; pauv: scaleY(1.1); /* Stretches vertically thaum nias */ } }
/* Txheej 3: Debug overlays - cov ntaub ntawv tsim tawm */ @layer debug { .khawm:: tom qab { cov ntsiab lus: attr(data-value); /* Qhia tus nqi tus lej */ font-loj: 12px; xim: #ff; } }
Qhov zoo nkauj ntawm txoj kev no yog tias txhua txheej muaj lub hom phiaj meej. Lub hauv paus txheej yuav tsis override active, thiab active yeej tsis override debug, tsis hais qhov tshwj xeeb. Qhov no tshem tawm CSS kev ua tsov rog tshwj xeeb uas feem ntau plague debugging cov cuab yeej. Tam sim no nws zoo li qee pawg tau zaum ntawm qhov tsaus ntuj. Honestly, tsis phem heev.
Ntxiv rau JavaScript JavaScript lub sijhawm. Qhov no yog qhov uas tus tswj tau ua ib yam dab tsi. Peb yuav tsim cov kauj ruam no. Kauj Ruam 1: Teem Lub Xeev Kev Tswj Ua ntej, peb xav tau cov hloov pauv los taug qab tus debugger lub xeev: // =================================== // STATE MANAGEMENT // ===================================
cia khiav = cuav; // Tracks seb tus debugger puas ua haujlwm cia rafId; // Khaws cov ntawv thovAnimationFrame ID rau kev tshem tawm
Cov variables no tswj lub voj animation uas txuas ntxiv nyeem gamepad input. Kauj Ruam 2: Rub cov ntaub ntawv DOM Tom ntej no, peb tau txais kev xa mus rau tag nrho cov ntsiab lus HTML peb yuav hloov kho: // =================================== // 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 xwm txheej = document.getElementById("status");
Kev khaws cov ntaub ntawv no rau pem hauv ntej yog qhov ua tau zoo dua li kev nug DOM ntau zaus. Kauj ruam 3: Ntxiv Keyboard Fallback Rau kev sim tsis muaj tus tswj lub cev, peb yuav qhia cov yuam sij keyboard rau cov nyees khawm: // =================================== // KEYBOARD FALLBACK (rau kev sim tsis muaj tus tswj hwm) // ===================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // 'p' tus yuam sij tswj ob qho tib si nres };
Qhov no cia peb sim UI los ntawm nias cov yuam sij ntawm cov keyboard. Kauj ruam 4: Tsim Lub Ntsiab Hloov Kho Loop Ntawm no yog qhov ua khawv koob tshwm sim. Cov haujlwm no ua haujlwm tsis tu ncua thiab nyeem gamepad xeev: // =================================== // MAIN GAMEPAD UPDATE LOOP // ===================================
muaj nuj nqi updateGamepad() { // Tau txais tag nrho cov gamepads txuas const gamepads = navigator.getGamepads(); yog tias (!gamepads) rov qab los;
// Siv thawj lub gamepad txuas nrog const gp = gamepads[0];
yog tias (gp) { // Hloov kho khawm hais los ntawm toggling chav kawm "active". btnA.classList.toggle("active", gp.buttons[0].pressed); btnB.classList.toggle("active", gp.buttons[1].pressed); btnX.classList.toggle("active", gp.buttons[2].pressed);
// Kov ncua khawm (khawm qhov ntsuas 9 ntawm cov tswj feem ntau) const pausePressed = gp.buttons[9].pressed; pause1.classList.toggle("active", pausePressed); pause2.classList.toggle("active", pausePressed);
// Tsim ib daim ntawv teev cov nyees khawm tam sim no rau cov xwm txheej tso saib cia nias = []; gp.buttons.forEach((btn, i) => { yog tias (btn.pressed)pressed.push("Button" + i); });
// Hloov kho cov xwm txheej ntawv yog tias muaj cov nyees khawm raug nias yog (pressed.length > 0) { status.textContent = "Pressed: " + pressed.join(", ""); } }
// Txuas lub voj yog tias debugger khiav yog tias (khiav) { rafId = requestAnimationFrame(updateGamepad); } }
Txoj kev classList.toggle() ntxiv lossis tshem tawm cov chav kawm nquag raws li seb lub pob raug nias, uas ua rau peb cov txheej txheem CSS. Kauj ruam 5: Kov Keyboard Txheej xwm Cov neeg mloog cov xwm txheej no ua rau cov keyboard poob rov qab ua haujlwm: // =================================== // KEYBOARD EVENT HANDLERS // ===================================
document.addEventListener("keydown", (e) => { yog tias (keyMap[e.key]) { // Kov ib leeg lossis ntau yam yog (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("active")); } lwm { keyMap[e.key].classList.add("active"); } status.textContent = "Key pressed: " + e.key.toUpperCase(); } });
document.addEventListener("keyup", (e) => { yog tias (keyMap[e.key]) { // Tshem tawm lub xeev nquag thaum tso tawm yog (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("active")); } lwm { keyMap[e.key].classList.remove("active"); } status.textContent = "Key tso tawm: " + e.key.toUpperCase(); } });
Kauj ruam 6: Ntxiv Pib / Nres Tswj Thaum kawg, peb xav tau ib txoj hauv kev los toggle lub debugger rau thiab tawm: // =================================== // TOGGLE DEBUGGER ON/OFF // ===================================
document.getElementById("toggle").addEventListener("click", () => { khiav = !running; // Tig lub xeev khiav
yog tias (khiav) { status.textContent = "Debugger khiav..."; updateGamepad(); // Pib lub voj hloov tshiab } lwm { status.textContent = "Debugger inactive"; cancelAnimationFrame(rafId); // Nres lub voj } });
Yog li ntawd, nias lub pob thiab nws glows. Nias tus pas thiab nws txav mus. Qhov ntawd yog nws. Ib qho ntxiv: cov nqi raw. Qee zaum koj tsuas xav pom cov lej, tsis yog teeb.
Hauv theem no, koj yuav tsum pom:
Ib qho yooj yim on-screen maub los, Cov nyees khawm uas hnov thaum koj cuam tshuam nrog lawv, thiab Ib qho kev xaiv debug readout qhia nias khawm indices.
Txhawm rau ua qhov tsis txaus ntseeg no, ntawm no yog qhov qhia nrawm ntawm tus tswj hwm ntawm lub vijtsam hauv lub sijhawm:
Tam sim no, nias Start Recording txhua yam kom txog rau thaum koj ntaus Stop Recording. 2. Exporting cov ntaub ntawv rau CSV/JSON Thaum peb muaj lub cav, peb yuav xav khaws nws.
Kauj ruam 1: Tsim Tus Download Helper Ua ntej, peb xav tau tus pab cuam uas tswj cov ntaub ntawv rub tawm hauv browser: // =================================== // COV NTAUB NTAWV DOWNLOAD tus pab // ===================================
muaj nuj nqi downloadFile(filename, content, type = "text/plain") { // Tsim ib blob los ntawm cov ntsiab lus const blob = new Blob([cov ntsiab lus], { hom }); const url = URL.createObjectURL(blob);
// Tsim ib ntus rub tawm txuas thiab nyem rau nws const ib = document.createElement("a"); a.href = url; a.download = filename; a.click();
// Ntxuav cov khoom URL tom qab rub tawm setTimeout(() => URL.revokeObjectURL(url), 100); }
Qhov haujlwm no ua haujlwm los ntawm kev tsim Blob (binary loj khoom) los ntawm koj cov ntaub ntawv, tsim ib ntus URL rau nws, thiab programmatically nyem qhov txuas download. Kev ntxuav kom ntseeg tau tias peb tsis xau nco. Kauj ruam 2: Kov JSON Export JSON yog qhov zoo tshaj plaws rau kev khaws cov ntaub ntawv tiav:
// =================================== // EXPORT AS JSON // ===================================
document.getElementById("export-json").addEventListener("click", () => { // Tshawb xyuas seb puas muaj dab tsi los xa tawm yog tias (!frames.length) { console.warn("Tsis muaj cov ntaub ntawv xa tawm."); rov qab los; }
// Tsim ib tug payload nrog metadata thiab thav ntawv const payload = { createdAt: new Date().toISOSTring(), ncej };
// Download tau li formatted JSON downloadFile( "gamepad-log.json", JSON.stringify(payload, null, 2), "application/json" ); });
JSON hom khaws txhua yam kev teeb tsa thiab yooj yim parseable, ua rau nws zoo tagnrho rau kev thauj khoom rov qab rau hauv cov cuab yeej dev lossis sib koom nrog cov phooj ywg. Kauj ruam 3: Kov CSV Export Rau CSV xa tawm, peb yuav tsum ua kom cov ntaub ntawv hierarchical rau hauv kab thiab kab:
//=================================== // EXPORT AS CSV // ===================================
document.getElementById("export-csv").addEventListener("click", () => { // Tshawb xyuas seb puas muaj dab tsi los xa tawm yog tias (!frames.length) { console.warn("Tsis muaj cov ntaub ntawv xa tawm."); rov qab los; }
// Tsim CSV header kab (kem rau timestamp, tag nrho cov nyees khawm, tag nrho cov axes) const headerButtons = frames[0].buttons.map((_, i) => btn${i}); const headerAxes = frames[0].axes.map((_, i) => axis${i}); const header = ["t", ...headerButtons, ...headerAxes].join(",") + "\n";
// Tsim CSV cov ntaub ntawv kab const rows = frames.map(f => { const btnVals = f.buttons.map(b => b.value); rov [f.t, ...btnVals, ...f.axes].join(","); }).join("\n");
// Download as CSV downloadFile("gamepad-log.csv", header + rows, "text/csv"); });
CSV yog qhov zoo rau kev txheeb xyuas cov ntaub ntawv vim nws qhib ncaj qha hauv Excel lossis Google Sheets, cia koj tsim cov kab kos, lim cov ntaub ntawv, lossis cov qauv pom pom. Tam sim no uas cov nyees khawm export nyob rau hauv, koj yuav pom ob txoj kev xaiv tshiab ntawm lub vaj huam sib luag: Export JSON thiab Export CSV. JSON yog qhov zoo yog tias koj xav pov cov log nyoos rov qab rau hauv koj cov cuab yeej dev lossis poke ib ncig ntawm cov qauv. CSV, ntawm qhov tod tes, qhib ncaj qha rau hauv Excel lossis Google Sheets yog li koj tuaj yeem teeb duab, lim, lossis sib piv cov khoom siv. Daim duab hauv qab no qhia tias lub vaj huam sib luag zoo li cas nrog cov kev tswj ntxiv.
3. Snapshot System Qee lub sij hawm koj tsis xav tau ib daim ntawv teev tag nrho, tsuas yog "screenshot" sai ntawm cov tswv yim. Qhov ntawd yog qhov Take Snapshot khawm pab.
Thiab JavaScript:
// =================================== // UA SNAPSHOT // ===================================
document.getElementById("snapshot").addEventListener("click", () => { // Tau txais tag nrho cov gamepads txuas const pads = navigator.getGamepads(); const activePads = [];
// Loop dhau thiab ntes lub xeev ntawm txhua qhov kev sib txuas gamepad rau (const gp of pads) { yog tias (!gp) txuas ntxiv; // Hla qhov khoob khoob
activePads.push({ id: gp.id, // Controller name/model timestamp: performance.now(), nyees khawm: gp.buttons.map(b => ({ nias: b.pressed, tus nqi: b.value })), axes: [...gp.axes] }); }
// Tshawb xyuas seb puas muaj gamepads pom yog tias (!activePads.length) { console.warn("Tsis muaj gamepads txuas rau snapshot."); ceeb toom("Tsis muaj tus tswj xyuas!"); rov qab los; }
// Nkag mus thiab ceeb toom rau tus neeg siv console.log("Snapshot:", activePads); ceeb toom(Snapshot take! Captured ${activePads.length} controller(s).); });
Snapshots khov lub xeev tseeb ntawm koj tus maub los ntawm ib lub sijhawm hauv lub sijhawm. 4. Dab neeg tawm tswv yim Replay Tam sim no rau kev lom zem ib: dab input replay. Qhov no yuav siv lub cav thiab ua rau nws rov qab pom zoo li yog tus neeg ua si phantom siv tus maub los.
JavaScript rau replay: // =================================== // GHOST REPLAY // ===================================
document.getElementById("replay").addEventListener("click", () => { // Kom paub meej tias peb muaj cov ntaubntawv povthawj siv rov ua dua yog tias (!frames.length) { alert("Tsis muaj ntaubntawv povthawj siv replay!"); rov qab los; }
console.log("Pib dab replay...");
// Taug qab lub sijhawm rau synced playback cia startTime = performance.now(); cia frameIndex = 0;
// Replay animation voj voog ua haujlwm kauj ruam () { const now = performance.now(); const elapsed = tam sim no - startTime;
// Txheej txheem tag nrho cov ncej uas yuav tsum tau tshwm sim los ntawm tam sim no thaum (frameIndex < frames.length && frames[frameIndex].t <= elapsed) { const ncej = frames[frameIndex];
// Hloov kho UI nrog lub kaw lus khawm btnA.classList.toggle("active", frame.buttons[0].pressed); btnB.classList.toggle("active", frame.buttons[1].pressed); btnX.classList.toggle("active", frame.buttons[2].pressed);
// Hloov tshiab xwm txheej zaub cia nias = []; frame.buttons.forEach((btn, i) => { yog tias (btn.pressed) pressed.push("Button" + i); }); yog (pressed.length > 0) { status.textContent = "Ghost: " + pressed.join(", ""); }
frameIndex++; }
// Txuas ntxiv voj yog tias muaj ntau tus ncej yog tias (frameIndex < frames.length) { thovAnimationFrame(theem); } lwm { console.log("Replaytiav."); status.textContent = "Replay tiav"; } }
// Pib lub replay kauj ruam (); });
Txhawm rau ua kom debugging me ntsis ntxiv hands-on, kuv ntxiv dab replay. Thaum koj tau kaw qhov kev sib tham, koj tuaj yeem ntaus replay thiab saib UI ua nws tawm, yuav luag zoo li tus neeg ua si phantom tab tom khiav lub ncoo. Ib qho tshiab Replay Ghost khawm tshwm nyob rau hauv lub vaj huam sib luag rau qhov no.
Ntaus Cov Ntaub Ntawv, cuam tshuam nrog tus maub los me ntsis, nres, tom qab ntawd rov ua dua. Lub UI tsuas yog echoes txhua yam koj tau ua, zoo li tus dab tom qab koj cov tswv yim. Vim li cas thab nrog cov khoom ntxiv no?
Cov ntaubntawv povthawj siv / xa tawm ua rau nws yooj yim rau cov neeg sim kom pom tseeb tias muaj dab tsi tshwm sim. Snapshots khov ib pliag hauv lub sijhawm, muaj txiaj ntsig zoo thaum koj tab tom nrhiav cov kab txawv txawv. Dab replay yog qhov zoo rau kev qhia, kev txheeb xyuas kev nkag mus tau, lossis tsuas yog sib piv cov kev tswj hwm kev teeb tsa ib sab.
Lub sijhawm no, nws tsis yog qhov zoo nkauj zoo nkauj ntxiv lawm, tab sis qee yam koj tuaj yeem ua haujlwm tiag tiag. Kev Siv Lub Ntiaj Teb tiag tiag Tam sim no peb muaj qhov debugger no uas tuaj yeem ua tau ntau yam. Nws qhia tau hais tias nyob rau hauv, sau cov cav, xa tawm lawv, thiab txawm replays khoom. Tab sis lo lus nug tiag tiag yog: leej twg mob siab tiag tiag? Qhov no pab tau rau leej twg? Game Developers Controllers yog ib feem ntawm txoj hauj lwm, tab sis debugging lawv? Feem ntau yog mob. Xav txog tias koj tab tom sim sib ntaus sib tua game combo, zoo li ↓ → + punch. Es tsis txhob thov Vajtswv, koj nias nws tib yam ob zaug, koj kaw nws ib zaug, thiab rov ua dua. Ua tiav. Los yog koj sib pauv JSON cov cav nrog cov phooj ywg los xyuas seb koj tus lej sib tw ua haujlwm puas zoo ib yam ntawm lawv lub tshuab. Qhov ntawd loj heev. Cov kws kho mob siv tau Qhov no yog nyob ze ntawm kuv lub siab. Tsis yog txhua tus ua si nrog "tus qauv" maub los. Adaptive controllers pov tawm cov cim txawv txawv qee zaum. Nrog rau cov cuab yeej no, koj tuaj yeem pom tseeb tias muaj dab tsi tshwm sim. Xibfwb, kws tshawb fawb, leej twg. Lawv tuaj yeem rub cov cav, sib piv lawv, lossis rov ua cov khoom nkag ib sab. Mam li nco dheev, cov khoom uas tsis pom kev yuav pom tseeb. Kev Ntsuam Xyuas Zoo Testers feem ntau sau ntawv zoo li "Kuv mashed nyees khawm ntawm no thiab nws tawg." Tsis pab heev. Tam sim no? Lawv tuaj yeem ntes cov xovxwm tseeb, xa tawm lub cav, thiab xa tawm. Tsis twv. Cov kws qhia ntawv Yog hais tias koj tab tom ua tutorials los yog YouTube vids, dab replay yog kub. Koj tuaj yeem hais tias, "Ntawm no yog qhov kuv tau ua nrog tus tswj hwm," thaum UI qhia tau tias nws tshwm sim. Ua kom cov lus piav qhia meej dua. Tshaj dhau Games Thiab yog, qhov no tsis yog hais txog kev ua si xwb. Tib neeg tau siv cov tswj hwm rau cov neeg hlau, cov phiaj xwm kos duab, thiab kev nkag mus tau yooj yim. Tib qhov teeb meem txhua zaus: qhov browser tiag tiag pom dab tsi? Nrog rau qhov no, koj tsis tas yuav twv. Xaus Debugging tus maub los input yeej ib txwm xav zoo li ya dig muag. Tsis zoo li DOM lossis CSS, tsis muaj tus neeg soj ntsuam ua haujlwm rau gamepads; nws tsuas yog cov lej nyoos hauv console, yooj yim poob hauv lub suab nrov. Nrog ob peb puas kab ntawm HTML, CSS, thiab JavaScript, peb tsim ib yam dab tsi txawv:
Lub qhov muag debugger uas ua rau pom cov inputs pom. Ib txheej txheej CSS uas ua rau UI huv si thiab debuggable. Ib txheej ntawm kev txhim kho (sau, xa tawm, snapshots, dab replay) uas txhawb nqa nws los ntawm demo mus rau cov cuab yeej tsim tawm.
Qhov project no qhia tau hais tias koj tuaj yeem mus deb npaum li cas los ntawm kev sib xyaw Web Platform lub zog nrog me ntsis kev muaj tswv yim hauv CSS Cascade Layers. Cov cuab yeej kuv nyuam qhuav piav qhia nyob rau hauv nws tag nrho yog qhib-qhov chaw. Koj tuaj yeem clone GitHub repo thiab sim rau koj tus kheej. Tab sis qhov tseem ceeb tshaj, koj tuaj yeem ua rau koj tus kheej. Ntxiv koj cov khaubncaws sab nraud povtseg. Tsim koj tus kheej replay logic. Ua ke nws nrog koj tus qauv kev ua si. Los sis txawm siv nws hauv txoj kev uas kuv tsis tau xav txog. Rau kev qhia, nkag mus tau, lossis kev txheeb xyuas cov ntaub ntawv. Thaum kawg ntawm hnub, qhov no tsis yog hais txog kev debugging gamepads. Nws yog hais txog kev ci ntsa iab ntawm cov khoom siv zais, thiab muab cov neeg tsim khoom tso siab rau ua haujlwm nrog kho vajtse uas lub vev xaib tseem tsis tau txais kev txhawb nqa. Yog li, ntsaws rau hauv koj tus maub los, qhib koj tus editor, thiab pib sim. Tej zaum koj yuav xav tsis thoob ntawm qhov koj tus browser thiab koj CSS tuaj yeem ua tiav tiag tiag.
