Tekshirish moslamasini ulaganingizda, siz tugmalarni maydalaysiz, tayoqlarni harakatlantirasiz, tetiklarni tortasiz ... va ishlab chiquvchi sifatida siz ularning hech birini ko'rmaysiz. Brauzer uni tanlaydi, albatta, lekin konsolda raqamlarni qayd qilmasangiz, u ko'rinmaydi. Bu Gamepad API bilan bosh og'rig'i. Bu ko'p yillar davomida mavjud va u juda kuchli. Siz tugmachalarni, tayoqlarni, triggerlarni, ishlarni o'qishingiz mumkin. Ammo ko'pchilik unga tegmaydi. Nega? Chunki hech qanday fikr-mulohaza yo'q. Dasturchi vositalarida panel yo'q. Nazoratchi hatto siz o'ylagan narsani qilyaptimi yoki yo'qligini bilishning aniq usuli yo'q. Bu ko'r bo'lib uchayotgandek tuyuladi. Bu meni kichik vosita yaratish uchun etarli darajada bezovta qildi: Gamepad Cascade Debugger. Konsol chiqishiga qarash o‘rniga siz kontrollerning jonli, interaktiv ko‘rinishini olasiz. Biror narsani bosing va u ekranda reaksiyaga kirishadi. Va CSS Cascade Layers bilan uslublar tartibli bo'lib qoladi, shuning uchun disk raskadrovka qilish yanada toza bo'ladi. Ushbu postda men sizga nega kontrollerlarni disk raskadrovka qilish juda og'riqli ekanligini, CSS uni tozalashga qanday yordam berishi va o'z loyihalaringiz uchun qayta foydalanish mumkin bo'lgan vizual tuzatuvchini qanday yaratishingiz mumkinligini ko'rsataman.
Agar siz ularning barchasini tizimga kirita olsangiz ham, siz tezda o'qib bo'lmaydigan konsol spamiga ega bo'lasiz. Masalan: [0,0,1,0,0,0,5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
Qaysi tugma bosilganini ayta olasizmi? Balki, lekin faqat ko'zingizni zo'rg'a bosib, bir nechta kirishni o'tkazib yuborganingizdan keyin. Shunday qilib, yo'q, kirishlarni o'qish haqida gap ketganda, disk raskadrovka oson ishlamaydi. 3-muammo: tuzilmaning etishmasligi Tez vizualizatorni yig'sangiz ham, uslublar tezda chigallashishi mumkin. Standart, faol va disk raskadrovka holatlari bir-biriga mos kelishi mumkin va aniq tuzilmasiz CSS mo'rt bo'lib qoladi va uni kengaytirish qiyin bo'ladi. CSS Cascade Layers yordam berishi mumkin. Ular uslublarni ustuvorlik bo‘yicha tartiblangan “qatlamlar”ga guruhlashadi, shuning uchun siz o‘ziga xoslik bilan kurashishni to‘xtatasiz va “Nega mening disk raskadrovka uslubim ko‘rsatilmaydi?” deb taxmin qilishni to‘xtatasiz. Buning o'rniga, siz alohida tashvishlarni saqlaysiz:
Baza: boshqaruvchining standart, dastlabki ko'rinishi. Faol: Bosilgan tugmalar va ko'chirilgan tayoqlar uchun diqqatga sazovor joylar. Nosozliklarni tuzatish: Ishlab chiquvchilar uchun qoplamalar (masalan, raqamli o'qishlar, qo'llanmalar va boshqalar).
Agar biz CSS-dagi qatlamlarni shunga ko'ra aniqlasak, bizda quyidagilar bo'ladi: /* eng pastdan yuqoriga ustuvorlik */ @qatlam bazasi, faol, disk raskadrovka;
@qatlam bazasi { /* ... */ }
@qatlam faol { /* ... */ }
@layer debug { /* ... */ }
Har bir qatlam bashorat qilinadigan tarzda to'planganligi sababli, siz har doim qaysi qoidalar g'alaba qozonishini bilasiz. Bunday bashorat qilish nosozliklarni tuzatishni nafaqat oson, balki boshqarish mumkin bo'ladi. Biz muammoni (ko'rinmas, tartibsiz kiritish) va yondashuvni (Cascade Layers yordamida yaratilgan vizual tuzatuvchi) ko'rib chiqdik. Endi tuzatuvchini yaratish uchun bosqichma-bosqich jarayonni ko'rib chiqamiz. Debugger kontseptsiyasi Yashirin kiritishni ko'rinadigan qilishning eng oson yo'li uni ekranga chizishdir. Bu tuzatuvchi shunday qiladi. Tugmalar, triggerlar va joystiklar ingl.
A tugmasini bosing: doira yonadi. Tayoqni siljiting: aylana atrofida siljiydi. Tetikni yarmiga torting: bar yarmini to'ldiradi.
Endi siz 0 va 1 larga emas, balki boshqaruvchining jonli reaksiyasini tomosha qilyapsiz. Albatta, siz sukut bo'yicha, bosilgan, disk raskadrovka ma'lumotlari, hatto yozib olish rejimi kabi holatlarni yig'ishni boshlaganingizdan so'ng, CSS kattalashib, murakkablasha boshlaydi. Bu erda kaskad qatlamlari yordam beradi. Mana, qisqartirilgan misol: @qatlam bazasi { .tugmasi { fon: #222; chegara radiusi: 50%; kengligi: 40px; balandligi: 40px; } }
@qatlam faol { .tugmasi.bosilgan { fon: #0f0; /* yorqin yashil */ } }
@layer debug { .button :: keyin { kontent: attr (ma'lumotlar-qiymat); shrift o'lchami: 12px; rang: #fff; } }
Qatlam tartibi muhim: tayanch → faol → disk raskadrovka.
baza boshqaruvchini tortadi. faol bosilgan holatlarni boshqaradi. disk raskadrovka ustki qatlamlarga tashlaydi.
Buni shunday ajratish, siz g'alati o'ziga xoslik urushlari bilan kurashmayotganingizni anglatadi. Har bir qatlamning o'z o'rni bor va siz har doim nima yutishini bilasiz. Uni qurish Keling, avval ekranda biror narsani ko'rib chiqaylik. Bu yaxshi ko'rinishga muhtoj emas - faqat mavjud bo'lishi kerak, shuning uchun bizda ishlash uchun biror narsa bor.
Gamepad kaskad tuzatuvchisi
Bu tom ma'noda shunchaki qutilar. Hozircha hayajonli emas, lekin bu bizga keyinroq CSS va JavaScript-ni qo'lga kiritish uchun qo'llarni beradi. OK, men bu yerda kaskad qatlamlaridan foydalanmoqdaman, chunki u koʻproq shtatlarni qoʻshgandan keyin narsalarni tartibga soladi. Mana qo'pol o'tish:
/* =================================== KASKAD QATATLARINI SOZLASH Buyurtma masalalari: baza → faol → disk raskadrovka ===================================== */
/* Qatlam tartibini oldindan belgilang */ @qatlam bazasi, faol, disk raskadrovka;
/* 1-qavat: Asosiy uslublar - standart ko'rinish */ @qatlam bazasi { .tugmasi { fon: #333; chegara radiusi: 50%; kengligi: 70px; balandligi: 70px; displey: moslashuvchan; asoslash-tarkib: markaz; align-elementlar: markaz; }
.pauza { kengligi: 20px; balandligi: 70px; fon: #333; displey: inline-block; } }
/* 2-qatlam: Faol holatlar - bosilgan tugmalarni boshqaradi */ @qatlam faol { .button.active { fon: #0f0; /* Bosilganda yorqin yashil */ transform: masshtab (1.1); /* tugmani biroz kattalashtiradi */ }
.pause.active { fon: #0f0; transform: scaleY(1.1); /* Bosilganda vertikal cho‘ziladi */ } }
/* 3-qavat: disk raskadrovka qoplamalari - ishlab chiquvchi haqida ma'lumot */ @layer debug { .button :: keyin { kontent: attr (ma'lumotlar-qiymat); /* Raqamli qiymatni ko'rsatadi */ shrift o'lchami: 12px; rang: #fff; } }
Ushbu yondashuvning go'zalligi shundaki, har bir qatlam aniq maqsadga ega. Asosiy qatlam hech qachon faolni bekor qila olmaydi va faol hech qachon o'ziga xosligidan qat'iy nazar disk raskadrovkani bekor qila olmaydi. Bu, odatda disk raskadrovka vositalarini bezovta qiladigan CSS o'ziga xoslik urushlarini yo'q qiladi. Endi ba'zi klasterlar qorong'i fonda o'tirganga o'xshaydi. Rostini aytsam, unchalik yomon emas.
JavaScript qo'shish JavaScript vaqti. Bu erda nazoratchi aslida biror narsa qiladi. Biz buni bosqichma-bosqich quramiz. 1-qadam: Davlat boshqaruvini sozlash Birinchidan, tuzatuvchining holatini kuzatish uchun bizga o'zgaruvchilar kerak: // ==================================== // DAVLAT BOSHQARMASI // ====================================
let run = false; // Tuzatish vositasi faol yoki yo'qligini kuzatadi rafIdga ruxsat bering; // Bekor qilish uchun requestAnimationFrame identifikatorini saqlaydi
Ushbu o'zgaruvchilar geympad ma'lumotlarini doimiy ravishda o'qiydigan animatsiya tsiklini boshqaradi. 2-qadam: DOM havolalarini oling Keyin biz yangilanadigan barcha HTML elementlariga havolalar olamiz: // ==================================== // DOM ELEMENTLARI REFERANSLARI // ====================================
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");
Ushbu ma'lumotnomalarni oldindan saqlash DOMni qayta-qayta so'rashdan ko'ra samaraliroqdir. 3-qadam: Klaviaturani qayta tiklash Jismoniy kontrollersiz sinab ko'rish uchun klaviatura tugmachalarini tugmalar bilan taqqoslaymiz: // ==================================== // KLAVYATANNI QAYTA QILISH (kontrollersiz sinov uchun) // ====================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pauza1, pauza2] // 'p' tugmasi ikkala pauza satrini boshqaradi };
Bu klaviaturadagi tugmalarni bosish orqali foydalanuvchi interfeysini sinab ko'rish imkonini beradi. 4-qadam: Asosiy yangilash tsiklini yarating Bu erda sehr sodir bo'ladi. Bu funksiya uzluksiz ishlaydi va geympad holatini o'qiydi: // ==================================== // ASOSIY O'YIN PADKINI YANGILANISH LOOP // ====================================
updateGamepad() funksiyasi { // Barcha ulangan geympadlarni oling const geympadlar = navigator.getGamepads(); agar (!gamepadlar) qaytsa;
// Birinchi ulangan geympaddan foydalaning const gp = geympadlar[0];
agar (gp) { // "Faol" sinfni almashtirish orqali tugma holatini yangilash btnA.classList.toggle("faol", gp.buttons[0].bosilgan); btnB.classList.toggle("faol", gp.buttons[1].bosilgan); btnX.classList.toggle("faol", gp.buttons[2].bosilgan);
// To'xtatib turish tugmasi (ko'p kontrollerlarda 9 tugma indeksi) const pausePressed = gp.buttons[9].bosildi; pause1.classList.toggle("faol", pausePressed); pause2.classList.toggle("faol", pausePressed);
// Holatni ko'rsatish uchun bosilgan tugmalar ro'yxatini tuzing bosilsin = []; gp.buttons.forEach((btn, i) => { agar (btn.bosilsa)pressed.push("Button" + i); });
// Agar biron bir tugma bosilsa, holat matnini yangilang agar (bosilgan. uzunlik > 0) { status.textContent = "Bosildi: " + pressed.join(", "); } }
// Agar tuzatuvchi ishlayotgan bo'lsa, tsiklni davom ettiring agar (ishlayotgan) { rafId = requestAnimationFrame(updateGamepad); } }
ClassList.toggle() usuli tugma bosilganligiga qarab faol sinfni qo'shadi yoki o'chiradi, bu bizning CSS qatlam uslublarini ishga tushiradi. 5-qadam: Klaviatura hodisalarini boshqarish Ushbu hodisa tinglovchilari klaviaturani qayta ishlashga imkon beradi: // ==================================== // KLAVVİA HODISALARINI ISHLATISH // ====================================
document.addEventListener("keydown", (e) => { agar (keyMap[e.key]) { // Bitta yoki bir nechta elementlar bilan ishlash agar (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("faol")); } boshqa { keyMap[e.key].classList.add("faol"); } status.textContent = "Klaviatura bosildi: " + e.key.toUpperCase(); } });
document.addEventListener("keyup", (e) => { agar (keyMap[e.key]) { // Kalit bo'shatilganda faol holatni olib tashlang agar (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("faol")); } boshqa { keyMap[e.key].classList.remove("faol"); } status.textContent = "Kalit chiqarildi: " + e.key.toUpperCase(); } });
6-qadam: Boshlash/To‘xtatish boshqaruvini qo‘shing Va nihoyat, tuzatuvchini yoqish va o'chirish uchun bizga kerak bo'ladi: // ==================================== // Nosozliklarni tuzatuvchini yoqish/o‘chirish // ====================================
document.getElementById("toggle").addEventListener("klik", () => { yugurish = !yugurish; // Ishlayotgan holatni aylantiring
agar (ishlayotgan) { status.textContent = "Debugger ishlamoqda..."; yangilashGamepad(); // Yangilash siklini ishga tushiring } boshqa { status.textContent = "Debugger nofaol"; cancelAnimationFrame(rafId); // Loopni to'xtating } });
Ha, tugmani bosing va u yonadi. Tayoqni itaring va u harakat qiladi. Bo'ldi shu. Yana bir narsa: xom qadriyatlar. Ba'zan siz chiroqlarni emas, balki raqamlarni ko'rishni xohlaysiz.
Ushbu bosqichda siz quyidagilarni ko'rishingiz kerak:
Oddiy ekran boshqaruvchisi, Ular bilan muloqot qilganingizda reaksiyaga kirishadigan tugmalar va Bosilgan tugma indekslarini ko'rsatadigan ixtiyoriy disk raskadrovka ko'rsatkichi.
Buni kamroq mavhum qilish uchun, bu erda real vaqt rejimida ishlaydigan ekran boshqaruvchisining tezkor demosi:
Endi “Yozishni boshlash” tugmasini bosish “Yozishni to‘xtatish” tugmasini bosmaguningizcha hamma narsani qayd qiladi. 2. Ma'lumotlarni CSV/JSON ga eksport qilish Biz jurnalga ega bo'lgach, uni saqlashni xohlaymiz.
1-qadam: Yuklab olish yordamchisini yarating Birinchidan, brauzerda fayllarni yuklash bilan shug'ullanadigan yordamchi funksiya kerak: // ==================================== // FAYLLARI YUKLAB OLISH YORDAMCHI // ====================================
faylni yuklab olish funktsiyasi (fayl nomi, mazmuni, turi = "matn/tekis") { // Tarkibdan blob yarating const blob = new Blob([tarkib], {turi}); const url = URL.createObjectURL(blob);
// Vaqtinchalik yuklab olish havolasini yarating va ustiga bosing const a = document.createElement("a"); a.href = url; a.download = fayl nomi; a.click();
// Yuklab olingandan so'ng ob'ekt URL manzilini tozalang setTimeout(() => URL.revokeObjectURL(url), 100); }
Ushbu funktsiya ma'lumotlaringizdan Blob (ikkilik katta ob'ekt) yaratish, uning uchun vaqtinchalik URL yaratish va yuklab olish havolasini dasturiy ravishda bosish orqali ishlaydi. Tozalash xotirani oqizmasligimizni ta'minlaydi. 2-qadam: JSON eksportini boshqarish JSON to'liq ma'lumotlar strukturasini saqlash uchun juda mos keladi:
// ==================================== // JSON sifatida EKSPORT // ====================================
document.getElementById("export-json").addEventListener("klik", () => { // Eksport qilinadigan biror narsa borligini tekshiring agar (!frames.length) { console.warn("Eksport uchun yozuv mavjud emas."); qaytish; }
// Metama'lumotlar va ramkalar bilan foydali yuk yarating const foydali yuk = { yaratilgan: yangi sana().toISOString(), ramkalar };
// JSON formatida yuklab oling yuklab olish fayli( "gamepad-log.json", JSON.stringify(foydali yuk, null, 2), "ilova/json" ); });
JSON formati hamma narsani tuzilgan va oson tahlil qilish imkonini beradi, bu esa uni ishlab chiquvchi vositalarga qayta yuklash yoki jamoadoshlar bilan bo‘lishish uchun ideal qiladi. 3-qadam: CSV eksportini boshqaring CSV eksporti uchun biz ierarxik ma'lumotlarni satr va ustunlarga tekislashimiz kerak:
//==================================== // CSV sifatida EKSPORT // ====================================
document.getElementById("export-csv").addEventListener("klik", () => { // Eksport qilinadigan biror narsa borligini tekshiring agar (!frames.length) { console.warn("Eksport uchun yozuv mavjud emas."); qaytish; }
// CSV sarlavhasi qatorini yarating (vaqt tamg'asi uchun ustunlar, barcha tugmalar, barcha o'qlar) 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";
// CSV ma'lumotlar qatorlarini yaratish const qatorlar = frames.map(f => { const btnVals = f.buttons.map(b => b.qiymat); return [f.t, ...btnVals, ...f.axes].join(","); }).join ("\n");
// CSV sifatida yuklab oling downloadFile("gamepad-log.csv", sarlavha + qatorlar, "matn/csv"); });
CSV ma'lumotlarni tahlil qilish uchun ajoyib, chunki u to'g'ridan-to'g'ri Excel yoki Google Sheets-da ochiladi, bu sizga diagrammalar, ma'lumotlarni filtrlash yoki vizual naqshlarni yaratish imkonini beradi. Endi eksport tugmalari yoqilgandan so'ng, panelda ikkita yangi variantni ko'rasiz: JSON eksporti va CSV eksporti. Agar siz xom jurnalni ishlab chiquvchi vositalaringizga tashlamoqchi bo'lsangiz yoki strukturani aylanib chiqmoqchi bo'lsangiz, JSON yaxshi. Boshqa tomondan, CSV to'g'ridan-to'g'ri Excel yoki Google Sheets-ga ochiladi, shunda siz kiritilgan ma'lumotlarni diagrammalashingiz, filtrlashingiz yoki taqqoslashingiz mumkin. Quyidagi rasmda ushbu qo'shimcha boshqaruv elementlari bilan panel qanday ko'rinishi ko'rsatilgan.
3. Snapshot tizimi Ba'zan sizga to'liq yozib olish kerak emas, faqat kiritilgan holatlarning tezkor "skrinshoti". Bu erda "Snapshot olish" tugmasi yordam beradi.
Va JavaScript:
// ==================================== // FOTOGA OLISH // ====================================
document.getElementById("snapshot").addEventListener("klik", () => { // Barcha ulangan geympadlarni oling const pads = navigator.getGamepads(); const activePads = [];
// Har bir ulangan geympad holatini aylantiring va yozib oling uchun (const gp of pad) { agar (!gp) davom etsa; // Bo'sh joylarni o'tkazib yuboring
activePads.push({ id: gp.id, // Controller nomi/modeli vaqt tamg'asi: performance.now(), tugmalar: gp.buttons.map(b => ({) bosilgan: b.bosilgan, qiymat: b.qiymat }))) eksa: [...gp.axes] }); }
// Har qanday geympad topilganligini tekshiring agar (!activePads.length) { console.warn("Snapshot uchun geympadlar ulanmagan."); alert("Hech qanday kontroller aniqlanmadi!"); qaytish; }
// Kirish va foydalanuvchini xabardor qilish console.log("Snapshot:", activePads); alert(Snasura olingan! ${activePads.length} kontroller(lar)i olindi); });
Snapshotlar bir vaqtning o'zida kontrolleringizning aniq holatini muzlatib qo'yadi. 4. Ghost Input Replay Endi qiziqarli uchun: sharpa kiritishni takrorlash. Bu jurnalni oladi va uni xuddi fantom pleyer boshqaruvchidan foydalanayotgandek vizual tarzda o'ynaydi.
Takrorlash uchun JavaScript: // ==================================== // GHOST TAKTARI // ====================================
document.getElementById("replay").addEventListener("klik", () => { // Qayta tinglash uchun bizda yozuv borligiga ishonch hosil qiling agar (!frames.length) { alert("Qayta o'ynatish uchun yozuv yo'q!"); qaytish; }
console.log("Ghost replay boshlanmoqda...");
// Sinxronlashtirilgan ijro uchun vaqtni kuzatish startTime = performance.now(); frameIndex = 0 bo'lsin;
// Animatsiya siklini takrorlash funktsiya qadam() { const now = performance.now(); const elapsed = now - startTime;
// Hozirgacha sodir bo'lishi kerak bo'lgan barcha ramkalarni qayta ishlang esa (frameIndex < frames.length && frames[frameIndex].t <= o'tgan) { const ramka = ramkalar[frameIndex];
// UIni yozib olingan tugma holatlari bilan yangilang btnA.classList.toggle("faol", frame.buttons[0].bosilgan); btnB.classList.toggle("faol", frame.buttons[1].bosilgan); btnX.classList.toggle("faol", frame.buttons[2].bosilgan);
// Holat ko'rinishini yangilash bosilsin = []; frame.buttons.forEach((btn, i) => { agar (btn.pressed) bosilsa.push("Button" + i); }); agar (bosilgan. uzunlik > 0) { status.textContent = "Arvoh: " + pressed.join(", "); }
frameIndex++; }
// Agar ko'proq ramkalar bo'lsa, tsiklni davom ettiring agar (frameIndex < frames.length) { requestAnimationFrame(qadam); } boshqa { console.log ("Takrorlashtugadi."); status.textContent = "Qayta ijro tugallandi"; } }
// Takrorlashni boshlang qadam(); });
Nosozliklarni tuzatishni bir oz ko'proq amaliy qilish uchun men sharpani takrorlashni qo'shdim. Seansni yozib olganingizdan so'ng, siz takrorlashni bosishingiz va UI harakatini tomosha qilishingiz mumkin, xuddi fantom o'yinchi maydonchada ishlayotgandek. Buning uchun panelda yangi Replay Ghost tugmasi paydo bo'ladi.
Yozish tugmasini bosing, kontroller bilan biroz aralashib, to'xtating, so'ngra takrorlang. UI siz qilgan hamma narsani aks ettiradi, xuddi ma'lumotlaringizdan keyin arvoh kabi. Nega bu qo'shimchalar bilan bezovta qilasiz?
Yozib olish/eksport qilish sinovchilarga nima bo'lganini aniq ko'rsatishni osonlashtiradi. Snapshotlar bir lahzada muzlaydi, g'alati xatolarni quvayotganingizda juda foydali. Ghost replay o‘quv qo‘llanmalari, foydalanish imkoniyatini tekshirish yoki boshqaruv sozlamalarini yonma-yon taqqoslash uchun juda yaxshi.
Ayni paytda, bu endi oddiy demo emas, balki siz haqiqatda ishga tushirishingiz mumkin bo'lgan narsadir. Haqiqiy foydalanish holatlari Endi bizda juda ko'p ish qila oladigan tuzatuvchi mavjud. U jonli kiritishni ko'rsatadi, jurnallarni yozadi, ularni eksport qiladi va hatto narsalarni takrorlaydi. Ammo haqiqiy savol: aslida kimga g'amxo'rlik qiladi? Bu kim uchun foydali? O'yinni ishlab chiquvchilar Nazoratchilar ishning bir qismidir, lekin ularni tuzatish kerakmi? Odatda og'riq. Tasavvur qiling, siz ↓ → + punch kabi jangovar o‘yin kombinatsiyasini sinab ko‘ryapsiz. Namoz o'qish o'rniga, siz uni ikki marta bir xil tarzda bosasiz, bir marta yozib olasiz va uni takrorlaysiz. Bajarildi. Yoki ko'p o'yinchi kodingiz ularning mashinasida xuddi shunday reaksiyaga kirishishini tekshirish uchun JSON jurnallarini jamoadoshingiz bilan almashtirasiz. Bu juda katta. Foydalanish bo'yicha amaliyotchilar Bu mening yuragimga yaqin. Hamma ham "standart" kontroller bilan o'ynamaydi. Adaptiv kontrollerlar ba'zida g'alati signallarni chiqaradi. Ushbu vosita yordamida siz nima sodir bo'layotganini aniq ko'rishingiz mumkin. O'qituvchilar, tadqiqotchilar, kim bo'lishidan qat'iy nazar. Ular jurnallarni ushlashlari, ularni solishtirishlari yoki kirishlarni yonma-yon takrorlashlari mumkin. To'satdan ko'rinmas narsalar ayon bo'ladi. Sifat kafolati sinovi Sinovchilar odatda "Men bu erda tugmachalarni ezdim va u sindi" kabi eslatmalarni yozadilar. Juda foydali emas. Endimi? Ular aniq presslarni olishlari, jurnalni eksport qilishlari va jo'natishlari mumkin. Hech qanday taxmin yo'q. O'qituvchilar Agar siz o'quv qo'llanmalari yoki YouTube videolarini tayyorlayotgan bo'lsangiz, sharpani takrorlash oltindir. Siz tom ma'noda: "Mana men kontroller bilan nima qildim" deb aytishingiz mumkin, UI esa bu sodir bo'layotganini ko'rsatadi. Tushuntirishlarni aniqroq qiladi. O'yinlardan tashqari Ha, bu faqat o'yinlar haqida emas. Odamlar robotlar, badiiy loyihalar va qulaylik interfeyslari uchun kontrollerlardan foydalanishgan. Har safar bir xil muammo: brauzer aslida nimani ko'rmoqda? Bu bilan siz taxmin qilishingiz shart emas. Xulosa Tekshirish moslamasining kiritilishini disk raskadrovka qilish har doim uchib ketayotgandek tuyulgan. DOM yoki CSS-dan farqli o'laroq, geympadlar uchun o'rnatilgan inspektor yo'q; bu shunchaki konsoldagi xom raqamlar, shovqinda osongina yo'qoladi. Bir necha yuzlab HTML, CSS va JavaScript qatorlari bilan biz boshqacha narsani yaratdik:
Ko'rinmas kirishlarni ko'rinadigan qiladigan vizual tuzatuvchi. UI toza va tuzatilishi mumkin bo'lgan qatlamli CSS tizimi. Demodan dasturchi vositasiga ko'taradigan yaxshilanishlar to'plami (yozish, eksport qilish, oniy tasvirlar, sharpani takrorlash).
Ushbu loyiha veb-platforma kuchini CSS Cascade Layers-da ozgina ijodkorlik bilan aralashtirish orqali qanchalik uzoqqa borishingiz mumkinligini ko'rsatadi. Men to'liq tushuntirgan vosita ochiq manbadir. Siz GitHub repo-ni klonlashingiz va uni o'zingiz sinab ko'rishingiz mumkin. Lekin eng muhimi, uni o'zingiz qilishingiz mumkin. O'zingizning qatlamlaringizni qo'shing. O'zingizning takrorlash mantig'ingizni yarating. Uni o'yin prototipingiz bilan birlashtiring. Yoki hatto men tasavvur qilmagan usullarda ham foydalaning. O'qitish, foydalanish imkoniyati yoki ma'lumotlarni tahlil qilish uchun. Oxir-oqibat, bu faqat geympadlarni tuzatish haqida emas. Bu yashirin ma'lumotlarga yorug'lik berish va ishlab chiquvchilarga Internet hali ham to'liq qamrab ololmaydigan apparat bilan ishlashga ishonch berish haqida. Shunday qilib, boshqaruvchini ulang, muharriringizni oching va tajribani boshlang. Sizning brauzeringiz va CSS-ning haqiqatan ham nimaga erisha olishiga hayron bo'lishingiz mumkin.
