Meta twaħħal kontrollur, tgħaxxaq il-buttuni, ċċaqlaq il-bsaten, iġbed il-grillus... u bħala żviluppatur, ma tara xejn minnu. Il-browser qed jiġbor, żgur, imma sakemm ma tkunx qed tilloggja n-numri fil-console, hija inviżibbli. Dak huwa l-uġigħ ta 'ras mal-API Gamepad. Ilu snin, u fil-fatt huwa pjuttost qawwi. Tista 'taqra buttuni, bsaten, triggers, ix-xogħlijiet. Imma ħafna nies ma jmissux. Għaliex? Għax m'hemm l-ebda feedback. L-ebda panel fl-għodda tal-iżviluppatur. L-ebda mod ċar biex tkun taf jekk il-kontrollur hux qed jagħmel dak li taħseb. Tħoss li jtir għomja. Li bugged me biżżejjed biex jibni għodda żgħira: Gamepad Cascade Debugger. Minflok ma tħares lejn l-output tal-console, ikollok dehra diretta u interattiva tal-kontrollur. Agħfas xi ħaġa u tirreaġixxi fuq l-iskrin. U b'CSS Cascade Layers, l-istili jibqgħu organizzati, għalhekk huwa aktar nadif biex tiddibaggja. F'din il-kariga, ser nuruk għaliex il-kontrolluri tad-debugging huma daqshekk uġigħ, kif is-CSS jgħin biex jitnaddaf, u kif tista 'tibni debugger viżwali li jista' jerġa 'jintuża għall-proġetti tiegħek stess.
Anke jekk tkun kapaċi tilloggjahom kollha, malajr tispiċċa bi spam tal-console li ma jinqarax. Per eżempju: [0,0,1,0,0,0.5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
Tista' tgħid liema buttuna ġiet ippressata? Forsi, iżda biss wara li tisforza għajnejk u titlef ftit inputs. Allura, le, id-debugging ma jiġix faċilment meta niġu għall-qari tal-inputs. Problema 3: Nuqqas ta 'struttura Anke jekk tarmi viżwalizzatur malajr, l-istili jistgħu malajr isiru messy. L-istati default, attivi u debug jistgħu jikkoinċidu, u mingħajr struttura ċara, is-CSS tiegħek isir fraġli u diffiċli biex testendi. CSS Cascade Layers jistgħu jgħinu. Huma jiġbru l-istili f'"saffi" li huma ordnati skont il-prijorità, sabiex tieqaf tiġġieled l-ispeċifiċità u taħseb, "Għaliex l-istil tad-debug tiegħi mhux qed juri?" Minflok, inti żżomm tħassib separat:
Bażi: L-istandard tal-kontrollur, id-dehra inizjali. Attiva: Il-punti ewlenin għall-buttuni ppressati u stikek imċaqalqa. Debug: Overlays għall-iżviluppaturi (eż., qari numeriċi, gwidi, eċċ).
Kieku kellna niddefinixxu saffi fis-CSS skont dan, ikollna: /* mill-inqas għall-ogħla prijorità */ @layer bażi, attiv, debug;
@bażi tas-saff { /* ... */ }
@saff attiv { /* ... */ }
@layer debug { /* ... */ }
Minħabba li kull saff jimla b'mod prevedibbli, dejjem tkun taf liema regoli jirbħu. Dik il-prevedibbiltà tagħmel id-debugging mhux biss aktar faċli, iżda fil-fatt maniġġabbli. Aħna koprejna l-problema (inviżibbli, input messy) u l-approċċ (debugger viżwali mibni b'Cascade Layers). Issa nimxu permezz tal-proċess pass pass biex nibnu d-debugger. Il-Kunċett tad-Debugger L-eħfef mod biex tagħmel l-input moħbi viżibbli huwa li tiġbed biss fuq l-iskrin. Dak huwa dak li jagħmel dan id-debugger. Buttuni, triggers, u joysticks kollha jiksbu viżwali.
Agħfas A: Ċirku jixgħel. Nudge l-stick: Iċ-ċirku jiżżerżaq madwar. Iġbed grillu fin-nofs: Bar timla nofs.
Issa m'intix qed tħares lejn 0s u 1s, iżda fil-fatt tara l-kontrollur jirreaġixxi live. Naturalment, ladarba tibda piling fuq stati bħal default, ippressat, debug info, forsi anke mod ta 'reġistrazzjoni, is-CSS jibda jikber u aktar kumpless. Dak huwa fejn is-saffi tal-kaskata huma utli. Hawn eżempju imqaxxar: @bażi tas-saff { .button { sfond: #222; raġġ tal-fruntiera: 50%; wisa ': 40px; għoli: 40px; } }
@saff attiv { .button.ippressat { sfond: #0f0; /* aħdar jgħajjat */ } }
@layer debug { .button::wara { kontenut: attr(data-value); daqs tat-tipa: 12px; kulur: #fff; } }
L-ordni tas-saff hija importanti: bażi → attiva → debug.
bażi jiġbed il-kontrollur. attiva mankijiet ippressat stati. debug throws fuq overlays.
Tkissirha hekk ifisser li m'intix qed tiġġieled gwerer ta 'speċifiċità stramb. Kull saff għandu postu, u dejjem taf x'jirbaħ. Bini It Out Ejja nġibu xi ħaġa fuq l-iskrin l-ewwel. M'għandux għalfejn jidher tajjeb - jeħtieġ biss li jeżisti sabiex ikollna xi ħaġa x'naħdmu magħha.
Gamepad Cascade Debugger
Dak litteralment huma biss kaxxi. Għadu mhux eċċitanti, iżda tagħtina mankijiet biex naqbdu aktar tard b'CSS u JavaScript. Tajjeb, qed nuża saffi tal-kaskata hawn għax iżżomm l-affarijiet organizzati ladarba żżid aktar stati. Hawn pass mhux maħdum:
/* ===================================== SETUP TA' saffi kaskati Materji tal-ordni: bażi → attiv → debug ==================================== */
/* Iddefinixxi l-ordni tas-saff bil-quddiem */ @layer bażi, attiv, debug;
/* Saff 1: Stili bażi - dehra default */ @bażi tas-saff { .button { sfond: #333; raġġ tal-fruntiera: 50%; wisa ': 70px; għoli: 70px; wiri: flex; justify-content: ċentru; align-items: ċentru; }
.pawża { wisa ': 20px; għoli: 70px; sfond: #333; wiri: inline-block; } }
/* Saff 2: Stati attivi - jimmaniġġja buttuni ppressati */ @saff attiv { .button.active { sfond: #0f0; /* Aħdar qawwi meta jiġi ppressat */ trasforma: skala(1.1); /* Tkabbar ftit il-buttuna */ }
.pause.active { sfond: #0f0; trasforma: scaleY(1.1); /* Tiġġebbed vertikalment meta tagħfas */ } }
/* Saff 3: Debug overlays - informazzjoni għall-iżviluppatur */ @layer debug { .button::wara { kontenut: attr(data-value); /* Juri l-valur numeriku */ daqs tat-tipa: 12px; kulur: #fff; } }
Is-sbuħija ta 'dan l-approċċ hija li kull saff għandu skop ċar. Is-saff ta 'bażi qatt ma jista' jegħleb l-attiv, u l-attiv qatt ma jista' jegħleb id-debug, irrispettivament mill-ispeċifiċità. Dan jelimina l-gwerer tal-ispeċifiċità tas-CSS li normalment ibatu l-għodod tad-debugging. Issa jidher li xi raggruppamenti qed joqogħdu fuq sfond skur. Onestament, mhux ħażin wisq.
Żieda tal-JavaScript ħin JavaScript. Dan huwa fejn il-kontrollur fil-fatt jagħmel xi ħaġa. Aħna ser nibnu dan pass pass. Pass 1: Twaqqaf Ġestjoni tal-Istat L-ewwel, għandna bżonn varjabbli biex insegwu l-istat tad-debugger: // ==================================== // ĠESTJONI TAL-ISTAT // ====================================
let running = falza; // Jsegwi jekk id-debugger huwiex attiv let rafId; // Jaħżen l-ID requestAnimationFrame għall-kanċellazzjoni
Dawn il-varjabbli jikkontrollaw il-linja ta 'animazzjoni li kontinwament jaqra input gamepad. Pass 2: Aqbad ir-Referenzi DOM Sussegwentement, inġibu referenzi għall-elementi HTML kollha li ser naġġornaw: // ==================================== // REFERENZI TAL-ELEMENT DOM // ====================================
const btnA = document.getElementById ("btn-a"); const btnB = document.getElementById ("btn-b"); const btnX = document.getElementById ("btn-x"); const pause1 = document.getElementById ("pawsa1"); const pause2 = document.getElementById ("pause2"); const status = document.getElementById ("status");
Il-ħażna ta 'dawn ir-referenzi bil-quddiem hija aktar effiċjenti milli l-mistoqsija tad-DOM ripetutament. Pass 3: Żid Fallback tat-Tastiera Għall-ittestjar mingħajr kontrollur fiżiku, aħna ser nimmappjaw it-tasti tat-tastiera mal-buttuni: // ==================================== // KEYBOARD FALLBACK (għall-ittestjar mingħajr kontrollur) // ====================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pawsa1, pause2] // Iċ-ċavetta 'p' tikkontrolla ż-żewġ bars tal-pawża };
Dan jippermettilna nittestjaw l-UI billi tagħfas it-tasti fuq tastiera. Pass 4: Oħloq Il-Loop ta 'Aġġornament Prinċipali Hawn fejn isseħħ il-maġija. Din il-funzjoni taħdem kontinwament u taqra l-istat tal-gamepad: // ==================================== // LOOP PRINĊIPALI TAL-AĠĠORNAMENT TAL-GAMEPAD // ====================================
aġġornament tal-funzjoniGamepad () { // Ikseb il-gamepads kollha konnessi const gamepads = navigator.getGamepads (); jekk (!gamepads) jirritornaw;
// Uża l-ewwel gamepad konness const gp = gamepads[0];
jekk (gp) { // Aġġorna l-istati tal-buttuna billi taqleb il-klassi "attiva". btnA.classList.toggle("attiv", gp.buttons[0].pressed); btnB.classList.toggle("attiv", gp.buttons[1].pressed); btnX.classList.toggle("attiv", gp.buttons[2].pressed);
// Immaniġġja l-buttuna tal-pawża (buttuna indiċi 9 fuq il-biċċa l-kbira tal-kontrolluri) const pausePressed = gp.buttons[9].pressed; pause1.classList.toggle("attiv", pausePressed); pause2.classList.toggle("attiv", pausePressed);
// Ibni lista ta 'buttuni maħsuda bħalissa għall-wiri tal-istatus let ippressat = []; gp.buttons.forEach((btn, i) => { jekk (btn.pressed)pressed.push ("Button " + i); });
// Aġġorna t-test tal-istatus jekk xi buttuni jiġu ppressati jekk (pressed.length > 0) { status.textContent = "Ippressat: " + pressed.join(", "); } }
// Kompli l-linja jekk id-debugger ikun qed jaħdem jekk (jiġri) { rafId = talbaAnimationFrame (aġġornamentGamepad); } }
Il-metodu classList.toggle() iżid jew ineħħi l-klassi attiva bbażata fuq jekk il-buttuna hijiex ippressata, li jqanqal l-istili tas-saff CSS tagħna. Pass 5: Immaniġġja Avvenimenti tat-Tastiera Dawn is-semmiegħa tal-avvenimenti jagħmlu l-fallback tat-tastiera taħdem: // ==================================== // KEYBOARD EVENTI HANDLERS // ====================================
document.addEventListener ("keydown", (e) => { jekk (keyMap[e.key]) { // Immaniġġja elementi singoli jew multipli jekk (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("attiv")); } inkella { keyMap[e.key].classList.add("attiv"); } status.textContent = "Tasti ppressati: " + e.key.toUpperCase (); } });
document.addEventListener ("keyup", (e) => { jekk (keyMap[e.key]) { // Neħħi l-istat attiv meta ċ-ċavetta tiġi rilaxxata jekk (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("attiv")); } inkella { keyMap[e.key].classList.remove("attiv"); } status.textContent = "Ċavetta rilaxxata: " + e.key.toUpperCase (); } });
Pass 6: Żid Kontroll Start/Stop Fl-aħħarnett, neħtieġu mod kif nixgħel u titfi d-debugger: // ==================================== // IXGĦEL/ITTIFFI L-DEBUGGER // ====================================
document.getElementById("toggle").addEventListener("ikklikkja", () => { running = !running; // Aqleb l-istat tat-tħaddim
jekk (jiġri) { status.textContent = "Debugger qed jaħdem..."; updateGamepad(); // Ibda l-linja tal-aġġornament } inkella { status.textContent = "Debugger inattiv"; cancelAnimationFrame(rafId); // Waqqaf il-linja } });
Allura iva, agħfas buttuna u tiddi. Imbotta l-stick u jiċċaqlaq. Dak hu. Ħaġa oħra: valuri mhux maħduma. Kultant trid tara biss in-numri, mhux id-dwal.
F'dan l-istadju, għandek tara:
Kontrollur sempliċi fuq l-iskrin, Buttuni li jirreaġixxu hekk kif jinteraġixxu magħhom, u Qari mhux obbligatorju tad-debug li juri indiċijiet tal-buttuni ippressati.
Biex tagħmel dan inqas astratt, hawn demo mgħaġġla tal-kontrollur fuq l-iskrin li jirreaġixxi f'ħin reali:
Issa, tagħfas Start Recording tirreġistra kollox sakemm tolqot Stop Recording. 2. Esportazzjoni tad-Data għal CSV/JSON Ladarba jkollna log, inkunu rridu nsalvawh.
Pass 1: Oħloq Il-Helper Download L-ewwel, għandna bżonn funzjoni helper li tieħu ħsieb it-tniżżil tal-fajls fil-browser: // ==================================== // FILE DOWNLOAD HELPER // ====================================
funzjoni downloadFile (isem tal-fajl, kontenut, tip = "test/sempliċi") { // Oħloq blob mill-kontenut const blob = Blob ġdid ([kontenut], { tip }); const url = URL.createObjectURL (blob);
// Oħloq link tat-tniżżil temporanju u kklikkjaha const a = document.createElement ("a"); a.href = url; a.download = isem tal-fajl; a.ikklikkja ();
// Naddaf il-URL tal-oġġett wara t-tniżżil setTimeout(() => URL.revokeObjectURL(url), 100); }
Din il-funzjoni taħdem billi toħloq Blob (oġġett binarju kbir) mid-dejta tiegħek, tiġġenera URL temporanju għaliha, u tikklikkja b'mod programmatiku link tat-tniżżil. It-tindif jiżgura li ma nħallux il-memorja. Pass 2: Immaniġġja l-Esportazzjoni JSON JSON huwa perfett biex tippreserva l-istruttura sħiħa tad-dejta:
// ==================================== // ESPORTAZZJONI KIF JSON // ====================================
document.getElementById ("export-json").addEventListener ("ikklikkja", () => { // Iċċekkja jekk hemmx xi ħaġa li tesporta jekk (!frames.length) { console.warn ("L-ebda reġistrazzjoni disponibbli għall-esportazzjoni."); ritorn; }
// Oħloq payload b'metadata u frames const payload = { maħluqaFit: Data ġdida().toISOString(), frejms };
// Niżżel bħala JSON ifformattjat downloadFile( "gamepad-log.json", JSON.stringify(tagħbija, null, 2), "applikazzjoni/json" ); });
Il-format JSON iżomm kollox strutturat u faċilment parseable, li jagħmilha ideali għat-tagħbija lura f'għodod ta 'dev jew qsim ma' sħabi. Pass 3: Immaniġġja l-Esportazzjoni CSV Għall-esportazzjonijiet tas-CSV, irridu niċċattjaw id-dejta ġerarkika f'ringieli u kolonni:
//===================================== // ESPORTAZZJONI KIF CSV // ====================================
document.getElementById ("export-csv").addEventListener ("ikklikkja", () => { // Iċċekkja jekk hemmx xi ħaġa li tesporta jekk (!frames.length) { console.warn ("L-ebda reġistrazzjoni disponibbli għall-esportazzjoni."); ritorn; }
// Ibni ringiela ta' header CSV (kolonni għal timestamp, buttuni kollha, assi kollha) const headerButtons = frames[0].buttons.map((_, i) => btn${i}); const headerAxes = frames[0].axes.map((_, i) => assi${i}); const header = ["t", ...headerButtons, ...headerAxes].join(",") + "\n";
// Ibni ringieli ta' data CSV const ringieli = frames.map (f => { const btnVals = f.buttons.map (b => b.valur); return [f.t, ...btnVals, ...f.axes].join(","); }).join ("\n");
// Niżżel bħala CSV downloadFile("gamepad-log.csv", header + ringieli, "test/csv"); });
Is-CSV huwa brillanti għall-analiżi tad-dejta minħabba li jinfetaħ direttament f'Excel jew Google Sheets, u jħallik toħloq charts, tiffiltra d-dejta, jew tikxef mudelli viżwalment. Issa li l-buttuni tal-esportazzjoni jinsabu, se tara żewġ għażliet ġodda fuq il-panel: Esportazzjoni JSON u Esportazzjoni CSV. JSON huwa sabiħ jekk trid tarmi l-ġurnal mhux ipproċessat lura fl-għodda tad-dev tiegħek jew tpoġġi madwar l-istruttura. Is-CSV, min-naħa l-oħra, jinfetaħ direttament f'Excel jew Google Sheets sabiex tkun tista' tfassal, tiffiltra jew tqabbel l-inputs. Il-figura li ġejja turi kif jidher il-pannell b'dawk il-kontrolli żejda.
3. Sistema Snapshot Xi drabi m'għandekx bżonn reġistrazzjoni sħiħa, biss "screenshot" ta 'malajr ta' stati ta 'input. Dak huwa fejn buttuna Ħu Snapshot tgħin.
U l-JavaScript:
// ==================================== // ĦU SNAPSHOT // ====================================
document.getElementById("snapshot").addEventListener("ikklikkja", () => { // Ikseb il-gamepads kollha konnessi const pads = navigator.getGamepads (); const activePads = [];
// Loop permezz u jaqbad l-istat ta 'kull gamepad konness għal (kost gp ta 'pads) { jekk (!gp) tkompli; // Aqbeż slots vojta
activePads.push({ id: gp.id, // Isem/mudell tal-kontrollur timestamp: performance.now(), buttuni: gp.buttons.map(b => ({ ippressat: b.pressed, valur: b.valur })), assi: [...gp.axes] }); }
// Iċċekkja jekk instabux xi gamepads jekk (!activePads.length) { console.warn ("L-ebda gamepads konnessi għal snapshot."); alert("L-ebda kontrollur ma nstab!"); ritorn; }
// Log u jinnotifika lill-utent console.log ("Snapshot:", activePads); twissija(Snapshot meħuda! Inqabad ${activePads.length} kontrollur(i).); });
Snapshots jiffriżaw l-istat eżatt tal-kontrollur tiegħek f'mument wieħed fil-ħin. 4. Ghost Input Replay Issa għall-gost wieħed: ghost input replay. Dan jieħu log u jilgħab lura viżwalment bħallikieku player fantażma kien qed juża l-kontrollur.
JavaScript għal replay: // ==================================== // GHOST REPLAY // ====================================
document.getElementById("replay").addEventListener("ikklikkja", () => { // Żgura li għandna reġistrazzjoni biex terġa' tilgħab jekk (!frames.length) { alert("L-ebda reġistrazzjoni biex terġa' tilgħab!"); ritorn; }
console.log ("Nibda replay ghost...");
// Il-ħin tal-binarji għal daqq sinkronizzat let startTime = performance.now (); let frameIndex = 0;
// Replay animazzjoni loop pass tal-funzjoni () { const issa = performance.now (); const elapsed = issa - ħin tal-bidu;
// Ipproċessa l-frejms kollha li kellhom seħħew sa issa filwaqt li (frameIndex < frames.length && frames[frameIndex].t <= għadda) { const frame = frejms[frameIndex];
// Aġġorna l-UI bl-istati tal-buttuna rreġistrati btnA.classList.toggle("attiv", frame.buttons[0].pressed); btnB.classList.toggle("attiv", frame.buttons[1].pressed); btnX.classList.toggle("attiv", frame.buttons[2].pressed);
// Aġġorna l-wiri tal-istatus let ippressat = []; frame.buttons.forEach((btn, i) => { if (btn.pressed) pressed.push ("Button " + i); }); jekk (pressed.length > 0) { status.textContent = "Ghost: " + pressed.join(", "); }
frameIndex++; }
// Kompli loop jekk ikun hemm aktar frames jekk (frameIndex < frames.length) { talbaAnimationFrame(pass); } inkella { console.log ("Replaylest."); status.textContent = "Replay komplut"; } }
// Ibda r-replay pass(); });
Biex tagħmel id-debugging daqsxejn aktar hands-on, żidt replay ghost. Ladarba tkun irreġistrajt sessjoni, tista' tolqot replay u tara l-UI taġixxi, kważi bħal player fantażma qed imexxi l-kuxxinett. Buttuna ġdida Replay Ghost tidher fil-panel għal dan.
Hit Record, ħawwad ftit mal-kontrollur, waqqaf, imbagħad erġa' tilgħab. L-UI sempliċement tirrepeti dak kollu li għamilt, bħal ghost li jsegwi l-inputs tiegħek. Għaliex jolqot ma 'dawn ekstras?
Ir-reġistrazzjoni/l-esportazzjoni tagħmilha faċli għal dawk li jittestjaw biex juru eżattament dak li ġara. Snapshots jiffriżaw mument fil-ħin, super utli meta tkun qed tmur wara bugs fard. Ghost replay huwa kbir għal tutorials, kontrolli ta 'aċċessibbiltà, jew sempliċement iqabbel is-setups tal-kontroll ħdejn xulxin.
F'dan il-punt, m'għadhiex biss demo pulita, iżda xi ħaġa li tista' fil-fatt tħaddem. Każijiet ta' Użu fid-Dinja Reali Issa għandna dan id-debugger li jista 'jagħmel ħafna. Juri input dirett, jirreġistra zkuk, jesportahom, u anke jerġa' jreġġa' l-affarijiet. Imma l-mistoqsija vera hija: min fil-fatt jimpurtah? Għal min hu utli? Iżviluppaturi tal-logħob Il-kontrolluri huma parti mix-xogħol, iżda l-iddibaggjar tagħhom? Normalment uġigħ. Immaġina li qed tittestja kombo ta' logħba tal-ġlied, bħal ↓ → + punch. Minflok itlob, tagħfasha darbtejn bl-istess mod, tirrekordjaha darba, u terġa’ tilgħabha. Magħmul. Jew tiskambja zkuk JSON ma 'sieħeb tat-tim biex tivverifika jekk il-kodiċi multiplayer tiegħek jirreaġixxix l-istess fuq il-magna tagħhom. Dak huwa enormi. Prattikanti tal-Aċċessibilità Dan huwa għal qalbi. Mhux kulħadd jilgħab b'kontrollur "standard". Kontrolluri adattivi kultant jarmu sinjali strambi. B'din l-għodda, tista 'tara eżattament x'qed jiġri. Għalliema, riċerkaturi, min ikun. Jistgħu jaqbdu zkuk, iqabbluhom, jew jerġgħu jilagħbu l-inputs ħdejn xulxin. F'daqqa waħda, għalf inviżibbli isir ovvju. Ittestjar ta' Assigurazzjoni tal-Kwalità Dawk li jittestjaw is-soltu jiktbu noti bħal "I maxx buttuni hawn u kissru." Mhux utli ħafna. Issa? Jistgħu jaqbdu l-preses eżatti, jesportaw il-ġurnal, u jibagħtu. L-ebda guessing. Edukaturi Jekk qed tagħmel tutorials jew YouTube vids, ghost replay huwa deheb. Tista 'tgħid litteralment, "Hawn dak li għamilt mal-kontrollur," filwaqt li l-UI turi li qed jiġri. Jagħmel l-ispjegazzjonijiet aktar ċari. Lil hinn mill-Logħob U iva, dan mhux biss dwar il-logħob. In-nies użaw kontrolluri għal robots, proġetti ta 'arti, u interfaces ta' aċċessibbiltà. L-istess kwistjoni kull darba: x'qed jara fil-fatt il-browser? B'dan, m'għandekx għalfejn taqta '. Konklużjoni Id-debugging ta 'input ta' kontrollur dejjem ħass li jtir blind. B'differenza mid-DOM jew is-CSS, m'hemm l-ebda spettur integrat għal gamepads; huwa biss numri mhux maħduma fil-console, faċilment mitlufa fl-istorbju. Bi ftit mijiet ta’ linji ta’ HTML, CSS u JavaScript, bnejna xi ħaġa differenti:
Debugger viżwali li jagħmel viżibbli inputs inviżibbli. Sistema CSS f'saffi li żżomm l-UI nadifa u debuggable. Sett ta 'titjib (reġistrazzjoni, esportazzjoni, snapshots, ghost replay) li jelevah minn demo għal għodda tal-iżviluppatur.
Dan il-proġett juri kemm tista’ tasal billi tħallat il-qawwa tal-Pjattaforma tal-Web bi ftit kreattività fis-CSS Cascade Layers. L-għodda li għadni kif spjegajt fl-intier tagħha hija open source. Tista' tikklona r-repo GitHub u tipprovaha għalik innifsek. Iżda aktar importanti minn hekk, tista 'tagħmilha tiegħek. Żid is-saffi tiegħek. Ibni l-loġika tar-replay tiegħek stess. Integraha mal-prototip tal-logħba tiegħek. Jew saħansitra nużaha b'modi li ma kontx immaġinajt. Għal tagħlim, aċċessibbiltà jew analiżi tad-dejta. Fl-aħħar tal-ġurnata, dan mhux biss dwar id-debugging tal-gamepads. Huwa dwar li jixgħel dawl fuq inputs moħbija, u li jagħti lill-iżviluppaturi l-kunfidenza biex jaħdmu ma 'hardware li l-web għadu ma jħaddanx bis-sħiħ. Allura, ipplaggja l-kontrollur tiegħek, iftaħ l-editur tiegħek, u ibda tesperimenta. Tista' tkun sorpriż b'dak li l-browser tiegħek u s-CSS tiegħek jistgħu verament iwettqu.
