</>مدرسه زیب‌موجیاد بگیر، تمرین کن، بساز
مدرسهHTMLدرس 7
درس 7 از 8 · ۳۰ دقیقه

خطایابی، آزمون و خوانایی

ساختار صفحه‌های وب را از اولین تگ تا یک صفحه کامل و دسترس‌پذیر یاد بگیر.

۰امتیاز شما
نقشه این درس

بعد از این درس چه کاری می‌توانی انجام بدهی؟

  • خطا را به نمونه کوچک تبدیل کنی
  • انتظار و نتیجه واقعی را مقایسه کنی
  • کد را برای نفر بعدی خوانا نگه داری
به زبان زندگی واقعی

HTML را ساده بفهم

HTML مثل اسکلت و برچسب‌های یک فروشگاه است؛ مشخص می‌کند هر بخش عنوان، توضیح، تصویر یا دکمه است.

نکته مهم برای شروع HTML

چند تغییر هم‌زمان انجام نده؛ در غیر این صورت نمی‌فهمی کدام تغییر علت واقعی اصلاح بوده است.

چرا مهم است؟ گام‌های ثابت برای دیدن دوباره خطا.

اولین تمرین تو: یک جزء لازم نمونه را حذف کن تا بررسی شکست بخورد؛ پیام را بخوان، فقط همان بخش را اصلاح و یک سناریوی بازگشت ثبت کن.

توضیح ساده و قدم‌به‌قدم

از یک مثال کوچک شروع کن

خطایابی از حدس شروع نمی‌شود؛ از بازتولید شروع می‌شود. ورودی ثابت، گام‌های مشخص و نتیجه واقعی را ثبت کن، مسئله را کوچک کن و پس از اصلاح یک آزمون بساز تا همان باگ برنگردد. برای کارایی نیز ابتدا اندازه بگیر.

1

۱. بازتولید ثابت

کوچک‌ترین ورودی و گام مشاهده خطا را ثبت کن.

2

۲. انتظار را مقایسه کن

اولین نقطه اختلاف را پیدا کن.

3

۳. آزمون بازگشت بساز

اصلاح را با یک تست قابل تکرار محافظت کن.

نکته مهم

چند تغییر هم‌زمان انجام نده؛ در غیر این صورت نمی‌فهمی کدام تغییر علت واقعی اصلاح بوده است.

مفهوم‌های اصلی

سه قطعه‌ای که باید بفهمی

بازتولید

گام‌های ثابت برای دیدن دوباره خطا.

آزمون

ورودی مشخص و خروجی مورد انتظار.

لاگ

اطلاعات لازم برای علت‌یابی، بدون داده حساس.

سناریوی واقعی

صفحه معرفی محصولی که کاربر و موتور جست‌وجو هر دو ساختارش را درست بفهمند.

در این درس، بخشی واقعی از پروژه «صفحه معرفی یک محصول واقعی» را می‌سازیم. قبل از کد یا پرامپت، ورودی، قانون و خروجی مورد انتظار را روی کاغذ مشخص می‌کنیم.

ورودی روشنیک تغییر کوچکنتیجه قابل سنجش
بازی ساختن کد

قطعه‌ها را به ترتیب درست بچین

روی هر قطعه بزن تا وارد پاسخ شود؛ برای برگرداندن دوباره روی آن بزن. با دکمه‌های جابه‌جایی هم می‌توانی بدون کشیدن و رهاکردن ترتیب را اصلاح کنی.

مرحله ۲ از ۳ · مرتب‌کردن کد
بانک قطعه‌هاقطعه مناسب را انتخاب کن
ترتیب پاسخ تواز بالا به پایین اجرا می‌شود

    هنوز پاسخی بررسی نشده است.

    کارگاه تعاملی

    اجرا و پیش‌نمایش

    این نمونه واقعاً داخل محیط جدا و امن مرورگر اجرا می‌شود؛ مقدار را تغییر بده و نتیجه را مستقیم ببین.

    html-debugging
    خروجیآماده
    یک بخش را تغییر بده و دکمه بررسی را بزن.
    بعد از هر تغییر، نتیجه را دوباره بررسی کن.
    تمرین هدایت‌شده

    یک جزء لازم نمونه را حذف کن تا بررسی شکست بخورد؛ پیام را بخوان، فقط همان بخش را اصلاح و یک سناریوی بازگشت ثبت کن.

    دام‌های رایج

    این سه اشتباه را انجام نده

    1

    تغییر چند بخش هم‌زمان

    2

    پنهان‌کردن خطا به‌جای حل آن

    3

    تست‌کردن فقط مسیر موفق

    سنجش چندمرحله‌ای

    با 5 سؤال مطمئن شو که مفهوم را گرفته‌ای

    سؤال 1 از 5

    بهترین روش استفاده از نمونه این درس چیست؟

    سؤال 2 از 5

    اولین قدم خطایابی چیست؟

    سؤال 3 از 5

    چرا آزمون بازگشت می‌نویسیم؟

    سؤال 4 از 5

    کدام روش نشان می‌دهد این درس را واقعاً فهمیده‌ای؟

    سؤال 5 از 5

    کدام رفتار احتمال خطا را در همین موضوع بیشتر می‌کند؟

    پایان درس 7

    فهمیدی، تغییر دادی، نتیجه را توضیح دادی؟

    فقط در این صورت درس را کامل کن و سراغ مرحله بعد برو.