בייַטן דיבוג

<סקריפּט src="script.js">

אַז ס ממש נאָר באָקסעס. נאָך נישט יקסייטינג, אָבער עס גיט אונדז כאַנדאַלז צו כאַפּן שפּעטער מיט CSS און דזשאַוואַסקריפּט. אָוקיי, איך נוצן קאַסקייד לייַערס דאָ ווייַל עס האלט שטאָפּן אָרגאַניזירט אַמאָל איר לייגן מער שטאַטן. דאָ ס אַ פּראָסט גאַנג:

/* ================================= קאַסקייד לייַערס סעטאַפּ סדר ענינים: באַזע → אַקטיוו → דיבאַג =====================================*

/* דעפינירן שיכטע סדר פאָרויס */ @שיכטע באַזע, אַקטיוו, דיבאַג;

/* שיכטע 1: באַזע סטיילז - פעליקייַט אויסזען */ @layer base { .קנעפּל { הינטערגרונט: #333; גרענעץ ראַדיוס: 50%; ברייט: 70פּקס; הייך: 70פּקס; ווייַז: פלעקס; באַרעכטיקן-אינהאַלט: צענטער; align-items: צענטער; }

.pause { ברייט: 20פּקס; הייך: 70פּקס; הינטערגרונט: #333; אַרויסווייַזן: ינלינע-בלאָק; } }

/* שיכטע 2: אַקטיוו שטאַטן - כאַנדאַלז געדריקט קנעפּלעך */ @שיכטע אַקטיוו { .button.active { הינטערגרונט: #0f0; /* העל גרין ווען געדריקט */ יבערמאַכן: וואָג (1.1); /* אַ ביסל פאַרגרעסערן די קנעפּל */ }

.pause.active { הינטערגרונט: #0f0; יבערמאַכן: scaleY(1.1); /* סטרעטשיז ווערטיקלי ווען געדריקט */ } }

/* שיכטע 3: דעבוג אָוווערלייז - דעוועלאָפּער אינפֿאָרמאַציע */ @layer דיבאַג { .button::after { אינהאַלט: attr (דאַטע-ווערט); /* ווייזט די נומעריק ווערט */ שריפֿט גרייס: 12פּקס; קאָליר: #פף; } }

די שיינקייט פון דעם צוגאַנג איז אַז יעדער שיכטע האט אַ קלאָר ציל. די באַזע שיכטע קענען קיינמאָל אָווועררייד אַקטיוו, און אַקטיוו קענען קיינמאָל אָווועררייד דיבאַג, ראַגאַרדלאַס פון ספּעסיפיסיטי. דאָס ילימאַנייץ די CSS ספּעסיפיקאַטי מלחמות וואָס יוזשאַוואַלי פּלאָגן דיבאַגינג מכשירים. איצט עס קוקט ווי עטלעכע קלאַסטערז זיצן אויף אַ טונקל הינטערגרונט. האָנעסטלי, נישט צו שלעכט.

אַדינג די דזשאַוואַסקריפּט דזשאַוואַסקריפּט צייט. דאָס איז ווו דער קאָנטראָללער אַקשלי טוט עפּעס. מיר וועלן בויען דעם שריט דורך שריט. שריט 1: שטעלן אַרויף שטאַט מאַנאַגעמענט ערשטער, מיר דאַרפֿן וועריאַבאַלז צו שפּור די דיבוגגער ס שטאַט: // ================================= // שטאַט פאַרוואַלטונג // =================================

לאָזן פליסנדיק = פאַלש; // טראַקס צי די דיבוגגער איז אַקטיוו לאָזן ראַפיד; // סטאָרז די בעטן אַנימאַטיאָן פראַמע שייַן פֿאַר קאַנסאַליישאַן

די וועריאַבאַלז קאָנטראָלירן די אַנאַמיישאַן שלייף וואָס קאַנטיניואַסלי לייענט גאַמעפּאַד אַרייַנשרייַב. שריט 2: כאַפּן DOM רעפערענצן דערנאָך, מיר באַקומען באַווייַזן צו אַלע די HTML עלעמענטן וואָס מיר וועלן דערהייַנטיקן: // ================================= // דאָם עלעמענט רעפערענצן // =================================

const btna = document.getElementById ("בטן-אַ"); const btnB = document.getElementById ("בטן-ב"); const btnX = document.getElementById ("בטן-רענטגענ"); const pause1 = document.getElementById ("pause1"); const pause2 = document.getElementById ("pause2"); קאָנסט סטאַטוס = document.getElementById ("סטאַטוס");

סטאָרינג די רעפערענצן אין פראָנט איז מער עפעקטיוו ווי ריפּיטידלי אָנפרעג די DOM. טרעטן 3: לייג קיבאָרד פאָלבאַקק פֿאַר טעסטינג אָן אַ פיזיש קאַנטראָולער, מיר מאַפּע קלאַוויאַטור שליסלען צו קנעפּלעך: // ================================= // KEYBOARD FALLBACK (פֿאַר טעסטינג אָן אַ קאָנטראָללער) // =================================

const keyMap = { "אַ": btnA, "ב": בטנב, "רענטגענ": בטנקס, "פּ": [פּאַזע1, פּויזע2] // 'פּ' שליסל קאָנטראָלס ביידע פּויזע באַרס };

דאָס אַלאַוז אונדז צו פּרובירן די וי דורך דרינגלעך די שליסלען אויף אַ קלאַוויאַטור. שריט 4: שאַפֿן די הויפּט דערהייַנטיקן לופּ דאָ ס ווו די מאַגיש כאַפּאַנז. די פֿונקציע לויפט קעסיידער און לייענט גאַמעפּאַד שטאַט: // ================================= // הויפּט גאַמעפּאַד דערהייַנטיקן שלייף // =================================

פונקציע updateGamepad () { // באַקומען אַלע קאָננעקטעד גאַמעפּאַדס const gamepads = navigator.getGamepads(); אויב (! גאַמעפּאַדס) צוריקקומען;

// ניצן די ערשטער קאָננעקטעד גאַמעפּאַד const gp = גאַמעפּאַדס[0];

אויב (גפּ) { // דערהייַנטיקן קנעפּל שטאַטן דורך טאַגאַלינג די "אַקטיוו" קלאַס btna.classList.toggle ("אַקטיוו", גפּ.קנעפּלס [0]. געדריקט); btnB.classList.toggle ("אַקטיוו", גפּ.קנעפּלס [1]. געדריקט); בטנקס.קלאַסליסט.טאָגגלע ("אקטיוו", גפּ.קנעפּל [2]. געדריקט);

// שעפּן פּויזע קנעפּל (קנעפּל אינדעקס 9 אויף רובֿ קאַנטראָולערז) const pausePressed = gp.buttons[9].pressed; pause1.classList.toggle ("אַקטיוו", פּויזע פּרעסט); pause2.classList.toggle ("אַקטיוו", פּויזע פּרעסט);

// בויען אַ רשימה פון דערווייַל געדריקט קנעפּלעך פֿאַר סטאַטוס אַרויסווייַזן לאָזן געדריקט = []; gp.buttons.forEach((בטן, איך) => { אויב (btn.pressed)pressed.push ("קנעפּל " + איך); });

// דערהייַנטיקן סטאַטוס טעקסט אויב קיין קנעפּלעך זענען געדריקט אויב (פּרעסט.לענגט> 0) { status.textContent = "געדריקט: " + pressed.join(", "); } }

// פאָרזעצן די שלייף אויב דיבוגגער איז פליסנדיק אויב (לויפן) { rafId = requestAnimationFrame (ופּדאַטעGamepad); } }

די classList.toggle () אופֿן מוסיף אָדער רימוווז די אַקטיוו קלאַס באזירט אויף צי די קנעפּל איז געדריקט, וואָס טריגערז אונדזער CSS שיכטע סטיילז. שריט 5: שעפּן קלאַוויאַטור געשעענישן די געשעעניש צוהערערס מאַכן די קלאַוויאַטור פאַלבאַק אַרבעט: // ================================= // קלאַוויאַטור געשעעניש האַנדלערס // =================================

document.addEventListener("keydown", (e) => { if (keyMap[e.key]) { // שעפּן איין אָדער קייפל עלעמענטן אויב (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("אַקטיוו")); } אַנדערש { keyMap[e.key].classList.add("אַקטיוו"); } status.textContent = "שליסל געדריקט: " + e.key.toUpperCase(); } });

document.addEventListener("keyup", (e) => { if (keyMap[e.key]) { // אַראָפּנעמען אַקטיוו שטאַט ווען שליסל איז באפרייט אויב (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(על => על.קלאַסליסט.רעמאָווע("אַקטיווע")); } אַנדערש { keyMap[e.key].classList.remove("אַקטיוו"); } status.textContent = "שליסל באפרייט: " + e.key.toUpperCase(); } });

שריט 6: לייג אָנהייב / האַלטן קאָנטראָל צום סוף, מיר דאַרפֿן אַ וועג צו באַשטימען די דיבוגגער אויף און אַוועק: // ================================= // באַשטימען דיבוגגער אויף / אַוועק // =================================

document.getElementById("toggle").addEventListener("גיט", () => { פליסנדיק =! פליסנדיק; // פליפּ די פליסנדיק שטאַט

אויב (לויפן) { status.textContent = "דעבוגגער פליסנדיק..."; updateGamepad(); // אָנהייב די דערהייַנטיקן שלייף } אַנדערש { status.textContent = "דיבוגגער ינאַקטיוו"; cancelAnimationFrame (rafId); // האַלטן די שלייף } });

אַזוי יאָ, דריקן אַ קנעפּל און עס גלאָווס. שטופּן דעם שטעקן און עס באוועגט. אַז ס עס. נאָך איין זאַך: רוי וואַלועס. מאל איר נאָר ווילן צו זען נומערן, נישט לייץ.

אין דעם בינע, איר זאָל זען:

א פּשוט קאָנטראָללער אויף דעם עקראַן, קנעפּלעך וואָס רעאַגירן ווען איר ינטעראַקט מיט זיי, און אַ אַפּשאַנאַל דיבאַג רידאַוט ווייזונג געדריקט קנעפּל ינדיסיז.

צו מאַכן דעם ווייניקער אַבסטראַקט, דאָ איז אַ שנעל דעמאָ פון די קאָנטראָללער אויף דעם עקראַן ריאַקטינג אין פאַקטיש צייט:

איצט, דרינגלעך אָנהייב רעקאָרדינג לאָגס אַלץ ביז איר שלאָגן האַלטן רעקאָרדינג. 2. עקספּאָרטינג דאַטאַ צו קסוו / דזשסאָן אַמאָל מיר האָבן אַ קלאָץ, מיר וועלן צו ראַטעווען עס.

שריט 1: שאַפֿן די אראפקאפיע העלפּער ערשטער, מיר דאַרפֿן אַ העלפּער פונקציע וואָס כאַנדאַלז טעקע דאַונלאָודז אין דעם בלעטערער: // ================================= // טעקע דאַונלאָוד העלפּער // =================================

פונקציע דאַונלאָוד טעקע (טעקע נאָמען, אינהאַלט, טיפּ = "טעקסט / קלאָר") { // שאַפֿן אַ בלאָב פון די אינהאַלט const blob = נייַ בלאָב ([אינהאַלט], {טיפּ}); קאָנסט URL = URL.createObjectURL(בלאָב);

// שאַפֿן אַ צייַטווייַליק אראפקאפיע לינק און גיט עס קאָנסט אַ = דאָקומענט.קרעאַטעעלעמענט ("אַ"); a.href = URL; a.download = טעקע נאָמען; אַ.קליקק();

// ריין אַרויף די כייפעץ URL נאָך אראפקאפיע setTimeout(() => URL.revokeObjectURL(URL), 100); }

די פֿונקציע אַרבעט דורך קריייטינג אַ בלאָב (ביינערי גרויס כייפעץ) פֿון דיין דאַטן, דזשענערייטינג אַ צייַטווייַליק URL פֿאַר עס, און פּראָגראַממאַטיק קליקינג אויף אַ אראפקאפיע לינק. די קלינאַפּ ינשורז מיר טאָן ניט רינען זכּרון. שריט 2: שעפּן JSON עקספּאָרט JSON איז גאנץ פֿאַר פּראַזערווינג די גאַנץ דאַטן סטרוקטור:

// ================================= // עקספּאָרט ווי דזשסאָן // =================================

document.getElementById("export-json").addEventListener("גיט", () => { // קוק אויב עס איז עפּעס צו אַרויספירן אויב (!פראַמעס.לענגט) { console.warn ("קיין רעקאָרדינג בנימצא צו אַרויספירן."); צוריקקומען; }

// שאַפֿן אַ פּיילאָוד מיט מעטאַדאַטאַ און ראָמען קאָנסט פּיילאָוד = { באשאפן אין: נייַ טאָג().toISOString(), ראָמען };

// אראפקאפיע ווי פאָרמאַטטעד JSON אראפקאפיע טעקע ( "gamepad-log.json", JSON.stringify(פּיילאָוד, נול, 2), "אַפּפּליקאַטיאָן / דזשסאָן" ); });

די JSON פֿאָרמאַט האלט אַלץ סטראַקטשערד און לייכט פּאַרסעאַבלע, מאכן עס ידעאַל פֿאַר לאָודינג צוריק אין דעוו מכשירים אָדער ייַנטיילונג מיט טיממייץ. שריט 3: שעפּן קסוו עקספּאָרט פֿאַר CSV עקספּאָרץ, מיר דאַרפֿן צו פלאַטאַן די כייעראַרקאַקאַל דאַטן אין ראָוז און שפאלטן:

//================================== // אַרויספירן ווי קסוו // =================================

document.getElementById("export-csv").addEventListener("גיט", () => { // קוק אויב עס איז עפּעס צו אַרויספירן אויב (!פראַמעס.לענגט) { console.warn ("קיין רעקאָרדינג בנימצא צו אַרויספירן."); צוריקקומען; }

// בויען קסוו כעדער רודערן (שפאלטן פֿאַר טימעסטאַמפּ, אַלע קנעפּלעך, אַלע אַקסעס) const headerButtons = ראָמען[0].buttons.map((_, איך) => בטנ${איך}); קאָנסט כעדעראַקסעס = ראָמען [0].אַקסעס.מאַפּ ((_, איך) => אַקס $ {איך}); קאָנסט כעדער = ["ה", ... כעדער בוטטאָנס, ... העאַדעראַקסעס].דזשאָין(",") + "\n";

// בויען קסוו דאַטן ראָוז קאָנסט ראָוז = frames.map (f => { קאָנסט בטנוואַלס = פ.בוטטאָנס.מאַפּ (ב => ב.וואַליו); צוריקקומען [f.t, ...btnVals, ...f.axes].join(","); }). פאַרבינדן ("\n");

// אראפקאפיע ווי קסוו downloadFile ("gamepad-log.csv", כעדער + ראָוז, "טעקסט/קסוו"); });

CSV איז בריליאַנט פֿאַר דאַטן אַנאַליסיס ווייַל עס עפֿנט זיך גלייך אין עקססעל אָדער Google שיץ, אַזוי איר קענען מאַכן טשאַרץ, פילטער דאַטן אָדער וויזשוואַלי געפֿינען פּאַטערנז. איצט אַז די אַרויספירן קנעפּלעך זענען אין, איר וועט זען צוויי נייַע אָפּציעס אויף די טאַפליע: עקספּאָרט דזשסאָן און עקספּאָרט קסוו. JSON איז פייַן אויב איר ווילן צו וואַרפן די רוי קלאָץ צוריק אין דיין דעוו מכשירים אָדער שטורכען אַרום די סטרוקטור. CSV, אויף די אנדערע האַנט, אָפּענס גלייך אין עקססעל אָדער Google שיץ אַזוי איר קענען טשאַרט, פילטער אָדער פאַרגלייַכן ינפּוץ. די פאלגענדע פיגור ווייזט ווי די טאַפליע קוקט ווי די עקסטרע קאָנטראָלס.

3. מאָמענטבילד סיסטעם מאל איר טאָן ניט דאַרפֿן אַ פול רעקאָרדינג, נאָר אַ שנעל "סקרעענשאָט" פון אַרייַנשרייַב שטאַטן. אַז ס ווו אַ נעמען סנאַפּשאָט קנעפּל העלפט.

און די דזשאַוואַסקריפּט:

// ================================= // נעמען אַ מאָמענטבילד // =================================

document.getElementById("snapshot").addEventListener("גיט", () => { // באַקומען אַלע קאָננעקטעד גאַמעפּאַדס קאָנסט פּאַדס = navigator.getGamepads(); קאָנסט אַקטיוופּאַדס = [];

// שלייף דורך און כאַפּן די שטאַט פון יעדער קאָננעקטעד גאַמעפּאַד פֿאַר (קאָנסט גפּ פון פּאַדס) { אויב (!גפּ) פאָרזעצן; // האָפּקען ליידיק סלאָץ

activePads.push({ שייַן: gp.id, // קאָנטראָללער נאָמען / מאָדעל צייט סטאַמפּ: performance.now (), קנעפּלעך: gp.buttons.map (ב => ({ געדריקט: ב.געדריקט, ווערט: b.value })), אַקסעס: [...גפּ.אַקסעס] }); }

// קוק אויב קיין גאַמעפּאַדס זענען געפֿונען אויב (!אַקטיוועפּאַדס.לענגט) { console.warn("קיין גאַמעפּאַדס קאָננעקטעד פֿאַר מאָמענטבילד."); אַלערט ("קיין קאָנטראָללער דיטעקטאַד!"); צוריקקומען; }

// קלאָץ און געבנ צו וויסן באַניצער console.log ("Snapshot:", אַקטיוו פּאַדס); פלינק (Snapshot גענומען! קאַפּטשערד ${אַקטיוועפּאַדס.לענגטה} קאָנטראָללער(s).); });

סנאַפּשאַץ פרירן די פּינטלעך שטאַט פון דיין קאָנטראָללער אין איין מאָמענט אין צייט. 4. גייַסט ינפּוט רעפּלייַ איצט פֿאַר די שפּאַס: גייַסט אַרייַנשרייַב ריפּליי. דאָס נעמט אַ קלאָץ און פיעסעס עס וויזשוואַלי ווי אויב אַ פאַנטאָם שפּילער איז געווען ניצן די קאָנטראָללער.

דזשאַוואַסקריפּט פֿאַר ריפּליי: // ================================= // GHOST REPLAY // =================================

document.getElementById("replay").addEventListener("גיט", () => { // ענשור אַז מיר האָבן אַ רעקאָרדינג צו ריפּליי אויב (!פראַמעס.לענגט) { alert ("קיין רעקאָרדינג צו ריפּליי!"); צוריקקומען; }

console.log ("סטאַרטינג גייַסט ריפּליי ...");

// שפּור טיימינג פֿאַר סינסעד פּלייבאַק לאָזן סטאַרטטימע = פאָרשטעלונג.נאָוו (); לאָזן פראַמעינדעקס = 0;

// ריפּליי אַנאַמיישאַן שלייף פונקציע שריט () { קאָנסט איצט = פאָרשטעלונג.נאָוו (); const elapsed = איצט - סטאַרטטיים;

// פּראָצעס אַלע ראָמען וואָס זאָל האָבן פארגעקומען ביז איצט בשעת (פראַמעינדעקס <פראַמעס.לענגט && ראָמען[פראַמעינדעקס].ט <= ילאַפּסט) { קאָנסט ראַם = ראָמען [פראַמעינדעקס];

// דערהייַנטיקן וי מיט די רעקאָרדעד קנעפּל שטאַטן btna.classList.toggle ("אַקטיוו", פראַמע.קנעפּלס [0]. געדריקט); btnB.classList.toggle ("אַקטיוו", פראַמע.קנעפּלס [1]. געדריקט); בטנקס.קלאַסליסט.טאָגגלע ("אקטיוו", פראַמע.קנעפּל [2]. געדריקט);

// דערהייַנטיקן סטאַטוס אַרויסווייַזן לאָזן געדריקט = []; frame.buttons.forEach ((בטן, איך) => { אויב (בטנ.פּרעסט) פּרעסט.פּוש ("קנעפּל" + איך); }); אויב (פּרעסט.לענגט> 0) { status.textContent = "גייַסט: " + פּרעסט.דזשאָין(", "); }

פראַמעינדעקס++; }

// פאָרזעצן שלייף אויב עס זענען מער ראָמען אויב (פראַמעינדעקס <פראַמעס.לענגט) { requestAnimationFrame (שריט); } אַנדערש { console.log ("Replayפאַרטיק."); status.textContent = "ריפּלייַ גאַנץ"; } }

// אָנהייב די ריפּליי שריט (); });

צו מאַכן דיבאַגינג אַ ביסל מער האַנטיק, איך צוגעגעבן אַ גייַסט ריפּליי. אַמאָל איר האָט רעקאָרדעד אַ סעסיע, איר קענען שלאָגן ריפּליי און היטן די וי אַקט עס אויס, כּמעט ווי אַ פאַנטאָם שפּילער איז פליסנדיק די בלאָק. א נייַע Replay Ghost קנעפּל איז געוויזן אין די טאַפליע פֿאַר דעם.

שלאָגן רעקאָרד, באַלאַגאַן זיך מיט די קאָנטראָללער אַ ביסל, האַלטן, און ריפּליי. די וי נאָר עקאָוז אַלץ איר האָט געטאן, ווי אַ גייַסט נאָך דיין ינפּוץ. פארוואס אַרן מיט די עקסטראַז?

רעקאָרדינג / אַרויספירן מאכט עס גרינג פֿאַר טעסטערס צו ווייַזן פּונקט וואָס געטראפן. סנאַפּשאַץ פרירן אַ מאָמענט אין צייט, זייער נוציק ווען איר יאָגן מאָדנע באַגז. גהאָסט ריפּליי איז גרויס פֿאַר טוטאָריאַלז, אַקסעסאַביליטי טשעקס אָדער נאָר קאַמפּערינג קאָנטראָל סעטאַפּס זייַט ביי זייַט.

אין דעם פונט, עס איז ניט נאָר אַ ציכטיק דעמאָ ענימאָר, אָבער עפּעס איר קען אַקשלי שטעלן צו אַרבעטן. פאַקטיש-וועלט נוצן קאַסעס איצט מיר האָבן דעם דיבוגגער וואָס קענען טאָן אַ פּלאַץ. עס ווייַזן לעבן אַרייַנשרייַב, רעקאָרדירן לאָגס, עקספּאָרץ זיי און אפילו ריפּלייז שטאָפּן. אבער די פאַקטיש קשיא איז: ווער טאַקע זאָרגן? פֿאַר וועמען איז דאָס נוציק? שפּיל דעוועלאָפּערס קאָנטראָללער זענען טייל פון דער אַרבעט, אָבער דיבאַגינג זיי? געווענליך א ווייטאג. ימאַדזשאַן אַז איר פּרובירן אַ קאָמבאָ פון פייטינג שפּיל, ווי ↓ → + זעץ. אנשטאט דאווענען, האט מען עס צוויי מאל געדריקט אזוי, מען רעקארדירט עס איינמאל, און מען שפילט עס איבער. געטאן. אָדער איר ויסבייַטן JSON לאָגס מיט אַ מאַנשאַפֿט צו קאָנטראָלירן אויב דיין מולטיפּלייַער קאָד ריאַקץ די זעלבע אויף זייער מאַשין. דאָס איז גרויס. אַקסעסאַביליטי פּראַקטישנערז דאָס איז נאָענט צו מיין האַרץ. ניט אַלעמען פיעסעס מיט אַ "נאָרמאַל" קאָנטראָללער. אַדאַפּטיוו קאַנטראָולערז וואַרפן אויס טשודנע סיגנאַלז מאל. מיט דעם געצייַג, איר קענען זען פּונקט וואָס איז געשעעניש. לערער, פאָרשער, ווער עס יז. זיי קענען כאַפּן לאָגס, פאַרגלייַכן זיי אָדער ריפּליי ינפּוץ זייַט-ביי-זייַט. פּלוצלינג, ומזעיק שטאָפּן ווערט קלאָר ווי דער טאָג. קוואַליטי אַשוראַנס טעסטינג טעסטערס יוזשאַוואַלי שרייַבן הערות ווי "איך מאַשט קנעפּלעך דאָ און עס צעבראכן." ניט זייער נוציק. איצט? זיי קענען כאַפּן די פּינטלעך פּרעסעס, אַרויספירן דעם קלאָץ און שיקן עס אַוועק. קיין געסינג. עדזשיוקייטערז אויב איר מאַכן טוטאָריאַלז אָדער יאָוטובע ווידס, גייַסט ריפּליי איז גאָלד. איר קענט ממש זאָגן, "דאָ ס וואָס איך האָב געטאן מיט די קאָנטראָללער," בשעת די וי ווייזט אַז דאָס איז געשעעניש. מאכט דערקלערונגען פיל קלירער. ווייַטער פון גאַמעס און יאָ, דאָס איז נישט נאָר וועגן שפּילערייַ. מענטשן האָבן געוויינט קאַנטראָולערז פֿאַר ראָובאַץ, קונסט פּראַדזשעקס און אַקסעסאַביליטי ינטערפייסיז. דער זעלביקער אַרויסגעבן יעדער מאָל: וואָס איז דער בלעטערער אַקטשאַוואַלי זען? מיט דעם, איר טאָן ניט האָבן צו טרעפן. מסקנא דיבאַגינג אַ קאָנטראָללער אַרייַנשרייַב האט שטענדיק פּעלץ ווי פליענדיק בלינד. ניט ענלעך די DOM אָדער CSS, עס איז קיין געבויט-אין ינספּעקטאָר פֿאַר גאַמעפּאַדס; עס ס נאָר רוי נומערן אין די קאַנסאָול, לייכט פאַרפאַלן אין די ראַש. מיט עטלעכע הונדערט שורות פון HTML, CSS און דזשאַוואַסקריפּט, מיר געבויט עפּעס אַנדערש:

א וויזשאַוואַל דיבוגגער וואָס מאכט ומזעיק ינפּוץ קענטיק. א לייערד CSS סיסטעם וואָס האלט די וי ריין און דיבאַגאַבאַל. א סכום פון ימפּרווומאַנץ (רעקאָרדינג, עקספּאָרטינג, סנאַפּשאַץ, גייַסט ריפּליי) וואָס הייבן עס פון דעמאָ צו דעוועלאָפּער געצייַג.

דער פּרויעקט ווייזט ווי ווייַט איר קענען גיין דורך מיקסינג די מאַכט פון די וועב פּלאַטפאָרם מיט אַ ביסל שעפֿערישקייט אין CSS קאַסקאַדע לייַערס. די געצייַג איך פּונקט דערקלערט אין זיין ינטייערמאַנט איז אָפֿן-מקור. איר קענט קלאָון די GitHub רעפּאָ און פּרובירן עס פֿאַר זיך. אָבער מער ימפּאָרטאַנטלי, איר קענען מאַכן עס דיין אייגענע. לייג דיין אייגענע לייַערס. בויען דיין אייגענע ריפּליי לאָגיק. ויסשטימען עס מיט דיין שפּיל פּראָוטאַטייפּ. אָדער אפילו נוצן עס אין וועגן וואָס איך האָבן נישט ימאַדזשאַנד. פֿאַר לערנען, אַקסעסאַביליטי אָדער דאַטן אַנאַליסיס. אין די סוף פון די טאָג, דאָס איז נישט נאָר וועגן דיבאַגינג גאַמעפּאַדס. עס איז וועגן שיינינג אַ ליכט אויף פאַרבאָרגן ינפּוץ, און געבן דעוועלאָפּערס די בטחון צו אַרבעטן מיט ייַזנוואַרג וואָס די וועב נאָך נישט גאָר אַרומנעמען. אַזוי, צאַפּן דיין קאָנטראָללער, עפֿענען דיין רעדאַקטאָר און אָנהייב עקספּערימענטינג. איר קען זיין סאַפּרייזד פון וואָס דיין בלעטערער און דיין CSS קענען טאַקע דערגרייכן.