Та хянагчийг залгахдаа товчлууруудыг дарж, зөөгчийг хөдөлгөж, гохыг нь татдаг ... мөн хөгжүүлэгчийн хувьд та эдгээрийн аль нь ч харагдахгүй байна. Хөтөч үүнийг сонгож байгаа нь ойлгомжтой, гэхдээ та консол дээр дугаар оруулахгүй бол энэ нь харагдахгүй. Энэ бол Gamepad API-ийн толгойн өвчин юм. Энэ нь олон жилийн турш байсан бөгөөд энэ нь үнэхээр хүчирхэг юм. Та товчлуур, саваа, гох, ажлыг уншиж болно. Гэхдээ ихэнх хүмүүс үүнд хүрдэггүй. Яагаад? Учир нь санал хүсэлт байхгүй. Хөгжүүлэгчийн хэрэгсэлд самбар байхгүй. Хянагч таны бодож байгаа зүйлийг хийж байгаа эсэхийг мэдэх тодорхой арга байхгүй. Сохор нисэж байгаа юм шиг санагддаг. Энэ нь намайг багахан хэрэгсэл бүтээхэд хангалттай алдаа гаргасан: Gamepad Cascade Debugger. Консолын гаралтыг ширтэхийн оронд та хянагчийг шууд, интерактив байдлаар харах болно. Ямар нэг зүйлийг дарахад дэлгэцэн дээр хариу үйлдэл үзүүлнэ. Мөн CSS Cascade Layers-ийн тусламжтайгаар загварууд нь эмх цэгцтэй байх тул дибаг хийхэд илүү цэвэрхэн болно. Энэ нийтлэлд би хянагчийг дибаг хийх нь яагаад ийм зовлонтой байдгийг, CSS үүнийг цэвэрлэхэд хэрхэн тусалдаг, мөн та өөрийн төслүүдэд дахин ашиглах боломжтой харааны дибаг хэрхэн бүтээх талаар харуулах болно.
Та бүгдийг нь бүртгэж чадсан ч гэсэн унших боломжгүй консол спам хурдан гарах болно. Жишээ нь: [0,0,1,0,0,0,5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
Ямар товчлуур дарагдсаныг хэлж чадах уу? Магадгүй, гэхдээ нүдээ чангалж, хэд хэдэн оруулга алдсаны дараа л. Тиймээс, үгүй, оролтыг уншихад дибаг хийх нь тийм ч хялбар биш юм. Асуудал 3: Бүтцийн дутагдал Хэдийгээр та хурдан дүрслэгчийг цуглуулсан ч хэв маяг хурдан замбараагүй болно. Өгөгдмөл, идэвхтэй болон дибаг хийх төлөвүүд давхцаж болох бөгөөд тодорхой бүтэцгүй бол таны CSS хэврэг болж, өргөтгөхөд хэцүү болдог. CSS Cascade Layers нь тусалж чадна. Тэд хэв маягийг давуу эрхээр нь эрэмбэлсэн "давхарга" болгон бүлэглэдэг тул та "Яагаад миний дибаг хийх загвар харагдахгүй байна вэ?" гэж таамаглахаа больж, өвөрмөц онцлогтой тэмцэлдэхээ больсон. Үүний оронд та тусдаа санаа зовоосон асуудлуудыг хадгалдаг:
Үндсэн: Хянагчийн стандарт, анхны дүр төрх. Идэвхтэй: Товчлуур болон зөөсөн савааг онцлон тэмдэглэнэ. Дибаг хийх: Хөгжүүлэгчид зориулсан давхаргууд (жишээ нь, тоон уншлага, гарын авлага гэх мэт).
Хэрэв бид үүний дагуу CSS-ийн давхаргыг тодорхойлох байсан бол бидэнд дараах зүйлс байх болно: /* хамгийн бага ба хамгийн чухал ач холбогдолтой */ @давхаргын суурь, идэвхтэй, дибаг хийх;
@давхаргын суурь { /* ... */ }
@давхарга идэвхтэй { /* ... */ }
@давхаргын дибаг { /* ... */ }
Давхарга бүр урьдчилан таамаглах боломжтой тул та ямар дүрэм ялахыг үргэлж мэддэг. Урьдчилан таамаглах чадвар нь дибаг хийх ажлыг хялбаршуулаад зогсохгүй бодитойгоор удирдах боломжтой болгодог. Бид асуудал (үл үзэгдэх, эмх замбараагүй оролт) болон арга барилыг (Cascade Layers ашиглан бүтээсэн харааны дибаглагч) авч үзсэн. Одоо бид дибаглагчийг бий болгох алхам алхмаар үйл явцыг авч үзэх болно. Дебаггерийн тухай ойлголт Далд оруулгыг харагдахуйц болгох хамгийн хялбар арга бол зүгээр л дэлгэцэн дээр зурах явдал юм. Энэ дибаглагч үүнийг хийдэг. Товчлуур, гох, жолоодлогын товчлуурууд бүгд харагдах байдлыг олж авдаг.
A товчийг дар: Тойрог асна. Саваа түлхэх: Тойрог гулсаж байна. Хагас тийш нь гохыг тат: Бар хагасыг нь дүүргэнэ.
Одоо та 0 ба 1-ийг ширтэхгүй, харин хянагч шууд хариу үйлдэл үзүүлж байгааг харж байна. Мэдээжийн хэрэг, та анхдагч, дарагдсан, дибаг хийх мэдээлэл, магадгүй бичлэг хийх горим гэх мэт төлөвүүдийг овоолж эхлэхэд CSS улам томорч, илүү төвөгтэй болж эхэлнэ. Энд каскадын давхаргууд хэрэг болно. Энд тайлсан жишээ байна: @давхаргын суурь { .товчлуур { дэвсгэр: #222; хилийн радиус: 50%; өргөн: 40px; өндөр: 40px; } }
@давхарга идэвхтэй { .товчлуур.дарагдсан { дэвсгэр: #0f0; /* тод ногоон */ } }
@давхаргын дибаг { .товчлуур :: дараа { агуулга: attr(өгөгдлийн утга); үсгийн хэмжээ: 12px; өнгө: #fff; } }
Давхаргын дараалал чухал: суурь → идэвхтэй → дибаг хийх.
суурь нь хянагчийг зурдаг. идэвхтэй дарагдсан төлөвийг зохицуулдаг. давхарласан дээр дибаг хийх.
Үүнийг ингэж салгах нь та хачирхалтай өвөрмөц дайнтай тулалдахгүй гэсэн үг юм. Давхарга бүр өөрийн гэсэн байр суурьтай бөгөөд та юу хожихыг үргэлж мэддэг. Үүнийг бүтээх Эхлээд дэлгэцэн дээр ямар нэг зүйлийг харцгаая. Энэ нь сайхан харагдах шаардлагагүй - зүгээр л оршин байх хэрэгтэй, ингэснээр бидэнд ажиллах зүйл бий.
Gamepad Cascade Debugger
Энэ бол зүгээр л хайрцагнууд юм. Одоохондоо сэтгэл хөдөлгөм биш, гэхдээ энэ нь бидэнд дараа нь CSS болон JavaScript-ийг ашиглах боломжийг олгодог. За, би энд каскадын давхаргыг ашиглаж байна, учир нь энэ нь таныг олон муж нэмэхэд зүйлсийг эмх цэгцтэй байлгадаг. Энд бүдүүлэг дамжуулалт байна:
/* =================================== CASCADE LAYERS SETUP Захиалгын асуудал: үндсэн → идэвхтэй → дибаг хийх ==================================== */
/* Давхаргын дарааллыг урьдчилан тодорхойлох */ @давхаргын суурь, идэвхтэй, дибаг хийх;
/* 1-р давхарга: Үндсэн хэв маяг - анхдагч харагдах байдал */ @давхаргын суурь { .товчлуур { дэвсгэр: #333; хилийн радиус: 50%; өргөн: 70px; өндөр: 70px; дэлгэц: уян хатан; зөвтгөх-агуулга: төв; тэгшлэх зүйлс: төв; }
.pause { өргөн: 20px; өндөр: 70px; дэвсгэр: #333; дэлгэц: inline-block; } }
/* Давхарга 2: Идэвхтэй төлөвүүд - дарагдсан товчлууруудыг зохицуулдаг */ @давхарга идэвхтэй { .товчлуур.идэвхтэй { дэвсгэр: #0f0; /* Дарахад тод ногоон */ хувиргах: масштаб(1.1); /* товчлуурыг бага зэрэг томруулна */ }
.pause.active { дэвсгэр: #0f0; хувиргах: scaleY(1.1); /* Дарахад босоогоор сунадаг */ } }
/* 3-р давхарга: Дебаг давхарлах - хөгжүүлэгчийн мэдээлэл */ @давхаргын дибаг { .товчлуур :: дараа { агуулга: attr(өгөгдлийн утга); /* Тоон утгыг харуулна */ үсгийн хэмжээ: 12px; өнгө: #fff; } }
Энэ аргын гоо үзэсгэлэн нь давхарга бүр тодорхой зорилготой байдаг. Үндсэн давхарга нь хэзээ ч идэвхтэйг дарж чадахгүй, идэвхтэй нь онцлогоос үл хамааран дибаг хэзээ ч дарж чадахгүй. Энэ нь ихэвчлэн дибаг хийх хэрэгслүүдийг зовоодог CSS өвөрмөц байдлын дайныг арилгадаг. Одоо зарим кластерууд харанхуй дэвсгэр дээр сууж байх шиг байна. Үнэнийг хэлэхэд тийм ч муу биш.
JavaScript нэмж байна JavaScript цаг. Энэ бол хянагч ямар нэг зүйл хийдэг газар юм. Бид үүнийг алхам алхмаар бүтээх болно. Алхам 1: Төрийн менежментийг тохируулах Эхлээд дибаг хийгчийн төлөвийг хянахын тулд бидэнд хувьсагч хэрэгтэй: // ==================================== // ТӨРИЙН УДИРДЛАГА // ====================================
let run = худал; // Дибаглагч идэвхтэй байгаа эсэхийг хянадаг rafId зөвшөөрөх; // Хүчингүй болгох хүсэлтийн AnimationFrame ID-г хадгална
Эдгээр хувьсагч нь тоглоомын самбарын оролтыг тасралтгүй уншдаг хөдөлгөөнт дүрсийг удирддаг. Алхам 2: DOM лавлагааг аваарай Дараа нь бид шинэчлэх бүх HTML элементүүдийн лавлагаа авах болно: // ==================================== // DOM ЭЛЕМЕНТИЙН РЕФЕРС // ====================================
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("статус");
Эдгээр лавлагааг өмнө нь хадгалах нь DOM-г дахин дахин асуухаас илүү үр дүнтэй байдаг. Алхам 3: Гарын нөөцийг нэмнэ үү Физик хянагчгүйгээр туршихын тулд бид гарын товчлууруудыг товчлууруудтай харьцуулна: // ==================================== // KEYBOARD FALLBACK (хянагчгүйгээр турших) // ====================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // 'p' товчлуур нь түр зогсоох мөрийг хоёуланг нь хянадаг };
Энэ нь гар дээрх товчлууруудыг дарж UI-г шалгах боломжийг бидэнд олгодог. Алхам 4: Үндсэн шинэчлэлтийн гогцоо үүсгэ Энд ид шид тохиолддог. Энэ функц тасралтгүй ажиллаж, тоглоомын самбарын төлөвийг уншина: // ==================================== // ҮНДСЭН ТОГЛОЛТЫН ПЭДИЙН ШИНЭЧЛЭЛИЙН ДАГТ // ====================================
функцийг шинэчлэхGamepad() { // Холбогдсон бүх тоглоомын самбарыг аваарай const gamepads = navigator.getGamepads(); хэрэв (!gamepads) буцаж ирвэл;
// Эхний холбогдсон тоглоомын самбарыг ашигла const gp = gamepads[0];
хэрэв (gp) { // "идэвхтэй" классыг солих замаар товчлуурын төлөвийг шинэчлэх btnA.classList.toggle("идэвхтэй", gp.buttons[0].дарагдсан); btnB.classList.toggle("идэвхтэй", gp.buttons[1].дарагдсан); btnX.classList.toggle("идэвхтэй", gp.buttons[2].дарагдсан);
// Түр зогсоох товчлуурыг удирдах (ихэнх хянагч дээрх товчлуурын индекс 9) const pausePressed = gp.buttons[9].дарагдсан; pause1.classList.toggle("идэвхтэй", pausePressed); pause2.classList.toggle("идэвхтэй", pausePressed);
// Статус харуулахын тулд одоо дарагдсан товчлууруудын жагсаалтыг гарга дарсан бай = []; gp.buttons.forEach((btn, i) => { хэрэв (btn.дарсан)дарагдсан.push("Товч" + i); });
// Аливаа товчлуур дарагдсан тохиолдолд статусын текстийг шинэчилнэ үү хэрэв (дарагдсан. урт > 0) { status.textContent = "Дарагдсан: " + дарагдсан.join(", "); } }
// Хэрэв дибаглагч ажиллаж байгаа бол давталтыг үргэлжлүүлнэ үү хэрэв (гүйж байгаа) { rafId = requestAnimationFrame(updateGamepad); } }
ClassList.toggle() арга нь товчлуур дарагдсан эсэхээс хамаарч идэвхтэй анги нэмэх буюу хасах бөгөөд энэ нь манай CSS давхаргын хэв маягийг идэвхжүүлдэг. Алхам 5: Гарын үйл явдлыг зохицуулах Эдгээр үйл явдлын сонсогч нь гарны нөөцийг ажиллуулдаг: // ==================================== // ГАРЫН ҮЙЛ ЯВДАЛ ХИЙГЧИД // ====================================
document.addEventListener("keydown", (e) => { хэрэв (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) => { хэрэв (keyMap[e.key]) { // Түлхүүрийг суллах үед идэвхтэй төлөвийг арилгана хэрэв (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("идэвхтэй")); } өөр { keyMap[e.key].classList.remove("идэвхтэй"); } status.textContent = "Түлхүүр гарлаа: " + e.key.toUpperCase(); } });
Алхам 6: Start/Stop Control нэмнэ Эцэст нь бид дибаглагчийг асаах, унтраах арга хэрэгтэй байна: // ==================================== // ШИЛДЭГЧИЙГ АСААХ/УНТРААХ // ====================================
document.getElementById("шилжүүлэх").addEventListener("товшилт", () => { ажиллаж байгаа = !гүйж байгаа; // Ажиллаж байгаа төлөвийг эргүүлнэ
хэрэв (гүйж байгаа) { status.textContent = "Дабаглагч ажиллаж байна..."; Gamepad-ийг шинэчлэх(); // Шинэчлэх циклийг эхлүүлнэ үү } өөр { status.textContent = "Дабаглагч идэвхгүй"; cancelAnimationFrame(rafId); // Давталтыг зогсоо } });
Тийм ээ, товчлуурыг дарахад гэрэлтэх болно. Саваа түлхэж, хөдөлнө. Ингээд л болоо. Өөр нэг зүйл: түүхий үнэт зүйлс. Заримдаа та гэрэл биш харин тоо харахыг хүсдэг.
Энэ үе шатанд та дараахь зүйлийг харах ёстой.
Дэлгэц дээрх энгийн удирдлага, Тэдэнтэй харилцах үед хариу үйлдэл үзүүлэх товчлуурууд болон Товчлуурын индексийг харуулсан нэмэлт дибаг унших.
Үүнийг хийсвэр биш болгохын тулд дэлгэцэн дээрх хянагчийн бодит цаг хугацаанд хариу үйлдэл үзүүлэх хурдан үзүүлбэрийг энд оруулав.
Одоо "Бичлэгийг эхлүүлэх" товчийг дарснаар "Бичлэгийг зогсоох" дээр дарах хүртэл бүх зүйлийг бүртгэнэ. 2. CSV/JSON руу өгөгдлийг экспортлох Бид бүртгэлтэй болмогц бид үүнийг хадгалахыг хүсэх болно.
Алхам 1: Татаж авах туслах програмыг үүсгэ Нэгдүгээрт, бидэнд хөтөч дээр файл татаж авах үйлдлийг зохицуулах туслах функц хэрэгтэй байна. // ==================================== // ФАЙЛ ТАТАХ ТУСЛАГЧ // ====================================
Татаж авах функц (файлын нэр, агуулга, төрөл = "текст/энгийн") { // Контентоос blob үүсгэх const blob = шинэ Blob([контент], {төрөл }); const url = URL.createObjectURL(blob);
// Түр зуурын татаж авах холбоос үүсгээд түүн дээр дарна уу const a = document.createElement("a"); a.href = url; a.download = файлын нэр; a.click();
// Татаж авсны дараа объектын URL-г цэвэрлэ setTimeout(() => URL.revokeObjectURL(url), 100); }
Энэ функц нь таны өгөгдлөөс Blob (хоёртын том объект) үүсгэж, түүнд түр зуурын URL үүсгэж, татаж авах холбоос дээр программын дагуу товшиж ажилладаг. Цэвэрлэгээ нь санах ойг алдагдуулахгүй байхыг баталгаажуулдаг. Алхам 2: JSON экспортыг зохицуулах JSON нь өгөгдлийн бүтцийг бүрэн хадгалахад тохиромжтой:
// ==================================== // JSON-р ЭКСПОРТ ОРУУЛАХ // ====================================
document.getElementById("export-json").addEventListener("дарна уу", () => { // Экспортлох зүйл байгаа эсэхийг шалгана уу хэрэв (!frames.length) { console.warn("Экспортлох бичлэг байхгүй."); буцаах; }
// Мета өгөгдөл болон фрейм бүхий ачааллыг үүсгэх const ачаалал = { үүсгэсэн: шинэ огноо().toISOString(), хүрээ };
// JSON форматаар татаж авна уу татаж авах файл( "gamepad-log.json", JSON.stringify(ачаатай, null, 2), "програм/json" ); });
JSON формат нь бүх зүйлийг бүтэцтэй, амархан задлан шинжилж болохуйц байлгадаг бөгөөд энэ нь хөгжүүлэлтийн хэрэгсэлд дахин ачаалах эсвэл багийнхантайгаа хуваалцахад тохиромжтой. Алхам 3: CSV экспортыг зохицуулах CSV экспортын хувьд бид шаталсан өгөгдлийг мөр, багана болгон тэгшлэх хэрэгтэй:
//==================================== // CSV-р ЭКСПОРТ // ====================================
document.getElementById("export-csv").addEventListener("дарна уу", () => { // Экспортлох зүйл байгаа эсэхийг шалгана уу хэрэв (!frames.length) { console.warn("Экспортлох бичлэг байхгүй."); буцаах; }
// CSV толгойн мөр үүсгэх (цаг хугацааны тэмдэглэгээний багана, бүх товчлуур, бүх тэнхлэг) 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 өгөгдлийн мөр үүсгэх const мөр = frames.map(f => { const btnVals = f.buttons.map(b => b.утга); буцаах [f.t, ...btnVals, ...f.axes].join(","); }).нэгдэх("\n");
// CSV хэлбэрээр татаж авах татаж авахFile("gamepad-log.csv", толгой + мөр, "текст/csv"); });
CSV нь Excel эсвэл Google Sheets дээр шууд нээгдэж, график үүсгэх, өгөгдлийг шүүх эсвэл спот загваруудыг нүдээр харуулах боломжийг олгодог тул өгөгдлийн шинжилгээ хийхэд маш сайн. Экспортын товчлуурууд байгаа тул та самбар дээр JSON экспорт болон CSV экспортлох хоёр шинэ сонголтыг харах болно. Хэрэв та боловсруулалтын хэрэгсэлдээ түүхий логоо буцааж хаях эсвэл бүтцийг тойруулан үзэхийг хүсвэл JSON нь сайхан хэрэг болно. Нөгөө талаас, CSV нь Excel эсвэл Google Sheets дээр шууд нээгддэг тул та оролтыг диаграм, шүүж эсвэл харьцуулах боломжтой. Дараах зурагт эдгээр нэмэлт удирдлагатай самбар ямар харагдахыг харуулав.
3. Snapshot System Заримдаа танд бүрэн бичлэг хийх шаардлагагүй, зүгээр л оролтын төлөвийн хурдан "дэлгэцийн агшин" хэрэгтэй. Энд "Snapshot авах" товч тусалдаг.
Мөн JavaScript:
// ==================================== // АГШИН ЗУРАГ АВАХ // ====================================
document.getElementById("хормын хувилбар").addEventListener("товшилт", () => { // Холбогдсон бүх тоглоомын самбарыг аваарай const pads = navigator.getGamepads(); const activePads = [];
// Холбогдсон тоглоомын самбар бүрийн төлөвийг давтаж, олж авна уу for (const gp of pad) { хэрэв (!gp) үргэлжлүүлэх; // Хоосон зайг алгасах
activePads.push({ id: gp.id, // Хянагчийн нэр/загвар цагийн тэмдэг: гүйцэтгэл.одоо(), товчлуурууд: gp.buttons.map(b => ({) дарагдсан: б.дарагдсан, үнэ цэнэ: b. үнэ цэнэ }))) тэнхлэгүүд: [...gp.axes] }); }
// Тоглоомын самбар олдсон эсэхийг шалгана уу хэрэв (!activePads.length) { console.warn("Гарын агшинд зориулсан тоглоомын самбар байхгүй."); дохио ("Ямар ч хянагч илрээгүй!"); буцаах; }
// Бүртгүүлж хэрэглэгчдэд мэдэгдэх console.log("Агшин зуурын зураг:", activePads); сэрэмжлүүлэг(Зураг авсан! ${activePads.length} хянагч(ууд)-ыг авсан.); });
Хормын хувилбарууд нь таны удирдлагын яг тодорхой төлөвийг нэг агшинд царцаана. 4. Ghost Input Replay Одоо хөгжилтэй зүйл бол: сүнсний оролтыг дахин тоглуулах. Энэ нь лог авч, түүнийг хуурмаг тоглуулагч хянагч ашиглаж байгаа мэт дүрслэн тоглуулна.
Дахин тоглуулах JavaScript: // ==================================== // ХҮНИЙ ДАХИН ТОГЛОЛТ // ====================================
document.getElementById("дахин тоглуулах").addEventListener("товшилт", () => { // Бидэнд дахин тоглуулах бичлэг байгаа эсэхийг шалгаарай хэрэв (!frames.length) { alert("Дахин тоглуулах бичлэг байхгүй!"); буцаах; }
console.log("Сүнсийг дахин тоглуулахыг эхлүүлж байна...");
// Синк хийсэн тоглуулах хугацааг хянах let startTime = performance.now(); frameIndex = 0;
// Хөдөлгөөнт дүрсийг дахин тоглуулах функцийн алхам() { const now = performance.now(); const elapsed = now - startTime;
// Одоогоор тохиолдох ёстой бүх фреймүүдийг боловсруул байхад (frameIndex < frames.length && frames[frameIndex].t <= өнгөрсөн) { const frame = frames[frameIndex];
// Бүртгэгдсэн товчлуурын төлөвтэй UI-г шинэчилнэ үү btnA.classList.toggle("идэвхтэй", frame.buttons[0].дарагдсан); btnB.classList.toggle("идэвхтэй", frame.buttons[1].дарагдсан); btnX.classList.toggle("идэвхтэй", frame.buttons[2].дарагдсан);
// Статусын дэлгэцийг шинэчлэх дарсан бай = []; frame.buttons.forEach((btn, i) => { хэрэв (btn.дарагдсан) дарагдсан.push("Товч" + i); }); хэрэв (дарагдсан. урт > 0) { status.textContent = "Сүнс: " + pressed.join(", "); }
frameIndex++; }
// Хэрэв олон хүрээ байгаа бол давталтыг үргэлжлүүлнэ хэрэв (frameIndex < frames.length) { requestAnimationFrame(алхам); } өөр { console.log("Дахин тоглуулахдууссан."); status.textContent = "Дахин тоглуулж дууслаа"; } }
// Дахин тоглуулж эхлэх алхам(); });
Дибаг хийх ажлыг илүү практик болгохын тулд би сүнс дахин тоглуулахыг нэмсэн. Хэлэлцүүлэг бичиж дууссаны дараа та дахин тоглуулах товчлуурыг дарж, яг л хий үзэгдэл тоглуулагч талбайг ажиллуулж байгаа мэт UI-г үзэх боломжтой. Үүний тулд шинэ Replay Ghost товчлуур самбар дээр гарч ирнэ.
Бичлэг дээр дарж, хянагчтай бага зэрэг эргэлдэж, зогсоод, дараа нь дахин тоглуулаарай. UI нь таны оруулсан зүйлийг дагаж байгаа сүнс шиг таны хийсэн бүх зүйлийг цуурайтуулдаг. Яагаад эдгээр нэмэлт зүйлд санаа зовж байна вэ?
Бичлэг/экспорт хийх нь шалгагчдад яг юу болсныг харуулахад хялбар болгодог. Агшин зуурын агшин зуурын агшин зуур зогсдог бөгөөд таныг хачирхалтай алдаануудыг хайж байх үед маш хэрэгтэй. Сүнс дахин тоглуулах заавар хичээл, хүртээмжтэй байдлыг шалгах, эсвэл зүгээр л удирдлагын тохиргоог зэрэгцүүлэн харьцуулахад тохиромжтой.
Энэ үед энэ нь зүгээр л нэг загварлаг үзүүлбэр биш, харин таны бодитоор хийж болох зүйл юм. Бодит ертөнцийн хэрэглээний тохиолдол Одоо бид маш их зүйлийг хийж чадах энэ дибаглагчтай болсон. Энэ нь шууд оролтыг харуулж, бүртгэлийг бүртгэж, экспортлож, тэр ч байтугай зүйлийг дахин тоглуулдаг. Гэхдээ жинхэнэ асуулт бол хэнд хамаатай вэ? Энэ хэнд хэрэгтэй вэ? Тоглоом хөгжүүлэгчид Хянагч нь ажлын нэг хэсэг боловч дибаг хийх үү? Ихэвчлэн өвддөг. Та ↓ → + punch гэх мэт тулааны тоглоомыг туршиж байна гэж төсөөлөөд үз дээ. Залбирахын оронд яг адилхан хоёр удаа дарж, нэг удаа бичээд дахин тоглуулдаг. Дууслаа. Эсвэл та олон тоглогчийн код таны машин дээр адилхан хариу үйлдэл үзүүлж байгаа эсэхийг шалгахын тулд JSON бүртгэлийг багийн найзтайгаа сольж болно. Энэ бол асар том. Хүртээмжтэй байдлын дадлагажигчид Энэ миний зүрх сэтгэлд ойр байдаг. Хүн бүр "стандарт" хянагчаар тоглодоггүй. Дасан зохицох хянагч нь заримдаа хачин дохио өгдөг. Энэ хэрэгслийн тусламжтайгаар та яг юу болж байгааг харж болно. Багш, судлаач, хэн ч байсан. Тэд бүртгэлийг шүүрч авах, тэдгээрийг харьцуулах эсвэл оролтыг зэрэгцүүлэн тоглуулах боломжтой. Гэнэт үл үзэгдэх зүйлс тодорхой болно. Чанарын баталгаажуулалтын туршилт Тестчид ихэвчлэн "Би энд товчлууруудыг нухсан, тэр эвдэрсэн" гэх мэт тэмдэглэл бичдэг. Нэг их тустай биш. Одоо? Тэд яг дарж, логыг экспортлож, илгээх боломжтой. Таавар байхгүй. Сурган хүмүүжүүлэгчид Хэрэв та заавар эсвэл YouTube-ийн видео бичлэг хийж байгаа бол сүнс дахин тоглуулах нь алт болно. UI нь үүнийг харуулж байхад та шууд утгаараа "Би хянагчтай юу хийсэн бэ" гэж хэлж болно. Тайлбарыг илүү ойлгомжтой болгодог. Тоглоомоос гадна Тийм ээ, энэ нь зөвхөн тоглоомуудын тухай биш юм. Хүмүүс робот, урлагийн төсөл, хүртээмжтэй интерфэйс зэрэгт хянагч ашигласан. Үргэлж ижил асуудал: хөтөч юу харж байна вэ? Ингэснээр та таамаглах шаардлагагүй болно. Дүгнэлт Хянагчийн оролтыг дибаг хийх нь үргэлж сохор мэт санагддаг. DOM эсвэл CSS-ээс ялгаатай нь тоглоомын самбарт зориулсан суурилуулсан шалгагч байхгүй; Энэ бол дуу чимээнд амархан алдагдах консол дээрх түүхий тоонууд юм. Хэдэн зуун мөр HTML, CSS болон JavaScript-ийн тусламжтайгаар бид өөр зүйлийг бүтээсэн:
Үл үзэгдэх оролтыг харагдуулдаг харааны дибаглагч. UI-г цэвэр байлгаж, дибаг хийх боломжтой давхарга бүхий CSS систем. Демо хувилбараас хөгжүүлэгчийн хэрэгсэл болгон дээшлүүлдэг сайжруулалтын багц (бичлэг хийх, экспортлох, агшин зуурын зураг авах, сүнс дахин тоглуулах).
Энэ төсөл нь вэб платформын хүчийг CSS Cascade Layers-д бага зэрэг бүтээлчээр хольж хэр хол явах боломжтойг харуулж байна. Миний сая бүхэлд нь тайлбарласан хэрэгсэл бол нээлттэй эх сурвалж юм. Та GitHub репо-г хуулбарлаж, өөрөө туршиж үзэх боломжтой. Гэхдээ хамгийн чухал нь та үүнийг өөрийн болгож чадна. Өөрийнхөө давхаргыг нэмнэ үү. Өөрийнхөө дахин тоглуулах логикийг бий болго. Үүнийг өөрийн тоглоомын загвартай нэгтгэ. Эсвэл бүр үүнийг миний төсөөлөөгүй байдлаар ашиглах. Заах, хүртээмжтэй байдал эсвэл өгөгдөлд дүн шинжилгээ хийхэд зориулагдсан. Эцсийн эцэст энэ нь зөвхөн тоглоомын самбарыг дибаг хийх тухай биш юм. Энэ нь далд орцуудыг гэрэлтүүлж, вэб нь бүрэн ашиглаж чадахгүй байгаа техник хангамжтай ажиллах итгэлийг хөгжүүлэгчдэд олгох явдал юм. Тиймээс, хянагчаа холбож, засварлагчаа нээж, туршилт хийж эхлээрэй. Таны хөтөч болон CSS үнэхээр юу хийж чадахыг та гайхаж магадгүй.
