Kung imong isaksak ang usa ka controller, imong mash button, ibalhin ang mga stick, ibira ang mga gatilyo ... ug isip usa ka developer, wala ka makakita niini. Gipili kini sa browser, sigurado, apan gawas kung nag-log ka mga numero sa console, dili kini makita. Kana ang sakit sa ulo sa Gamepad API. Sulod na sa daghang mga tuig, ug kini sa tinuud kusgan kaayo. Mahimo nimong basahon ang mga buton, stick, trigger, ang mga buhat. Apan kadaghanan sa mga tawo wala magtandog niini. Ngano man? Kay walay feedback. Walay panel sa mga himan sa developer. Wala’y klaro nga paagi aron mahibal-an kung gibuhat ba sa controller ang imong gihunahuna. Morag naglupad nga buta. Kana nga bug-at kanako igo sa paghimo sa usa ka gamay nga himan: Gamepad Cascade Debugger. Imbis nga motutok sa output sa console, makakuha ka usa ka live, interactive nga pagtan-aw sa controller. Pindota ang usa ka butang ug kini mo-react sa screen. Ug sa CSS Cascade Layers, ang mga estilo magpabilin nga organisado, mao nga mas limpyo ang pag-debug. Sa kini nga post, ipakita ko kanimo kung ngano nga ang mga tigpugong sa pag-debug usa ka sakit, kung giunsa ang pagtabang sa CSS sa paglimpyo niini, ug kung giunsa nimo paghimo ang usa ka magamit nga visual debugger alang sa imong kaugalingon nga mga proyekto.
Bisan kung mahimo nimo nga ma-log silang tanan, dali ka nga mahuman sa dili mabasa nga spam sa console. Pananglitan: [0,0,1,0,0,0.5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
Mahimo ba nimo mahibal-an kung unsang buton ang gipindot? Tingali, apan pagkahuman lamang sa pag-straight sa imong mga mata ug nawala ang pipila ka mga input. Mao nga, dili, ang pag-debug dili dali moabut kung bahin sa pagbasa sa mga input. Problema 3: Kakulang sa Istruktura Bisan kung maghiusa ka usa ka dali nga visualizer, ang mga istilo dali nga magubot. Ang default, aktibo, ug debug nga mga estado mahimong magsapaw, ug kung walay klaro nga istruktura, ang imong CSS mahimong brittle ug lisud i-extend. Makatabang ang CSS Cascade Layers. Gigrupo nila ang mga estilo ngadto sa "mga lut-od" nga gi-order sumala sa prayoridad, mao nga mohunong ka sa pagpakig-away sa espesipiko ug pagtag-an, "Nganong wala man makita ang akong estilo sa pag-debug?" Hinuon, gipadayon nimo ang bulag nga mga kabalaka:
Base: Ang sumbanan sa controller, inisyal nga panagway. Aktibo: Mga highlight para sa gipindot nga mga buton ug gibalhin nga mga stick. Debug: Mga overlay para sa mga developers (e.g., numeric readouts, guides, ug uban pa).
Kung atong ipasabut ang mga layer sa CSS sumala niini, kita adunay: /* kinaubsan ngadto sa pinakataas nga prayoridad */ @layer base, aktibo, debug;
@layer base { /* ... */ }
@layer aktibo { /* ... */ }
@layer debug { /* ... */ }
Tungod kay matag hut-ong sa matag hut-ong nga matag-an, nahibal-an nimo kanunay kung unsang mga lagda ang modaog. Kana nga predictability naghimo sa pag-debug dili lang mas sayon, apan sa pagkatinuod madumala. Gitabonan namo ang problema (dili makita, gubot nga input) ug ang pamaagi (usa ka visual debugger nga gitukod gamit ang Cascade Layers). Karon maglakaw kami sa sunod-sunod nga proseso sa paghimo sa debugger. Ang Konsepto sa Debugger Ang pinakasayon nga paagi aron makita ang tinago nga input mao ang pagdrowing lang niini sa screen. Mao kana ang gibuhat sa kini nga debugger. Ang mga butones, trigger, ug joystick tanan makakuha og biswal.
Pindota ang A: Usa ka lingin ang nagsiga. Iduso ang sungkod: Ang lingin nag-slide sa palibot. Ibira ang gatilyo sa tunga-tunga: Ang usa ka bar napuno sa tunga.
Karon wala ka nagtan-aw sa 0s ug 1s, apan sa tinuud nga pagtan-aw sa controller nga reaksyon nga live. Siyempre, sa higayon nga magsugod ka sa pagtapok sa mga estado sama sa default, gipugos, impormasyon sa pag-debug, tingali bisan usa ka mode sa pagrekord, ang CSS magsugod nga mas dako ug mas komplikado. Kana kung diin magamit ang mga cascade layer. Ania ang usa ka gihuboan nga pananglitan: @layer base { .button { background: #222; utlanan-radius: 50%; gilapdon: 40px; gitas-on: 40px; } }
@layer aktibo { .button.gipilit { background: #0f0; /* hayag nga berde */ } }
@layer debug { .button::pagkahuman { sulod: attr(data-value); gidak-on sa font: 12px; kolor: #fff; } }
Importante ang han-ay sa layer: base → aktibo → debug.
base nagkuha sa controller. aktibo nga naggunit sa mga gipugos nga estado. pag-debug sa mga overlay.
Ang pagbungkag niini sama niini nagpasabut nga wala ka nakig-away sa mga katingad-an nga piho nga mga gubat. Ang matag layer adunay iyang lugar, ug nahibal-an nimo kanunay kung unsa ang daog. Pagtukod Niini Magkuha una kita og usa ka butang sa screen. Dili kinahanglan nga maayo tan-awon - kinahanglan lang nga maglungtad aron adunay kita nga magamit.
Gamepad Cascade Debugger
Kana sa literal mga kahon lamang. Dili pa kulbahinam, apan naghatag kini kanamo og mga gunitanan aron makuha sa ulahi gamit ang CSS ug JavaScript. Okay, naggamit ako og mga cascade layer dinhi tungod kay kini nagtipig sa mga butang nga organisado sa higayon nga makadugang ka og mga estado. Ania ang usa ka lisud nga pass:
/* ================================================== CASCADE LAYERS SETUP Importante ang order: base → aktibo → debug ================================================== */
/* Ipasabot ang han-ay sa layer sa atubangan */ @layer base, aktibo, debug;
/* Layer 1: Base style - default nga hitsura */ @layer base { .button { background: #333; utlanan-radius: 50%; gilapdon: 70px; gitas-on: 70px; pagpakita: flex; justify-content: sentro; align-item: sentro; }
.pause { gilapdon: 20px; gitas-on: 70px; background: #333; display: inline-block; } }
/* Layer 2: Aktibo nga mga estado - nagdumala sa gipiit nga mga buton */ @layer aktibo { .button.aktibo { background: #0f0; /* Mahayag nga berde kung pug-on */ pagbag-o: sukdanan (1.1); /* Gipadako gamay ang buton */ }
.pause.aktibo { background: #0f0; pagbag-o: scaleY(1.1); /* Nag-unat patindog kung gipugos */ } }
/* Layer 3: Debug overlays - developer info */ @layer debug { .button::pagkahuman { sulod: attr(data-value); /* Nagpakita sa numeric value */ gidak-on sa font: 12px; kolor: #fff; } }
Ang katahum niini nga pamaagi mao nga ang matag layer adunay klaro nga katuyoan. Ang base nga layer dili gayud maka-override sa aktibo, ug ang aktibo dili gayud maka-override sa debug, bisan unsa pa ang espesipiko. Giwagtang niini ang mga giyera nga piho sa CSS nga kasagarang naghampak sa mga gamit sa pag-debug. Karon ingon og ang pipila ka mga kumpol naglingkod sa usa ka ngitngit nga background. Sa tinuod lang, dili kaayo daotan.
Pagdugang sa JavaScript Oras sa JavaScript. Dinhi diin ang tigkontrol sa tinuud adunay usa ka butang. Himoon namon kini nga lakang sa lakang. Lakang 1: I-set up ang State Management Una, kinahanglan namon ang mga variable aron masubay ang kahimtang sa debugger: // ================================================== // PAGDUMALA SA ESTADO // ==================================================
let running = bakak; // Nagsubay kung aktibo ang debugger himoa nga rafId; // Gitipigan ang requestAnimationFrame ID alang sa pagkansela
Kini nga mga variable nagkontrol sa animation loop nga padayon nga nagbasa sa input sa gamepad. Lakang 2: Kuhaa ang Mga Reperensya sa DOM Sunod, makakuha kami mga pakisayran sa tanan nga mga elemento sa HTML nga among gi-update: // ================================================== // 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");
Ang pagtipig niini nga mga reperensiya sa atubangan mas episyente kay sa balik-balik nga pagpangutana sa DOM. Lakang 3: Idugang ang Keyboard Fallback Alang sa pagsulay nga walay pisikal nga tigkontrol, among i-mapa ang mga yawe sa keyboard sa mga buton: // ================================================== // KEYBOARD FALLBACK (para sa pagsulay nga walay controller) // ==================================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // 'p' key nagkontrol sa duha ka pause bar };
Kini nagtugot kanato sa pagsulay sa UI pinaagi sa pagpindot sa mga yawe sa usa ka keyboard. Lakang 4: Paghimo sa Main Update Loop Dinhi mahitabo ang salamangka. Kini nga function nagpadayon ug nagbasa sa kahimtang sa gamepad: // ================================================== // MAIN GAMEPAD UPDATE LOOP // ==================================================
function updateGamepad() { // Kuhaa ang tanan nga konektado nga mga gamepad const gamepads = navigator.getGamepads(); kon (!gamepads) mobalik;
// Gamita ang unang konektado nga gamepad const gp = gamepads[0];
kon (gp) { // Ang pag-update sa buton nag-ingon pinaagi sa pag-toggle sa "aktibo" nga klase btnA.classList.toggle("aktibo", gp.buttons[0].gipilit); btnB.classList.toggle("aktibo", gp.buttons[1].gipilit); btnX.classList.toggle("aktibo", gp.buttons[2].gipilit);
// Pagdumala sa buton sa paghunong (button index 9 sa kadaghanan sa mga tigkontrol) const pausePressed = gp.buttons[9].gipugos; pause1.classList.toggle("aktibo", pausePressed); pause2.classList.toggle("aktibo", pausePressed);
// Paghimo usa ka lista sa karon nga gipugos nga mga buton alang sa pagpakita sa kahimtang ipapilit = []; gp.buttons.forEach((btn, i) => { kung (btn.gipugos)pressed.push("Button " + i); });
// Pag-update sa teksto sa status kung adunay mga buton nga gipugos kon (gipugos.gitas-on > 0) { status.textContent = "Gi-press: " + gi-press.join(", "); } }
// Ipadayon ang loop kung ang debugger nagdagan kon (nagdagan) { rafId = requestAnimationFrame(updateGamepad); } }
Ang classList.toggle() nga pamaagi nagdugang o nagtangtang sa aktibo nga klase base sa kung ang buton gipugos, nga nagpalihok sa among CSS layer styles. Lakang 5: Pagdumala sa Mga Panghitabo sa Keyboard Kini nga mga tigpaminaw sa panghitabo naghimo sa fallback sa keyboard: // ================================================== // MGA HANDLER SA KEYBOARD EVENT // ==================================================
document.addEventListener("keydown", (e) => { kon (keyMap[e.key]) { // Pagdumala sa usa o daghang mga elemento kon (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("aktibo")); } uban pa { keyMap[e.key].classList.add("aktibo"); } status.textContent = "Ang yawe gipugos: " + e.key.toUpperCase(); } });
document.addEventListener("keyup", (e) => { kon (keyMap[e.key]) { // Kuhaa ang aktibo nga estado kung ang yawe gipagawas kon (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("aktibo")); } uban pa { keyMap[e.key].classList.remove("aktibo"); } status.textContent = "Yawe nga gipagawas: " + e.key.toUpperCase(); } });
Lakang 6: Idugang ang Start/Stop Control Sa katapusan, kinahanglan namon ang usa ka paagi aron ma-on ug ma-off ang debugger: // ================================================== // TOGGLE DEBUGGER ON/OFF // ==================================================
document.getElementById("toggle").addEventListener("click", () => { nagdagan = !nagdagan; // I-flip ang running state
kon (nagdagan) { status.textContent = "Debugger nga nagdagan..."; updateGamepad(); // Sugdi ang update loop } uban pa { status.textContent = "Dili aktibo ang debugger"; cancelAnimationFrame(rafId); // Hunonga ang laang } });
Busa oo, pindota ang usa ka buton ug kini modan-ag. Iduso ang sungkod ug kini molihok. Mao na. Usa pa ka butang: hilaw nga kantidad. Usahay gusto nimo nga makita ang mga numero, dili mga suga.
Niini nga yugto, kinahanglan nimo nga makita:
Usa ka yano nga on-screen controller, Ang mga butones nga nag-react samtang nakig-uban ka kanila, ug Usa ka opsyonal nga pagbasa sa pag-debug nga nagpakita sa mga indeks sa gipindot nga buton.
Aron mahimo kini nga dili kaayo abstract, ania ang usa ka dali nga demo sa on-screen controller nga nag-reaksyon sa tinuud nga oras:
Karon, ang pagpindot sa Start Recording nagtala sa tanan hangtod naigo nimo ang Stop Recording. 2. Pag-eksport sa Data ngadto sa CSV/JSON Sa higayon nga kita adunay usa ka log, gusto namong i-save kini.
Lakang 1: Paghimo Ang Download Helper Una, kinahanglan namon ang usa ka function sa katabang nga nagdumala sa mga pag-download sa file sa browser: // ================================================== // FILE DOWNLOAD HELPER // ==================================================
function downloadFile(filename, content, type = "text/plain") { // Paghimo usa ka blob gikan sa sulud const blob = bag-ong Blob([sulod], {type}); const url = URL.createObjectURL(blob);
// Paghimo usa ka temporaryo nga link sa pag-download ug i-klik kini const a = document.createElement("a"); a.href = url; a.download = ngalan sa file; a.click();
// Limpyohi ang URL sa butang pagkahuman sa pag-download setTimeout(() => URL.revokeObjectURL(url), 100); }
Kini nga function naglihok pinaagi sa pagmugna og Blob (binary large object) gikan sa imong data, paghimo og temporaryo nga URL para niini, ug programmatically click sa download link. Ang paglimpyo nagsiguro nga dili kami makatulo sa memorya. Lakang 2: Pagdumala sa JSON Export Ang JSON perpekto alang sa pagpreserbar sa kompleto nga istruktura sa datos:
// ================================================== // EXPORT AS JSON // ==================================================
document.getElementById("export-json").addEventListener("click", () => { // Susiha kon aduna bay butang nga i-eksport kon (!frames.length) { console.warning("Walay recording nga ma-export."); pagbalik; }
// Paghimo og payload nga adunay metadata ug mga frame const payload = { gibuhatAt: bag-ong Petsa().toISOString(), mga bayanan };
// Pag-download ingon gi-format nga JSON downloadFile( "gamepad-log.json", JSON.stringify(payload, null, 2), "aplikasyon/json" ); });
Ang format sa JSON nagtipig sa tanan nga istruktura ug dali ma-parseable, nga naghimo niini nga sulundon alang sa pag-load balik sa mga himan sa dev o pagpaambit sa mga kauban sa team. Lakang 3: Pagdumala sa CSV Export Para sa CSV exports, kinahanglan natong i-flatten ang hierarchical data ngadto sa mga row ug column:
//================================================== // EXPORT AS CSV // ==================================================
document.getElementById("export-csv").addEventListener("click", () => { // Susiha kon aduna bay butang nga i-eksport kon (!frames.length) { console.warning("Walay recording nga ma-export."); pagbalik; }
// Paghimo CSV header row (kolum para sa timestamp, tanan nga mga buton, tanan nga mga wasay) const headerButtons = frames[0].buttons.map((_, i) => btn${i}); const headerAxes = mga bayanan[0].axes.map((_, i) => axis${i}); const header = ["t", ...headerButtons, ...headerAxes].join(",") + "\n";
// Paghimo ug CSV data row const rows = frames.map(f => { const btnVals = f.buttons.map(b => b.value); ibalik [f.t, ...btnVals, ...f.axes].join(","); }).join("\n");
// Pag-download isip CSV downloadFile("gamepad-log.csv", header + rows, "text/csv"); });
Ang CSV maayo alang sa pagtuki sa datos tungod kay direkta kini nga nagbukas sa Excel o Google Sheets, gitugotan ka nga maghimo mga tsart, data sa pagsala, o makita nga mga pattern nga makita. Karon nga naa na ang mga buton sa pag-eksport, makita nimo ang duha ka bag-ong kapilian sa panel: I-export ang JSON ug I-export ang CSV. Nindot ang JSON kung gusto nimo ihulog ang hilaw nga troso balik sa imong mga gamit sa dev o pagdukdok sa palibot sa istruktura. Ang CSV, sa laing bahin, nag-abli diretso sa Excel o Google Sheets aron mahimo nimong tsart, i-filter, o itandi ang mga input. Ang mosunud nga numero nagpakita kung unsa ang hitsura sa panel sa mga dugang nga kontrol.
3. Snapshot System Usahay dili nimo kinahanglan ang usa ka bug-os nga pagrekord, usa lang ka dali nga "screenshot" sa mga estado sa pag-input. Kana kung diin makatabang ang buton nga Take Snapshot.
Ug ang JavaScript:
// ================================================== // PAGKUHA og SNAPSHOT // ==================================================
document.getElementById("snapshot").addEventListener("click", () => { // Kuhaa ang tanan nga konektado nga mga gamepad const pads = navigator.getGamepads(); const activePads = [];
// Pag-loop ug kuhaa ang estado sa matag konektado nga gamepad para sa (const gp sa mga pad) { kon (!gp) magpadayon; // Laktawan ang walay sulod nga mga slots
activePads.push({ id: gp.id, // Ngalan/modelo sa controller timestamp: performance.now(), butones: gp.buttons.map(b => ({ gipugos: b.gipugos, bili: b.bili })), mga wasay: [...gp.axes] }); }
// Susiha kung adunay nakit-an nga mga gamepad kon (!activePads.length) { console.warning("Walay mga gamepad nga konektado para sa snapshot."); alert("Walay nakit-an nga controller!"); pagbalik; }
// Log ug ipahibalo ang tiggamit console.log("Snapshot:", activePads); alert(Snapshot gikuha! Nakuha ${activePads.length} controller(s).); });
Gi-freeze sa mga snapshot ang eksaktong kahimtang sa imong controller sa usa ka higayon. 4. Ghost Input Replay Karon para sa makalingaw: ghost input replay. Nagkinahanglan kini og usa ka troso ug gipatugtog kini balik nga makita sama sa usa ka phantom player nga naggamit sa controller.
JavaScript alang sa replay: // ================================================== // GHOST REPLAY // ==================================================
document.getElementById("replay").addEventListener("click", () => { // Siguruha nga kami adunay usa ka rekording nga i-replay kon (!frames.length) { alert("Walay recording nga replay!"); pagbalik; }
console.log("Pagsugod sa ghost replay...");
// Pagsubay sa timing para sa synced playback let startTime = performance.now(); himoa nga frameIndex = 0;
// I-replay ang animation loop lakang sa paglihok () { const karon = performance.now(); const elapsed = karon - startTime;
// Iproseso ang tanan nga mga bayanan nga mahitabo na unta karon samtang (frameIndex < frame.gitas-on && frames[frameIndex].t <= milabay) { const frame = mga bayanan [frameIndex];
// Pag-update sa UI gamit ang girekord nga buton nga estado btnA.classList.toggle("aktibo", frame.buttons[0].gipilit); btnB.classList.toggle("aktibo", frame.buttons[1].gipilit); btnX.classList.toggle("aktibo", frame.buttons[2].gipilit);
// Update status display ipapilit = []; frame.buttons.forEach((btn, i) => { if (btn.pressed) pressed.push("Button " + i); }); kon (gipugos.gitas-on > 0) { status.textContent = "Ghost: " + pressed.join(", "); }
frameIndex++; }
// Ipadayon ang loop kung adunay daghang mga frame kon (frameIndex < frames.length) { requestAnimationFrame(lakang); } uban pa { console.log("Replaynahuman."); status.textContent = "Kompleto ang pag-replay"; } }
// Sugdi ang replay lakang (); });
Aron mahimo ang pag-debug nga labi pa nga hands-on, gidugang nako ang usa ka ghost replay. Kung nakarekord na ka usa ka sesyon, mahimo nimong maigo ang pag-replay ug tan-awon ang UI nga molihok niini, hapit sama sa usa ka phantom player nga nagpadagan sa pad. Ang usa ka bag-ong Replay Ghost button nagpakita sa panel alang niini.
Hit Record, samok sa palibot sa controller sa usa ka gamay, hunong, unya replay. Gipalanog lang sa UI ang tanan nimong gibuhat, sama sa usa ka multo nga nagsunod sa imong mga input. Nganong maghago man niining mga ekstra?
Ang pagrekord/pag-export nagpasayon sa mga tester nga ipakita kung unsa gyud ang nahitabo. Ang mga snapshot nag-freeze sa makadiyot, labi ka mapuslanon kung gigukod nimo ang mga katingad-an nga mga bug. Nindot ang ghost replay para sa mga tutorial, pag-check sa accessibility, o pagtandi lang sa mga control setup nga magkatabi.
Niini nga punto, dili na kini usa ka hapsay nga demo, apan usa ka butang nga mahimo nimong buhaton. Mga Kaso sa Tinuod nga Kalibutan nga Paggamit Karon aduna na kami niini nga debugger nga makahimo og daghan. Nagpakita kini og live input, nagrekord sa mga troso, nag-eksport niini, ug bisan sa pag-replay sa mga butang. Apan ang tinuod nga pangutana mao: kinsa gyud ang nagpakabana? Kinsa kini mapuslanon? Mga Nag-develop sa Dula Ang mga controllers kabahin sa trabaho, apan ang pag-debug niini? Kasagaran usa ka kasakit. Hunahunaa nga imong gisulayan ang usa ka combo sa dula sa away, sama sa ↓ → + punch. Imbis nga mag-ampo, gipugos nimo kini sa parehas nga paagi kaduha, girekord nimo kini kausa, ug gi-replay kini. Nahuman na. O ibaylo nimo ang mga log sa JSON sa usa ka kauban sa team aron masusi kung parehas ang reaksyon sa imong Multiplayer code sa ilang makina. Dako kana. Accessibility Practitioners Kini nga usa duol sa akong kasingkasing. Dili tanan nagdula sa usa ka "standard" nga controller. Ang mga adaptive controller magpagawas usahay og mga katingad-an nga signal. Uban niini nga himan, makita nimo kung unsa gyud ang nahitabo. Mga magtutudlo, tigdukiduki, bisan kinsa. Mahimo nilang makuha ang mga troso, itandi kini, o i-replay ang mga input nga magkatabi. Sa kalit, ang dili makita nga mga butang nahimong dayag. Pagsulay sa Quality Assurance Ang mga tester kasagarang magsulat og mga nota sama sa "Gimasa nako ang mga buton dinhi ug nabuak kini." Dili kaayo makatabang. Karon? Mahimo nilang makuha ang eksaktong mga pagpindot, i-export ang log, ug ipadala kini. Walay pagtag-an. Mga magtutudlo Kung naghimo ka mga tutorial o mga video sa YouTube, ang ghost replay bulawan. Mahimo nimo nga literal nga isulti, "Ania ang akong gibuhat sa controller," samtang gipakita sa UI nga kini nahitabo. Naghimo sa mga pagpatin-aw nga mas klaro. Labaw sa Dula Ug oo, dili lang kini bahin sa mga dula. Ang mga tawo migamit ug mga controller para sa mga robot, art project, ug accessibility interface. Parehas nga isyu matag higayon: unsa gyud ang nakita sa browser? Uban niini, dili ka kinahanglan nga magtag-an. Panapos Ang pag-debug sa usa ka input sa controller kanunay nga gibati sama sa paglupad nga buta. Dili sama sa DOM o CSS, walay built-in inspector alang sa gamepads; hilaw lang kini nga mga numero sa console, dali nga nawala sa kasaba. Uban sa pipila ka gatos nga linya sa HTML, CSS, ug JavaScript, naghimo kami og lahi nga butang:
Usa ka biswal nga debugger nga naghimo sa dili makita nga mga input nga makita. Usa ka layered nga sistema sa CSS nga nagtipig sa UI nga limpyo ug ma-debug. Usa ka hugpong sa mga pagpaayo (pagrekord, pag-eksport, mga snapshot, ghost replay) nga nagpataas niini gikan sa demo ngadto sa himan sa developer.
Kini nga proyekto nagpakita kung unsa ka layo ang imong mahimo pinaagi sa pagsagol sa gahum sa Web Platform nga adunay gamay nga pagkamamugnaon sa CSS Cascade Layers. Ang himan nga akong gipasabut sa kinatibuk-an mao ang open-source. Mahimo nimong i-clone ang GitHub repo ug sulayan kini alang sa imong kaugalingon. Apan labaw sa tanan, mahimo nimo kini nga imong kaugalingon. Idugang ang imong kaugalingon nga mga layer. Paghimo sa imong kaugalingon nga replay nga lohika. I-integrate kini sa imong prototype sa dula. O bisan sa paggamit niini sa mga paagi nga wala nako mahunahuna. Para sa pagtudlo, accessibility, o data analysis. Sa katapusan sa adlaw, dili lang kini bahin sa pag-debug sa mga gamepad. Kini mahitungod sa pagdan-ag sa usa ka kahayag sa mga tinago nga mga input, ug paghatag sa mga developers sa pagsalig sa pagtrabaho uban sa hardware nga ang web sa gihapon wala sa hingpit nga pagdawat. Busa, i-plug ang imong controller, ablihi ang imong editor, ug magsugod sa pag-eksperimento. Mahimong matingala ka kung unsa gyud ang mahimo sa imong browser ug sa imong CSS.
