Gava ku hûn kontrolkerek pêve dikin, hûn bişkokan dişoxilînin, çîpkan dihejînin, tetikan dikişînin… û wekî pêşdebirek, hûn yek ji wan nabînin. Gerok wê hildide, bê guman, lê heya ku hûn jimareyan di konsolê de nenivîsin, ew nayê dîtin. Ew serêşê bi Gamepad API-ê re ye. Ew bi salan li dora xwe ye, û ew bi rastî pir hêzdar e. Hûn dikarin bişkok, çîp, tetik, xebatan bixwînin. Lê pir kes dest nadin wê. Çima? Ji ber ku bersiv tune. Di amûrên pêşdebiran de panel tune. Rêyek zelal tune ku hûn zanibin ka kontrolker jî tiştê ku hûn difikirin dikin. Mîna ku kor difire hîs dike. Vê yekê ez têra xwe aciz kirim ku ez amûrek piçûk ava bikim: Gamepad Cascade Debugger. Li şûna ku hûn li derketina konsolê binerin, hûn dîmenek zindî, înteraktîf a kontrolkerê digirin. Tiştek çap bike û ew li ser ekranê reaksiyon dike. Û bi CSS Cascade Layers re, şêwaz birêxistinkirî dimînin, ji ber vê yekê ew paqijkirin paqijtir e. Di vê postê de, ez ê nîşanî we bidim ka çima kontrolkerên debugkirinê ew qas êş e, çawa CSS ji paqijkirina wê re dibe alîkar, û hûn çawa dikarin ji bo projeyên xwe debugerek dîtbarî ya ji nû ve bikar bînin ava bikin.
Tewra ku hûn karibin wan hemîyan binivîsin, hûn ê zû bi spam-ya konsolê ya nexwendî biqedin. Mînak: [0,0,1,0,0,0.5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
Tu dikarî bibêjî ku çi bişkok hatiye pêxistin? Belkî, lê tenê piştî ku çavên xwe teng bikin û çend têketin winda bikin. Ji ber vê yekê, na, dema ku dor tê xwendina danûstendinan, xeletîkirin bi hêsanî nayê. Pirsgirêk 3: Nebûna Strukturê Her çend hûn dîmenderek bilez bavêjin hev, şêwaz dikarin zû tevlihev bibin. Dewletên xwerû, çalak û debug dikarin li hev bikin, û bêyî avahiyek zelal, CSS-ya we şikestî û dirêjkirina dijwar dibe. CSS Cascade Layers dikare alîkariyê bike. Ew şêwazên ku li gorî pêşîn têne rêz kirin kom dikin, ji ber vê yekê hûn dev ji şerê taybetmendiyê berdidin û texmîn dikin, "Çima şêwaza min a debugê nayê xuyang kirin?" Di şûna wê de, hûn fikarên cuda diparêzin:
Bingeh: Standarda kontrolker, xuyangiya destpêkê. Çalak: Nîşaneyên ji bo bişkokên pêçandî û çîpên barkirî. Debug: Zêdekirina ji bo pêşdebiran (mînak, xwendinên hejmarî, rêber, û hwd.).
Ger em li gorî vê yekê di CSS-ê de qatan diyar bikin, dê me hebe: /* ji kêmtirîn berbi herî bilind */ @bingeha layer, çalak, debug;
@bingeha qatê { /* ... */ }
@layer çalak { /* ... */ }
@layer debug { /* ... */ }
Ji ber ku her qatek bi pêşbînîkirî disekine, hûn her gav dizanin ka kîjan qaîdeyan serdikeve. Ew pêşbînîkirin xeletkirinê ne tenê hêsantir dike, lê bi rastî jî rêvebirinê dike. Me pirsgirêk (têketina nedîtbar, tevlihev) û nêzîkatiya (debugerek dîtbar a ku bi Qatên Cascade ve hatî çêkirin) vegirtiye. Naha em ê di pêvajoya gav-bi-gav de bimeşin da ku debugger ava bikin. Têgeha Debugger Rêya herî hêsan a xuyangkirina têketina veşartî ev e ku meriv wê li ser ekranê xêz bike. Ya ku ev debugger dike ev e. Bişkok, tetik û joysticks hemî dîmenek xuya dikin.
Çapemenî A: Xalek ronî dibe. Düçük olmak: Dor li dora xwe dizivirin. Tetikek bi nîvî vekêşandin: Barek nîvê rê dagirtin.
Naha hûn li 0 û 1-an mêze nakin, lê bi rastî li reaksiyona zindî ya kontrolker temaşe dikin. Bê guman, gava ku hûn dest bi berhevkirina dewletên mîna xwerû, pêvekirî, agahdariya debugkirinê, belkî jî moda tomarkirinê dikin, CSS dest pê dike mezin û tevlihevtir dibe. Li wir qatên cascade bi kêrî têne. Li vir mînakek jêhatî ye: @bingeha qatê { .button { background: #222; sînor-radius: 50%; width: 40px; height: 40px; } }
@layer çalak { .button.pressed { background: #0f0; /* kesk geş */ } }
@layer debug { .button::piştî { naverok: attr(data-nirx); font-size: 12px; color: #ffff; } }
Rêza qatê girîng e: bingeh → çalak → xeletî.
bingeh kontrolker dikişîne. çalak destên dewletên zext. debug davêje ser overlays.
Parvekirina wê bi vî rengî tê vê wateyê ku hûn ne şerên taybetî yên xerîb dikin. Her qatek cihê xwe heye, û hûn her gav dizanin ka çi bi ser dikeve. Building It Out Ka em pêşî tiştek li ser ekranê bistînin. Ne hewce ye ku ew baş xuya bike - tenê pêdivî ye ku hebe ji ber vê yekê tiştek me heye ku em pê re bixebitin.
Gamepad Cascade Debugger
Ew bi rastî tenê qutiyan e. Hîn ne balkêş e, lê ew rê dide me ku em paşê bi CSS û JavaScript-ê bigirin. Baş e, ez li vir qatên kaskadê bikar tînim ji ber ku gava ku hûn dewletan zêde bikin ew tiştan organîze dike. Li vir derbaziyek dijwar heye:
/* ==================================== SETUP LAYERS CASCADE Rêzkirin girîng e: bingeh → çalak → debug ==================================== */
/* Rêza qatê li pêş diyar bike */ @bingeha layer, çalak, debug;
/* Qat 1: Şêweyên bingehîn - xuyangiya xwerû */ @bingeha qatê { .button { background: #333; sînor-radius: 50%; width: 70px; height: 70px; nîşan bide: flex; justify-content: navend; align-item: center; }
.pause { width: 20px; height: 70px; background: #333; nîşan bide: inline-block; } }
/* Layer 2: Dewletên çalak - bişkokên pêçandî digire */ @layer çalak { .button.active { background: #0f0; /* Dema ku tê pêçandin kesk geş */ veguherîn: pîvan (1.1); /* Bişkojkê hinekî mezin dike */ }
.pause.active { background: #0f0; veguherîn: scaleY(1.1); /* Dema ku tê pêçandin beralî dibe */ } }
/* Qat 3: Zêdekirina xeletiyan - agahdariya pêşdebir */ @layer debug { .button::piştî { naverok: attr(data-nirx); /* Nirxa hejmarî nîşan dide */ font-size: 12px; color: #ffff; } }
Bedewiya vê nêzîkbûnê ev e ku her qatek armancek zelal heye. Tebeqeya bingehîn çu carî nikare çalak bi ser nekeve, û çalak çu carî nikane debugê bişopîne, bêyî ku taybetmendî hebe. Ev şerên taybetmendiya CSS-ê yên ku bi gelemperî amûrên debuggkirinê dikişînin ji holê radike. Naha dixuye ku hin kom li ser paşxaneyek tarî rûniştine. Bi rastî, ne pir xirab.
Zêdekirina JavaScriptê Dema JavaScript. Li vir kontrolker bi rastî tiştek dike. Em ê vê gav bi gav ava bikin. Gav 1: Rêvebiriya Dewletê saz bikin Pêşîn, em hewceyê guhêrbaran in da ku rewşa debugger bişopînin: // ==================================== // RÊVEBERIYA DEWLETÊ // ====================================
bila running = derewîn; // Dişopîne ka debugger çalak e yan na bila rafId; // Nasnameya requestAnimationFrame ji bo betalkirinê hilîne
Van guhêrbar lûleya anîmasyonê ya ku bi domdarî têketina gamepadê dixwîne kontrol dikin. Gav 2: Çavkaniyên DOM-ê bigirin Dûv re, em referansên hemî hêmanên HTML-ê yên ku em ê nûve bikin digirin: // ==================================== // DOM ELEMENT ÇAVKANÎ // ====================================
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("rewş");
Veguheztina van referansan li pêşiyê ji lêpirsîna DOM-ê ya dubare bikêrtir e. Gav 3: Vegera Klavyeyê zêde bikin Ji bo ceribandina bêyî kontrolkerek laşî, em ê bişkokên klavyeyê li bişkokan nexşînin: // ==================================== // KEYBOARD FALLBACK (ji bo ceribandina bê kontrolker) // ====================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // Bişkojka 'p' herdu barên rawestanê kontrol dike };
Ev dihêle ku em UI-ê bi tikandina bişkokên li ser klavyeyekê ceribandin. Gav 4: Xala Nûvekirina Sereke biafirînin Li vir efsûn diqewime. Ev fonksiyon bi domdarî dimeşe û rewşa gamepadê dixwîne: // ==================================== // GAMEPADÊ NAVENDA NÛÇEYAN // ====================================
fonksiyona updateGamepad() { // Hemî lîstikên pêvekirî bistînin const gamepads = navigator.getGamepads(); heke (!gamepads) vegerin;
// Lîstika yekem a girêdayî bikar bînin const gp = gamepads[0];
heke (gp) { // Bi guheztina çîna "çalak" ve, bişkojkên nûve bikin btnA.classList.toggle("çalak", gp.buttons[0].pressed); btnB.classList.toggle("çalak", gp.buttons[1].çalak kirin); btnX.classList.toggle("çalak", gp.buttons[2].çalak kirin);
// Bişkojka rawestandinê bi dest bixe (li ser piraniya kontrolkeran nîşaneya bişkojka 9) const pausePressed = gp.buttons[9].pressed; pause1.classList.toggle("çalak", pausePressed); pause2.classList.toggle("çalak", pausePressed);
// Ji bo nîşandana statûyê navnîşek bişkokên ku niha hatine pêçan ava bikin bila were pêl kirin = []; gp.buttons.forEach((btn, i) => { ger (btn.çape kirin)pressed.push("Button" + i); });
// Ger bişkokek were pêlkirin nivîsa statûyê nûve bike ger (çape kirin.dirêj > 0) { status.textContent = "Partî: " + pressed.join(", "); } }
// Heger debuger dimeşe, lûkê bidomîne ger (direve) { rafId = requestAnimationFrame(updateGamepad); } }
Rêbaza classList.toggle() li ser bingeha ku bişkojk tê pêlkirin çîna çalak lê zêde dike an jê dike, ku ev şêwazên meya qata CSS-ê vedike. Gav 5: Bûyerên Klavyeyê bi rê ve bibin Van guhdarên bûyerê guheztina klavyeyê dixebitînin: // ==================================== // BÛYERÊN BÛYERÊN KEYBOARDÊ // ====================================
document.addEventListener("keydown", (e) => { heke (keyNexşe[e.key]) { // Hêmanên yek an pirjimar hildibijêrin eger (Array.isArray(keyNexşe[e.key])) { keyMap[e.key].forEach(el => el.classList.add("çalak")); } din { keyMap[e.key].classList.add("çalak"); } status.textContent = "Bişkojk hat pêçandin: " + e.key.toUpperCase(); } });
document.addEventListener("keyup", (e) => { heke (keyNexşe[e.key]) { // Dema ku mifteyê serbest hat berdan rewşa çalak rakin eger (Array.isArray(keyNexşe[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("çalak")); } din { keyMap[e.key].classList.remove("çalak"); } status.textContent = "Kîlî hat berdan: " + e.key.toUpperCase(); } });
Gav 6: Kontrola Destpêk / Rawestandinê zêde bikin Di dawiyê de, ji me re rêyek hewce ye ku em debugger li ser û jê bikin: // ==================================== // DEBUGGER ÇÊKIRIN/ JI KIRIN // ====================================
document.getElementById("toggle").addEventListener("bitikîne", () => { bazdan = !running; // Rewşa xebitandinê bişkînin
ger (direve) { status.textContent = "Debuger dixebite..."; updateGamepad(); // Xala nûvekirinê dest pê bike } din { status.textContent = "Debuger neçalak e"; betal AnimationFrame(rafId); // Dewrê rawestîne } });
Ji ber vê yekê erê, bişkokek bikirtînin û ew dibiriqe. Çûkê bixin û tevdigerin. Her eve. Tiştek din: nirxên xav. Carinan hûn tenê dixwazin hejmaran bibînin, ne ronahiyê.
Di vê qonaxê de, divê hûn bibînin:
Kontrolkerek hêsan a li ser ekranê, Bişkojkên ku gava ku hûn bi wan re têkilî dikin, û Xwendinek debugê ya bijartî ku nîşaneyên bişkojka pêçandî nîşan dide.
Ji bo ku ev kêmtir abstrakt be, li vir demoyek bilez a kontrolkerê li ser ekranê heye ku di wextê rast de bertek nîşan dide:
Naha, pêlkirina Destpêkirina Tomarkirinê her tiştî tomar dike heya ku hûn Tomarkirinê Rawestînin. 2. Derxistina Daneyên CSV/JSON Dema ku têketinek me hebe, em ê bixwazin wê xilas bikin.
Gav 1: Alîkariya Daxistinê Biafirînin Pêşîn, em hewceyê fonksiyonek arîkar a ku dakêşana pelan di gerokê de digire: // ==================================== // ALÎKARIYA DAXISTINÊ DELAYÊ // ====================================
fonksiyona daxistinaPel (navê pelê, naverok, cure = "nivis / sade") { // Ji naverokê blobek çêbikin const blob = new Blob([naverok], {cure}); const url = URL.createObjectURL(blob);
// Zencîreyek dakêşanê ya demkî biafirîne û pê bikirtîne const a = document.createElement("a"); a.href = url; a.download = navê pelê; a.click();
// Piştî dakêşanê URL-ya objektê paqij bike setTimeout(() => URL.revokeObjectURL(url), 100); }
Ev fonksiyon bi afirandina Blob (tiştek mezin a binary) ji daneyên we, çêkirina URLek demkî ji bo wê, û bi bernamekî klîkek zencîreyek dakêşanê dixebite. Paqijkirin piştrast dike ku em bîranînê dernaxin. Gav 2: JSON Export bi rê ve bibin JSON ji bo parastina avahiya daneya tevahî bêkêmasî ye:
// ==================================== // WEK JSON EXPORT // ====================================
document.getElementById("export-json").addEventListener("bitikîne", () => { // Kontrol bikin ka tiştek heye ku were hinardekirin eger (!frames.length) { console.warn("Ji bo îxrackirinê tomar tune."); vegera; }
// Bi metadata û çarçoweyan bargiranek çêbikin barkirina bargiraniyê = { afirandinAt: Dîroka nû().toISOSstring(), frames };
// Wekî JSON formatkirî dakêşin Pelê daxistin( "gamepad-log.json", JSON.stringify(payload, null, 2), "sepan / json" ); });
Formata JSON her tiştî birêkûpêk digire û bi hêsanî vekole dike, ji bo vegerandina nav amûrên dev an parvekirina bi hevalên tîmê re wê îdeal dike. Gav 3: Hinardekirina CSV-ê bi rê ve bibin Ji bo hinardekirina CSV, pêdivî ye ku em daneyên hiyerarşîk di rêz û stûnan de bihejînin:
//==================================== // WEK CSV EXPORT // ====================================
document.getElementById("export-csv").addEventListener("bitikîne", () => { // Kontrol bikin ka tiştek heye ku were hinardekirin eger (!frames.length) { console.warn("Ji bo îxrackirinê tomar tune."); vegera; }
// Rêza sernavê CSV ava bikin (stûnên ji bo mohra demê, hemî bişkok, hemî ax) 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";
// Rêzên daneya CSV ava bikin rêzikên const = frames.map(f => { const btnVals = f.buttons.map(b => b.value); vegera [f.t, ...btnVals, ...f.axes].join(","); }).join("\n");
// Wekî CSV dakêşin downloadFile ("gamepad-log.csv", sernav + rêz, "text/csv"); });
CSV ji bo analîzkirina daneyê birûmet e ji ber ku ew rasterast di Excel an Google Sheets de vedike, dihêle hûn nexşeyan biafirînin, daneyan fîlter bikin, an bi dîtbarî qalibên xwe bibînin. Naha ku bişkokên hinardekirinê tê de ne, hûn ê li ser panelê du vebijarkên nû bibînin: JSON û Export CSV. JSON xweş e heke hûn dixwazin têketina xav paşde bavêjin nav amûrên dev-ya xwe an li dora strukturê bigerin. CSV, ji hêla din ve, rasterast di Excel an Google Sheets de vedike, da ku hûn xêzkirin, fîlterkirin, an berhevkirina têketinê bidin hev. Nîgara jêrîn nîşan dide ka panel bi wan kontrolên zêde re çawa xuya dike.
3. Sîstema Snapshot Carinan hûn ne hewce ne tomarek tam, tenê "şûreyek" bilez a dewletên têketinê. Li wê derê bişkojka Take Snapshot alîkariyê dike.
Û JavaScript:
// ==================================== // BİXWÎNE BİXWÎNE // ====================================
document.getElementById("snapshot").addEventListener("bitikîne", () => { // Hemî lîstikên pêvekirî bistînin const pads = navigator.getGamepads(); const activePads = [];
// Binêre û rewşa her lîstika pêvekirî bigire ji bo (const gp of pads) { heke (!gp) berdewam bike; // Slotên vala derbikevin
activePads.push({ id: gp.id, // Navê kontrolker/model timestamp: performance.now(), bişkok: gp.buttons.map(b => ({ pêçandin: b.pêçandin, nirx: b.nirx })) axes: [...gp.axes] }); }
// Kontrol bikin ka lîstokek hatine dîtin eger (!activePads.length) { console.warn("Ji bo wêneyê pelên lîstikê nayên girêdan."); hişyar ("Kontrolker nehat dîtin!"); vegera; }
// Têkeve û bikarhêner agahdar bike console.log("Snapshot:", activePads); alert(Dîmenek hat girtin! ${activePads.length} kontrolker(s) hatin girtin.); });
Snapshots rewşa tam ya kontrolkerê we di yek kêliyê de cemidîne. 4. Ghost Input Replay Naha ji bo kêfê: dubarekirina têketina ghost. Ev têketinek digire û wê bi dîtbarî vedigerîne mîna ku lîstikvanek fantom kontrolker bikar tîne.
JavaScript ji bo dubarekirinê: // ==================================== // GHOST REPLAY // ====================================
document.getElementById("replay").addEventListener("bitikîne", () => { // Piştrast bikin ku tomarek me heye ku ji nû ve were lêxistin eger (!frames.length) { hişyar ("Ji bo dubarekirina tomarkirinê tune!"); vegera; }
console.log("Destpêkirina dubarekirina ghost...");
// Demjimêr bişopîne ji bo lîstika hevdemkirî bila startTime = performance.now(); bila frameIndex = 0;
// Lêgerîna anîmasyonê dubare bike gavê fonksiyonê() { const now = performance.now(); berdewam derbas bû = niha - startTime;
// Hemî çarçoveyên ku diviyabû heya niha çêbibin pêvajo bikin dema (frameIndex < frames.length && frames[frameIndex].t <= derbas bû) { const frame = frames[frameIndex];
// UI-ê bi dewletên bişkojka tomarkirî re nûve bikin btnA.classList.toggle("çalak", frame.buttons[0].pressed); btnB.classList.toggle("çalak", frame.buttons[1].pressed); btnX.classList.toggle("çalak", frame.buttons[2].pressed);
// Nîşandana statûyê nûve bike bila were pêl kirin = []; frame.buttons.forEach((btn, i) => { eger (btn.çap kirin) pêl kirin.push("Button" + i); }); ger (çape kirin.dirêj > 0) { status.textContent = "Ghost: " + pressed.join(", "); }
frameIndex++; }
// Ger çarçoveyên zêdetir hebin, gerîdeyê bidomînin eger (frameIndex < frames.length) { requestAnimationFrame(gav); } din { console.log ("Dîbare bikeqediya."); status.textContent = "Dîsa lêdan qediya"; } }
// Replay dest pê bike gav(); });
Ji bo ku debugkirin hinekî bi destan çêbike, min leyizkek ghost lê zêde kir. Gava ku we danişînek tomar kir, hûn dikarin lêdanê bixin û temaşe bikin ku UI ew tevdigere, hema hema mîna lîstikvanek fantastîk ku palê dimeşîne. Bişkojek nû ya Replay Ghost ji bo vê di panelê de xuya dike.
Record bikirtînin, bi kontrolkerê hinekî tevlihev bikin, rawestînin, dûv re ji nû ve bilîzin. UI tenê her tiştê ku we kiriye vedibêje, mîna giyanek ku li pey têketinên we tê. Çima bi van zêdegaviyan re mijûl bibin?
Tomarkirin/îxrackirin ji ceribandinan re hêsan dike ku bi rastî çi qewimî nîşan bidin. Wêneyên wêneyan demek di wextê de dicemidînin, dema ku hûn xeletiyên xerîb dişopînin pir bikêrhatî ne. Dubarekirina Ghost ji bo dersan, kontrolên gihîştinê, an tenê berhevkirina mîhengên kontrolê li kêleka hev pir xweş e.
Di vê nuqteyê de, ew êdî ne tenê demoyek paqij e, lê tiştek ku hûn bi rastî dikarin bixebitin. Dozên Bikaranîna Rast-Cîhanê Naha me ev debugger heye ku dikare gelek tiştan bike. Ew têketina zindî nîşan dide, têketin tomar dike, wan hinarde dike, û tewra tiştan jî dubare dike. Lê pirsa rast ev e: kê bi rastî eleqedar e? Ev ji bo kê kêrhatî ye? Pêşdebirên Lîstik Kontrolker beşek ji karî ne, lê xeletkirina wan? Bi gelemperî êşek. Bifikirin ku hûn berhevokek lîstika şer dikin, mîna ↓ → + punch. Li şûna ku hûn dua bikin, we du caran bi heman rengî pêl kir, hûn carekê wê tomar bikin û dubare bikin. Kirin. An jî hûn têketinên JSON bi hevalek tîmê re diguhezînin da ku hûn kontrol bikin ka koda weya pirzimanî li ser makîneya wan heman reaksiyonê dike. Ew mezin e. Bijîjkên Gihîştinê Ev yek nêzîkî dilê min e. Ne her kes bi kontrolkerek "standard" re dilîze. Kontrolkerên adaptîf carinan îşaretên xerîb derdixin. Bi vê amûrê, hûn dikarin bi rastî bibînin ka çi diqewime. Mamoste, lêkolîner, kî dibe bila bibe. Ew dikarin têketinan bigirin, wan bidin ber hev, an jî têketinên li kêleka hev dubare bikin. Ji nişkê ve, tiştên nedîtbar eşkere dibin. Testkirina Piştgiriya Kalîteyê Tester bi gelemperî notên wekî "Min bişkokên li vir şelandin û ew şikest" dinivîsin. Ne pir alîkar. Niha? Ew dikarin çapxaneyên rastîn bigirin, têketinê derxînin, û bişînin. Texmîn tune. Educators Heke hûn dersan an vîdyoyên YouTube-ê çêdikin, dubarekirina ghost zêr e. Hûn dikarin bi rastî bibêjin, "Li vir tiştê ku min bi kontrolker re kir," dema ku UI ew diqewime nîşan dide. Raveyan zelaltir dike. Beyond Games Û erê, ev ne tenê li ser lîstikan e. Mirovan ji bo robotan, projeyên hunerî, û navgînên gihîştinê kontrolker bikar anîne. Her car heman pirsgirêk: gerok bi rastî çi dibîne? Bi vê yekê, hûn ne hewce ne ku texmîn bikin. Encam Debugkirina têketina kontrolkerê her gav mîna korbûna xwe hîs dike. Berevajî DOM an CSS-ê, ji bo lîstokên lîstokan çavdêriyek çêkirî tune; ew tenê hejmarên xav di konsolê de ne, bi hêsanî di nav deng de winda dibin. Bi çend sed rêzikên HTML, CSS, û JavaScript, me tiştek cûda ava kir:
Debugerek dîtbarî ku têketinên nedîtbar xuya dike. Pergalek CSS-a qatkirî ya ku UI-yê paqij û debuggable diparêze. Komek pêşkeftinan (qeydkirin, hinardekirin, wêneyan, dubarekirina ghost) ku wê ji demo berbi amûra pêşdebiran bilind dike.
Ev proje destnîşan dike ku hûn çiqas dikarin bi tevlihevkirina hêza Platforma Webê bi afirîneriyek piçûk di CSS Cascade Layers de biçin. Amûra ku min tenê bi tevahî rave kir çavkaniya vekirî ye. Hûn dikarin depoya GitHub klon bikin û wê ji bo xwe biceribînin. Lê ya girîngtir, hûn dikarin wê xwe bikin. Qatên xwe zêde bikin. Mantiqa xweya dubarekirinê ava bikin. Wê bi prototîpa lîstika xwe re yek bikin. An jî wê bi awayên ku min xeyal nekiriye bikar bînin. Ji bo hînkirin, gihîştin, an analîzkirina daneyê. Di dawiya rojê de, ev ne tenê li ser debuggkirina lîstikên lîstokan e. Ew li ser ronîkirina têketinên veşartî ye, û pêbaweriyê dide pêşdebiran ku bi hardware ku tevn hîn jî bi tevahî hembêz nake bixebitin. Ji ber vê yekê, kontrolkerê xwe têxin, edîtorê xwe vekin, û dest bi ceribandinê bikin. Dibe ku hûn ji tiştê ku geroka we û CSS-ya we bi rastî dikarin pêk bînin şaş bimînin.
