کله چې تاسو کنټرولر ولګوئ، تاسو تڼۍ میش کړئ، سټیکونه حرکت وکړئ، محرکونه راوباسئ ... او د پراختیا کونکي په توګه، تاسو هیڅ نه ګورئ. براوزر دا غوره کوي، ډاډه، مګر تر هغه چې تاسو په کنسول کې شمیرې لاګ نه کوئ، دا د لید وړ نه دی. دا د Gamepad API سره سر درد دی. دا د کلونو لپاره شاوخوا دی، او دا واقعیا خورا پیاوړی دی. تاسو کولی شئ تڼۍ، سټیکونه، محرکونه، کارونه ولولئ. مګر ډیری خلک یې لاس نه اخلي. ولې؟ ځکه چې هیڅ غبرګون نشته. د پراختیا کونکي وسیلو کې هیڅ پینل نشته. د پوهیدو لپاره کومه روښانه لاره نشته چې کنټرولر حتی هغه څه کوي چې تاسو فکر کوئ. داسې احساس کوي لکه ړوند پرواز کوي. دې ما د یوې کوچنۍ وسیلې جوړولو لپاره کافي بګ وکړ: د گیم پیډ کاسکیډ ډیبګر. د کنسول محصول ته د کتلو پرځای ، تاسو د کنټرولر ژوندی ، متقابل لید ترلاسه کوئ. یو څه فشار ورکړئ او دا په سکرین کې عکس العمل ښیې. او د CSS کاسکیډ پرتونو سره، سټایلونه منظم پاتې کیږي، نو دا د ډیبګ کولو لپاره پاک دی. پدې پوسټ کې ، زه به تاسو ته وښیم چې ولې د ډیبګ کنټرولر دومره درد دی ، څنګه CSS د دې پاکولو کې مرسته کوي ، او تاسو څنګه کولی شئ د خپلو پروژو لپاره د بیا کارونې وړ لید ډیبګر رامینځته کړئ.
حتی که تاسو وکولی شئ دا ټول لاګ کړئ ، تاسو به ژر تر ژره د نه لوستلو کنسول سپیم سره پای ته ورسیږئ. د بېلګې په توګه: [0,0,1,0,0,0.5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
ایا تاسو کولی شئ ووایاست چې کومه تڼۍ فشار شوې؟ شاید، مګر یوازې ستاسو د سترګو فشار او د یو څو معلوماتو له لاسه ورکولو وروسته. نو، نه، ډیبګ کول په اسانۍ سره نه راځي کله چې د معلوماتو لوستلو خبره راځي. دریمه ستونزه: د جوړښت نشتوالی حتی که تاسو یو ګړندی لیدونکی سره یوځای کړئ ، سټایلونه په چټکۍ سره ګډوډ کیدی شي. ډیفالټ، فعال، او ډیبګ حالتونه کولی شي اوورلپ شي، او د واضح جوړښت پرته، ستاسو CSS خراب او غزول سخت کیږي. د CSS کاسکیډ پرتونه مرسته کولی شي. دوی سټایلونه په "پرتونو" کې ګروپ کوي چې د لومړیتوب له مخې ترتیب شوي، نو تاسو د ځانګړتیاوو سره مبارزه ودروئ او اټکل وکړئ، "ولې زما د ډیبګ سټایل نه ښودل کیږي؟" پرځای یې، تاسو جلا اندیښنې ساتئ:
اساس: د کنټرولر معیاري، ابتدايي بڼه. فعال: د فشار شوي بټونو او حرکت شوي سټیکونو لپاره نښې. ډیبګ: د پراختیا کونکو لپاره پوښونه (د مثال په توګه ، شمیرې لوستل ، لارښودونه او داسې نور).
که موږ د دې مطابق په CSS کې پرتونه تعریف کړو، موږ به یې ولرو: /* له ټیټ څخه تر لوړ لومړیتوب */ د پرت اساس، فعال، ډیبګ؛
د پرت اساس { /*...*/ }
@layer active { /* ... */ }
@layer debug { /*...*/ }
ځکه چې هر پرت د اټکل سره تړلی دی، تاسو تل پوهیږئ چې کوم قواعد وګټي. دا وړاندوینه نه یوازې د ډیبګ کول اسانه کوي ، مګر واقعیا د مدیریت وړ. موږ ستونزه پوښلې ده (نه لیدونکي، خندا ان پټ) او طریقه (یو بصری ډیبګر چې د کاسکیډ پرتونو سره جوړ شوی). اوس به موږ د ډیبګر جوړولو لپاره د ګام په ګام پروسې ته لاړ شو. The Debugger Concept د پټ ان پټ د لیدلو لپاره ترټولو اسانه لار دا ده چې یوازې دا په سکرین کې رسم کړئ. دا هغه څه دي چې دا ډیبګر یې کوي. تڼۍ، محرکونه، او جویسټیکس ټول یو بصری ترلاسه کوي.
A فشار ورکړئ: یوه دایره روښانه کیږي. لښته وخورئ: دایره په شاوخوا کې تیریږي. یو محرک په نیمه لار کش کړئ: بار نیمه لار ډکوي.
اوس تاسو په 0s او 1s کې نه ګورئ ، مګر واقعیا د کنټرولر ژوندی عکس العمل وګورئ. البته، یوځل چې تاسو د ډیفالټ ، فشار شوي ، ډیبګ معلوماتو په څیر حالتونو کې راټولول پیل کړئ ، شاید حتی د ثبت کولو حالت ، CSS لوی او ډیر پیچلي پیل کیږي. دا هغه ځای دی چې د کاسکیډ پرتونه په کار راځي. دلته یو له مینځه وړل شوی مثال دی: د پرت اساس { .button { پس منظر: #222؛ د پولې وړانګې: 50%؛ width: 40px; height: 40px; } }
@layer active { .button.pressed { background: #0f0; /* bright green */ } }
@layer debug { .button::after { منځپانګه: attr (د معلوماتو ارزښت)؛ font-size: 12px; رنګ: #fff؛ } }
د پرت ترتیب مهم دی: اساس → فعال → ډیبګ.
بیس کنټرولر رسموي. فعال لاسي فشار شوي حالتونه. ډیبګ په پوښونو کې اچول.
د دې په څیر ماتول پدې معنی چې تاسو د عجیب ځانګړتیاو جنګونو سره مبارزه نه کوئ. هر پرت خپل ځای لري، او تاسو تل پوهیږئ چې څه وګټي. Building It Out راځئ چې لومړی په سکرین کې یو څه ترلاسه کړو. دا اړتیا نلري چې ښه ښکاري - یوازې شتون ته اړتیا لري نو موږ د کار کولو لپاره یو څه لرو.
Gamepad Cascade Debugger
دا په حقیقت کې یوازې بکسونه دي. تر اوسه په زړه پوری نه دی، مګر دا موږ ته لاسونه راکوي چې وروسته د CSS او JavaScript سره ونیسئ. ښه، زه دلته د کاسکیډ پرتونه کاروم ځکه چې دا توکي تنظیموي کله چې تاسو نور ایالتونه اضافه کړئ. دلته یو سخت پاس دی:
/* ================================= د کاسکیډ پرتونو تنظیم کول د امر مسایل: اساس → فعال → ډیبګ ===================================*
/* د پرت ترتیب مخکې تعریف کړئ */ د پرت اساس، فعال، ډیبګ؛
/* پرت 1: اساس سټایلونه - اصلي بڼه */ د پرت اساس { تڼۍ { پس منظر: #333؛ د پولې وړانګې: 50%؛ عرض: 70px؛ لوړوالی: 70px؛ ښودنه: فلیکس justify-content: مرکز؛ align-items: center; }
وقفه { عرض: 20px؛ لوړوالی: 70px؛ پس منظر: #333؛ ښودنه: انلاین بلاک؛ } }
/* پرت 2: فعال حالتونه - د فشار شوي بټونو اداره کوي */ @ پرت فعاله { .button.active { پس منظر: #0f0؛ /* روښانه شنه کله چې فشار ورکړئ */ بدلون: پیمانه(1.1); /* تڼۍ یو څه پراخوي */ }
.pause.active { پس منظر: #0f0؛ transform: scaleY(1.1); /* په عمودي توګه غځول کیږي کله چې فشار ورکړئ */ } }
/* دریم پرت: د ډیبګ پوښښ - د پراختیا کونکي معلومات */ @layer debug { .بټن::وروسته { منځپانګه: attr (د معلوماتو ارزښت)؛ /* عددي ارزښت ښیې */ د فونټ اندازه: 12px؛ رنګ: #fff؛ } }
د دې تګلارې ښکلا دا ده چې هر پرت روښانه هدف لري. د بیس پرت هیڅکله فعال نشي پورته کولی، او فعال نشي کولی د ځانګړتیاوو په پام کې نیولو پرته، ډیبګ بیرته پورته کړي. دا د CSS ځانګړتیا جنګونه له مینځه وړي چې معمولا د ډیبګ کولو وسیلې پلي کوي. اوس داسې ښکاري چې ځینې کلسترونه په تیاره پس منظر کې ناست دي. صادقانه، ډیر بد نه.
جاواسکریپټ اضافه کول جاواسکریپټ وخت. دا هغه ځای دی چې کنټرولر واقعیا یو څه کوي. موږ به دا ګام په ګام جوړ کړو. 1 ګام: د دولت مدیریت تنظیم کړئ لومړی، موږ د ډیبګر حالت تعقیبولو لپاره متغیر ته اړتیا لرو: // =============================== // د ریاست مدیریت // ===============================
اجازه راکړئ چلول = غلط؛ // تعقیبوي چې ایا ډیبګر فعال دی اجازه راکړئ rafId; // د لغوه کولو لپاره د غوښتنې انیمیشن فریم 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("status");
د دې حوالې زیرمه کول د DOM په مکرر ډول د پوښتنې کولو په پرتله خورا مؤثر دي. 3 ګام: د کیبورډ فال بیک اضافه کړئ د فزیکي کنټرولر پرته د ازموینې لپاره، موږ به د کیبورډ کیلي بټونو ته نقشه کړو: // =============================== // د کیبورډ فال بیک (د کنټرولر پرته ازموینې لپاره) // ===============================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // 'p' کلیدي دواړه وقفې بار کنټرولوي };
دا موږ ته اجازه راکوي چې په کیبورډ کې د کیلي په فشارولو سره UI ازموینه وکړو. 4 ګام: د اصلي تازه کولو لوپ جوړ کړئ دلته هغه ځای دی چې جادو پیښیږي. دا فنکشن په دوامداره توګه پرمخ ځي او د لوبې پیډ حالت لوستل کیږي: // =============================== // د اصلي لوبې پیډ تازه کولو لوپ // ===============================
function updateGamepad() { // ټول وصل شوي لوبې پیډونه ترلاسه کړئ const gamepads = navigator.getGamepads(); که (!gamepads) بیرته راستانه شي؛
// لومړی وصل شوي گیم پیډ وکاروئ const gp = gamepads[0];
که (gp) { // د "فعال" ټولګي په بدلولو سره د تڼۍ حالت تازه کړئ btnA.classList.toggle("فعال", gp.buttons[0].pressed); btnB.classList.toggle("فعال"، gp.buttons[1].pressed); btnX.classList.toggle("فعال", gp.buttons[2].pressed);
// د وقفې تڼۍ سمبال کړئ (په ډیری کنټرولرونو کې د تڼۍ شاخص 9) const pausePressed = gp.buttons[9].pressed; pause1.classList.toggle("فعال"، pausePpressed); pause2.classList.toggle("فعال"، pausePpressed);
// د وضعیت ښودلو لپاره د اوسني فشار شوي بټونو لیست جوړ کړئ let pressed = []; gp.buttons.forEach((btn, i) => { که (btn.pressed)pressed.push("تڼۍ" + i); });
// د وضعیت متن تازه کړئ که کوم تڼۍ فشار شوي وي که (pressed.length > 0) { status.textContent = "فشار شوی:" + pressed.join(", "); } }
// لوپ ته دوام ورکړئ که ډیبګر روان وي که (چلونکي) { rafId = د انیمیشن فریم غوښتنه(د لوبې پیډ تازه کول)؛ } }
د 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(); } });
شپږم ګام: د پیل / بندولو کنټرول اضافه کړئ په نهایت کې ، موږ یوې لارې ته اړتیا لرو چې ډیبګر فعال او بند کړو: // =============================== // ټګل ډیبګر آن/بند کړئ // ===============================
document.getElementById("toggle").addEventListener("کلک"، () => { روان = !چلېدل // روان حالت فلپ کړئ
که (چلونکي) { status.textContent = "Debugger روان..."; تازه ګیم پیډ ()؛ // د تازه کولو لوپ پیل کړئ } نور { status.textContent = "دبګر غیر فعال"؛ Cancel Animation Frame(rafId)؛ // لوپ ودروئ } });
نو هو، یو تڼۍ فشار کړئ او دا روښانه کیږي. لښته فشار ورکړئ او حرکت کوي. همدا و. یو بل شی: خام ارزښتونه. ځینې وختونه تاسو یوازې د شمیرو لیدل غواړئ، نه څراغونه.
پدې مرحله کې، تاسو باید وګورئ:
یو ساده آن پرده کنټرولر، تڼۍ چې عکس العمل ښکاره کوي کله چې تاسو ورسره اړیکه ونیسئ، او یو اختیاري ډیبګ لوستل د فشار شوي تڼۍ شاخصونه ښیې.
د دې لږ لنډیز کولو لپاره ، دلته د سکرین کنټرولر یو ګړندی ډیمو دی چې په ریښتیني وخت کې عکس العمل ښیې:
اوس ، د سټارټ ریکارډ فشار کول هرڅه لاګ کوي تر هغه چې تاسو د ریکارډ مخه ونیسئ. 2. CSV/JSON ته د معلوماتو صادرول یوځل چې موږ لاګ ولرو، موږ به یې خوندي کړو.
1 ګام: د ډاونلوډ مرستندویه جوړ کړئ لومړی، موږ یو مرستندویه فعالیت ته اړتیا لرو چې په براوزر کې د فایل ډاونلوډ اداره کوي: // =============================== // د فایل ډاونلوډ مرستندویه // ===============================
د فنکشن ډاونلوډ فایل(د فایل نوم، منځپانګې، ډول = "متن/سادا") { // د منځپانګې څخه یو بلب جوړ کړئ const blob = نوی بلاب([منځپانګه]، { ډول})؛ const url = URL.createObjectURL(blob);
// د لنډمهاله ډاونلوډ لینک جوړ کړئ او کلیک وکړئ const a = document.createElement("a"); a.href = یو آر ایل؛ a.download = د فایل نوم؛ a.click();
// د ډاونلوډ وروسته د اعتراض URL پاک کړئ setTimeout(() => URL.revokeObjectURL(url), 100); }
دا فنکشن ستاسو له ډیټا څخه د بلب (بائنری لوی څیز) رامینځته کولو سره کار کوي ، د دې لپاره لنډمهاله URL رامینځته کوي ، او په برنامه ډول د ډاونلوډ لینک کلیک کوي. پاکول ډاډ ورکوي چې موږ حافظه نه لیکو. مرحله 2: د JSON صادرات اداره کړئ JSON د بشپړ ډیټا جوړښت ساتلو لپاره مناسب دی:
// =============================== // د JSON په توګه صادر کړئ // ===============================
document.getElementById("export-json").addEventListener("کلک"، () => { // وګورئ چې ایا د صادرولو لپاره کوم څه شتون لري که (!frames.length) { console.warn("د صادرولو لپاره هیڅ ریکارډ شتون نلري."); راستنېدل }
// د میټاډاټا او چوکاټونو سره تادیه رامینځته کړئ const payload = { جوړ شوی وخت: نوې نیټه().toISOSstring() چوکاټونه };
// د JSON فارمیټ په توګه ډاونلوډ کړئ دانلود دوتنه( "gamepad-log.json" JSON.stringify(payload, null, 2), "غوښتنه/json" ); });
د JSON بڼه هر څه جوړښت او په اسانۍ سره د تحلیل وړ ساتي، دا د dev وسیلو ته د بیرته پورته کولو یا د ټیم ملګرو سره شریکولو لپاره مثالی کوي. 3 ګام: د CSV صادرات اداره کړئ د CSV صادراتو لپاره، موږ اړتیا لرو چې درجه بندي ډاټا په قطارونو او کالمونو کې فلیټ کړو:
//============================== // د CSV په توګه صادر کړئ // ===============================
document.getElementById("export-csv").addEventListener("کلک"، () => { // وګورئ چې ایا د صادرولو لپاره کوم څه شتون لري که (!frames.length) { console.warn("د صادرولو لپاره هیڅ ریکارډ شتون نلري."); راستنېدل }
// د CSV سرلیک قطار جوړ کړئ (د مهال ویش لپاره کالمونه، ټول بټونه، ټول محورونه) const headerButtons = چوکاټونه[0].buttons.map((_,i) => btn${i}); const headerAxes = چوکاټونه[0].axes.map((_, i) => axis${i}); const header = ["t", ...header Buttons, ...headerAxes].join(",") + "\n";
// د CSV ډاټا قطارونه جوړ کړئ const قطار = frames.map(f => { const btnVals = f.buttons.map(b => b.value); بیرته ستنیدنه [f.t, ...btnVals, ...f.axes].join(","); }) یوځای کیدل("\n");
// د CSV په توګه ډاونلوډ کړئ ډاونلوډ فایل("gamepad-log.csv"، سرلیک + قطارونه، "متن/csv")؛ });
CSV د ډیټا تحلیل لپاره خورا ښه دی ځکه چې دا په مستقیم ډول په Excel یا ګوګل شیټونو کې خلاصیږي ، تاسو ته اجازه درکوي چې چارټونه جوړ کړئ ، ډیټا فلټر کړئ ، یا د لید نمونې ځای په ځای کړئ. اوس چې د صادراتو تڼۍ په کې دي، تاسو به په پینل کې دوه نوي اختیارونه وګورئ: JSON صادر کړئ او CSV صادر کړئ. JSON ښه دی که تاسو غواړئ خام لاګ بیرته خپل دیو وسیلو ته وغورځوئ یا د جوړښت شاوخوا وخورئ. CSV، له بلې خوا، مستقیم په Excel یا Google شیټونو کې خلاصیږي نو تاسو کولی شئ چارټ، فلټر، یا ان پټونه پرتله کړئ. لاندې ارقام ښیې چې پینل د دې اضافي کنټرولونو سره څه ښکاري.
3. د سنیپ شاټ سیسټم ځینې وختونه تاسو بشپړ ثبت کولو ته اړتیا نلرئ، یوازې د ان پټ ریاستونو ګړندي "سکرین شاټ". دا هغه ځای دی چې د سنیپ شاټ اخیستلو تڼۍ مرسته کوي.
او جاواسکریپټ:
// =============================== // سنیپ شاټ واخلئ // ===============================
document.getElementById("snapshot").addEventListener("کلک"، () => { // ټول وصل شوي لوبې پیډونه ترلاسه کړئ const pads = navigator.getGamepads(); const activePads = [];
// د هر وصل شوي لوبې پیډ حالت له لارې لوپ او نیول لپاره (د پیډونو gp) { که (!gp) دوام وکړي؛ // خالي سلاټونه پریږدئ
activePads.push({ id: gp.id، // د کنټرولر نوم/ ماډل مهال ویش: performance.now() تڼۍ: gp.buttons.map(b => ({ pressed: b.pressed, ارزښت: b.value })) محور: [...gp.axes] }); }
// وګورئ چې ایا کوم لوبې پیډونه موندل شوي که (!activePads.length) { console.warn("د سنیپ شاټ لپاره هیڅ لوبې پیډونه ندي تړل شوي."); خبرتیا("هیڅ کنټرولر ندی موندل شوی!"); راستنېدل }
// ننوتل او کارونکي ته خبر ورکړئ console.log("snapshot:", activePads); خبرتیا(سنیپ شاټ اخیستل شوی! نیول شوی ${activePads.length} کنټرولر(s).); });
سنیپ شاټونه په یو وخت کې ستاسو د کنټرولر دقیق حالت کنګلوي. 4. د غوسټ ان پټ بیا پلی کول اوس د ساتیرۍ لپاره: د غوسټ ان پټ بیا پلی کول. دا یو لاګ اخلي او بیرته یې په لید کې لوبوي لکه څنګه چې یو فینټم لوبغاړی کنټرولر کاروي.
د بیا چلولو لپاره جاوا سکریپټ: // =============================== // GHOST REPLAY // ===============================
document.getElementById("replay").addEventListener("کلک"، () => { // ډاډ ترلاسه کړئ چې موږ د بیا غږولو لپاره ریکارډ لرو که (!frames.length) { خبرتیا("د بیا غږولو لپاره هیڅ ریکارډ نشته!"); راستنېدل }
console.log("د غوسټ بيا پيلول...");
// د همغږي شوي پلے بیک لپاره د تعقیب وخت اجازه راکړئ starttime = performance.now(); اجازه راکړئ frameIndex = 0؛
// د انیمیشن لوپ بیا پیل کړئ د فعالیت ګام() { const now = performance.now(); const elapsed = اوس - د پیل وخت؛
// ټول هغه چوکاټونه پروسس کړئ چې باید تر اوسه پیښ شوي وي پداسې حال کې چې (frameIndex < frames.length && frames[frameIndex].t <= تېر شوی) { const frame = چوکاټونه[frameIndex]؛
// د ثبت شوي تڼۍ ریاستونو سره UI تازه کړئ btnA.classList.toggle("فعال"، frame.buttons[0].pressed); btnB.classList.toggle("فعال"، frame.buttons[1].pressed); btnX.classList.toggle("فعال"، frame.buttons[2].pressed);
// د وضعیت ښودنه تازه کړئ let pressed = []; frame.buttons.forEach((btn, i) => { که (btn.pressed) pressed.push("تڼۍ" + i); }); که (pressed.length > 0) { status.textContent = "غوسټ:" + pressed.join(", "); }
frameIndex++; }
// لوپ ته دوام ورکړئ که چیرې نور چوکاټونه شتون ولري که (frameIndex < frames.length) { د انیمیشن فریم غوښتنه(قدم)؛ } نور { console.log("بيا پلی کولبشپړ شو.") status.textContent = "بیا پلی کول"؛ } }
// بیا پیلول پیل کړئ ګام(); });
د دې لپاره چې یو څه نور په لاسونو کې ډیبګ کول ، ما د شیطان ریپلی اضافه کړه. یوځل چې تاسو سیشن ثبت کړئ ، تاسو کولی شئ بیا پلې کړئ او وګورئ چې UI یې عمل کوي ، نږدې لکه څنګه چې یو فینټم پلیر پیډ پرمخ وړي. د دې لپاره په پینل کې د نوي ریپلی غوسټ تڼۍ ښکاره کیږي.
ریکارډ ټک کړئ، د کنټرولر سره یو څه ګډوډ کړئ، ودریږئ، بیا بیا پلی کړئ. UI یوازې هر هغه څه چې تاسو یې کړی وغږوي، لکه یو شیطان چې ستاسو د معلوماتو تعقیبوي. ولې د دې اضافو سره ځورېږئ؟
ثبت کول / صادرول د ازموینو لپاره اسانه کوي ترڅو وښیې چې واقعیا څه پیښ شوي. سنیپ شاټونه په وخت کې یوه شیبه کنګل کیږي ، خورا ګټور کله چې تاسو عجیب کیګونه تعقیب کوئ. د ګوسټ ریپلی د ټیوټوریلونو ، د لاسرسي چیکونو ، یا یوازې د څنګ په څنګ د کنټرول تنظیماتو پرتله کولو لپاره عالي دی.
پدې مرحله کې ، دا نور یوازې یو پاک ډیمو نه دی ، مګر یو څه چې تاسو واقعیا کار کولو ته اړ کولی شئ. د ریښتیني نړۍ کارولو قضیې اوس موږ دا ډیبګر ترلاسه کړی چې کولی شي ډیر څه وکړي. دا ژوندی ان پټ ښیي، لاګ ثبتوي، صادروي، او حتی توکي بیا لوبوي. مګر اصلي پوښتنه دا ده: څوک واقعیا پروا لري؟ دا د چا لپاره ګټور دی؟ د لوبې پراختیا کونکي کنټرولرونه د دندې یوه برخه ده، مګر د دوی ډیبګ کول؟ معمولا درد. تصور وکړئ چې تاسو د جګړې لوبې کومبو ازموینه کوئ، لکه ↓ → + پنچ. د لمانځه پرځای، تاسو دا دوه ځله ورته فشار ورکړئ، تاسو یې یو ځل ثبت کړئ، او بیا یې غږ کړئ. ترسره شو. یا تاسو د JSON لاګونه د ټیم ملګري سره بدل کړئ ترڅو وګورئ چې ایا ستاسو ملټي پلیر کوډ د دوی په ماشین کې ورته عکس العمل ښیې. دا لوی دی. د لاسرسي تمرین کونکي دا زما زړه ته نږدې دی. هرڅوک د "معیاري" کنټرولر سره لوبې نه کوي. تطابق کنټرولونکي ځینې وختونه عجیب سیګنالونه غورځوي. د دې وسیلې سره ، تاسو کولی شئ دقیقا وګورئ چې څه پیښیږي. ښوونکي، څیړونکي، هر څوک. دوی کولی شي لاګونه ونیسي، پرتله یې کړي، یا د انډولونو سره یوځای بیا پلی کړي. ناڅاپه، ناڅرګند توکي ښکاره کیږي. د کیفیت د تضمین ازموینه ټیسټران معمولا نوټونه لیکي لکه "ما دلته تڼۍ میش کړې او مات شو." ډیر ګټور نه دی. اوس؟ دوی کولی شي دقیق پریس ونیسي، لاګ صادر کړي، او لیږو یې. هیڅ اټکل نشته. ښوونکي که تاسو ټیوټوریلونه یا د یوټیوب ویډیوګانې رامینځته کوئ ، د غوسټ ری پلی طلایی دی. تاسو کولی شئ په لفظي ډول ووایاست، "دلته هغه څه دي چې ما د کنټرولر سره وکړل،" پداسې حال کې چې UI ښیې چې دا پیښیږي. توضیحات روښانه کوي. د لوبو څخه بهر او هو، دا یوازې د لوبو په اړه ندي. خلکو د روبوټونو، هنري پروژو، او د لاسرسي انٹرفیسونو لپاره کنټرولرونه کارولي دي. هر وخت ورته مسله: براوزر واقعیا څه ګوري؟ د دې سره، تاسو اړتیا نلرئ اټکل وکړئ. پایله د کنټرولر ان پټ ډیبګ کول تل د ړندو الوتنې په څیر احساس شوی. د DOM یا CSS برعکس، د لوبې پیډونو لپاره هیڅ جوړ شوی انسپکټر شتون نلري؛ دا په کنسول کې یوازې خام شمیرې دي، په اسانۍ سره په شور کې ورک شوي. د HTML، CSS او JavaScript د څو سوو لینونو سره، موږ یو څه توپیر جوړ کړ:
یو بصری ډیبګر چې نه لیدونکي آخذې ښکاره کوي. یو پرت شوی CSS سیسټم چې UI پاک او د بګ وړ ساتي. د پرمختګونو یوه سیټ (ریکارډ کول ، صادرول ، سنیپ شاټونه ، د گھوسټ بیا پلی کول) چې دا له ډیمو څخه پراختیا کونکي وسیلې ته پورته کوي.
دا پروژه ښیې چې تاسو د CSS کاسکیډ پرتونو کې د لږ خلاقیت سره د ویب پلیټ فارم ځواک مخلوط کولو سره څومره لرې لاړ شئ. هغه وسیله چې ما یوازې په بشپړ ډول تشریح کړې خلاص سرچینه ده. تاسو کولی شئ د GitHub ریپو کلون کړئ او د ځان لپاره یې هڅه وکړئ. مګر تر ټولو مهم، تاسو کولی شئ دا خپل ځان جوړ کړئ. خپل پرتونه اضافه کړئ. خپل د بیا پیلولو منطق جوړ کړئ. دا ستاسو د لوبې پروټوټایپ سره مدغم کړئ. یا حتی دا په داسې لارو کې وکاروئ چې ما تصور نه دی کړی. د تدریس، لاسرسي، یا ډاټا تحلیل لپاره. د ورځې په پای کې، دا یوازې د لوبې پیډونو ډیبګ کولو په اړه ندي. دا په پټو معلوماتو باندې د رڼا روښانه کولو په اړه دی، او پراختیا کونکو ته د هارډویر سره کار کولو باور ورکوي چې ویب لا تر اوسه په بشپړه توګه نه مني. نو، خپل کنټرولر ولګوئ، خپل مدیر خلاص کړئ، او تجربه پیل کړئ. تاسو شاید حیران شئ چې ستاسو براوزر او ستاسو سی ایس ایس واقعیا څه کولی شي.
