آموزش HTML : اشکالزدایی HTML
نوشتن HTML خوب است، اما اگر مشکلی پیش بیاید و نتوانید بفهمید خطا در کجای کد است، چه؟ این مقاله شما را با ابزارهایی آشنا میکند که میتوانند به شما در یافتن و رفع خطاها در HTML کمک کنند.
وقتی نوعی کد مینویسید، همه چیز خوب پیش میرود، تا آن لحظه وحشتناک که خطایی رخ میدهد - شما کاری را اشتباه انجام دادهاید، بنابراین کد شما کار نمیکند - یا اصلاً کار نمیکند، یا دقیقاً آنطور که میخواستید کار نمیکند. برای مثال، مورد زیر خطایی را نشان میدهد که هنگام تلاش برای کامپایل یک برنامه ساده نوشته شده به زبان Rust گزارش شده است.
در اینجا، پیام خطا نسبتاً آسان قابل فهم است - "رشتهی دابل کوتیشنِ پایان نیافته". اگر به لیست نگاه کنید، احتمالاً میتوانید ببینید که چگونه ممکن است از نظر منطقی یک دابل کوتیشن را از دست داده باشد. با این حال، پیامهای خطا میتوانند به سرعت پیچیدهتر و تفسیر آنها دشوارتر شود، زیرا برنامهها بزرگتر میشوند و حتی موارد ساده نیز میتوانند برای کسی که چیزی در مورد Rust نمیداند، کمی ترسناک به نظر برسند.
با این حال، اشکالزدایی نباید ترسناک باشد - کلید راحتی در نوشتن و اشکالزدایی هر کد، آشنایی با زبان و ابزارهای مرتبط است.
درک HTML به پیچیدگی Rust نیست. HTML قبل از تجزیه به شکل دیگری کامپایل نمیشود (تفسیر میشود، نه کامپایل). و مسلماً درک سینتکس عناصر HTML بسیار آسانتر از یک "زبان برنامهنویسی واقعی" مانند Rust، JavaScript یا Python است.
نحوه تجزیه HTML توسط مرورگرها بسیار آسانتر از نحوه تجزیه اکثر زبانهای برنامهنویسی است، که هم خوب است و هم بد.
اما اول از همه، منظور ما از مجاز چیست؟ خب، معمولاً وقتی در کد اشتباه میکنید، با دو نوع خطای اصلی مواجه میشوید:
- خطاهای نحوی (Syntax Errors): اینها اشتباهات تایپی در کد شما هستند که باعث میشوند برنامه اجرا نشود، مانند خطای Rust که قبلاً نشان داده شد. معمولاً تا زمانی که با سینتکس زبان آشنا باشید و بدانید پیامهای خطا به چه معناست، رفع این خطاها آسان است.
- خطاهای منطقی (Logic Errors): اینها خطاهایی هستند که در آنها سینتکس در واقع صحیح است، اما کد کاری را که شما در نظر داشتید انجام نمیدهد، به این معنی که برنامه به اشتباه اجرا میشود. رفع این خطاها اغلب دشوارتر از خطاهای نحوی است، زیرا پیام خطایی برای هدایت شما به منبع خطا وجود ندارد.
خود HTML از خطاهای نحوی رنج نمیبرد زیرا مرورگرها آن را به صورت سهلگیرانه تجزیه میکنند، به این معنی که حتی اگر خطاهای نحوی در کد منبع وجود داشته باشد، صفحه همچنان نمایش داده میشود. مرورگرها قوانین داخلی دارند که نحوه تفسیر نشانهگذاری HTML نادرست نوشته شده (که اغلب نشانهگذاری نامعتبر یا بدشکل نامیده میشود) را بیان میکنند و آن را به طور خودکار به برخی از نشانهگذاریهای معتبر تغییر میدهند.
به عنوان مثال، قطعه HTML زیر شامل عناصر نادرست تو در تو است:
تگ پایانی باید قبل از تگ پایانی باشد، اما اینطور نیست - بعد از آن قرار دارد.
اگر این HTML را در مرورگر بارگذاری کنید و سپس به DOM رندر شده نگاه کنید، خواهید دید که مرورگر، تودرتو بودن را اصلاح کرده است:
خب، چرا این هم خوب است و هم بد؟ خب، در این مورد مرورگر نتیجهی مورد نظر را ایجاد کرده است، اما همانطور که بعداً خواهید دید، همیشه اینطور نیست. شما همیشه چیزی را اجرا میکنید، اما مرورگر همیشه آن را درست انجام نمیدهد، که میتواند باعث مشکلاتی شود. بهتر است از همان ابتدا نشانهگذاری صحیح را بنویسید.
HTML به صورت سهلگیرانه تجزیه و تحلیل میشود، زیرا وقتی وب برای اولین بار ایجاد شد، تصمیم گرفته شد که انتشار محتوا مهمتر از اطمینان از صحت مطلق نحو آن باشد. اگر وب از همان ابتدا سختگیرانهتر عمل میکرد، احتمالاً به اندازه امروز محبوب نمیبود.
خب، چطور خطاهای نشانهگذاری را پیدا میکنید؟ بعداً به شما نشان خواهیم داد که چگونه با استفاده از ابزاری به نام اعتبارسنج HTML، خطاها را در HTML پیدا کنید، اما ابتدا به شما نشان خواهیم داد که چگونه HTML خود را به صورت دستی با استفاده از یک بازرس DOM بررسی کنید، و سپس بررسی خواهیم کرد که چه نوع خطاهای نشانهگذاری را ممکن است جستجو کنید و مرورگر چگونه ممکن است آنها را تفسیر کند.
همه مرورگرهای مدرن مجموعهای از ابزارهای توسعهدهنده (devtools) را در خود دارند که مجموعهای از قابلیتها را برای بررسی صفحه وب بارگذاری شده در تب فعلی فراهم میکنند. این ابزارها میتوانند به شما نشان دهند که چه HTML در صفحه رندر شده است، چه CSS برای هر گره DOM اعمال شده است، چه جاوا اسکریپتی در صفحه اجرا میشود و موارد دیگر. همچنین به شما امکان میدهند کد در حال اجرا را ویرایش کنید و تأثیر آن را به صورت زنده در صفحه مشاهده کنید.
میتوانید devtools را به روشی مشابه در هر مرورگر باز کنید - برای یادگیری نحوه باز کردن devtools در مرورگر خود، به بخش «نحوه باز کردن devtools در مرورگر خود» مراجعه کنید.
در این مقاله، تنها تابع devtools مرتبط، بازرس DOM است که HTML DOM رندر شده فعلی را نشان میدهد و به شما امکان ویرایش آن را میدهد. اکنون بیایید به این موضوع بپردازیم:
ابزار توسعه (devtools) را در مرورگر خود باز کنید.
بازرس DOM را باز کنید. این ابزار در هر مرورگر در یک مکان قرار دارد - اولین تب در ابزار توسعه در ابتدای ردیف. در فایرفاکس با برچسب Inspector و در سافاری، اج و کروم با برچسب Elements. این تب باید به طور پیشفرض هنگام باز کردن ابزار توسعه انتخاب شود، اما اگر اینطور نیست، آن را انتخاب کنید.
ساختار درختی DOM نشان داده شده در تب را بررسی کنید و توجه داشته باشید که چگونه میتوانید روی فلشهای کوچک انبساط در ابتدای هر گره DOM کلیک کنید تا آنها را گسترش داده و جمع کنید و گرههای بعدی آنها را نشان دهید. همچنین میتوانید از کلیدهای مکاننمای بالا و پایین برای حرکت به بالا و پایین گرهها و کلیدهای مکاننمای راست و چپ برای گسترش و جمع کردن گرهها استفاده کنید.
همچنین سعی کنید روی گرهها حرکت کنید (یا آنها را با کلیدهای مکاننما انتخاب کنید) و توجه داشته باشید که چگونه عنصر در حال حاضر در حالت شناور (یا انتخاب شده) در نمای دید برجسته میشود.
همچنین میتوانید DOM رندر شده را ویرایش کنید. ما در این مقاله از قابلیت ویرایش استفاده نخواهیم کرد، اما اگر کنجکاو هستید، کمی وقت بگذارید و نحوه انجام این کار را بررسی کنید.
نوبت شما: مطالعه HTML با استفاده از DOM inspector
در این بخش، شما با استفاده از DOM inspector، کدی را مطالعه خواهید کرد و خواهید دید که مرورگر چگونه خطاهای رایج نشانهگذاری را مدیریت میکند.
ابتدا، فهرست فایل HTML زیر را با نام debug-example.html، در جایی روی دستگاه محلی خود ذخیره کنید. این نسخه آزمایشی عمداً با برخی خطاهای داخلی نوشته شده است تا ما آنها را بررسی کنیم.
سپس، آن را در یک مرورگر باز کنید. چیزی شبیه به این را خواهید دید:
این در ابتدا خوب به نظر نمیرسد؛ بیایید به کد منبع نگاهی بیندازیم تا ببینیم آیا میتوانیم دلیل آن را بفهمیم (فقط محتوای بدنه نمایش داده میشود):
بیایید مشکلات را بررسی کنیم:
عناصر پاراگراف و آیتم لیست هیچ تگ پایانی ندارند. با نگاهی به تصویر بالا، به نظر نمیرسد که این موضوع تأثیر زیادی بر رندرینگ نشانهگذاری داشته باشد، زیرا به راحتی میتوان حدس زد که یک عنصر باید کجا تمام شود و عنصر دیگر باید شروع شود.
عنصر اول هیچ تگ پایانی ندارد. این کمی مشکلسازتر است، زیرا تشخیص اینکه عنصر قرار است کجا تمام شود، آسان نیست. در واقع، تمام متن به صورت پررنگ رندر شده است.
این بخش به خوبی تو در تو نیست: تأکید شده؟ این چیست؟. به دلیل مشکل قبلی، تشخیص نحوه تفسیر این موضوع آسان نیست.
مقدار ویژگی href فاقد علامت نقل قول پایانی است. به نظر میرسد که این بزرگترین مشکل را ایجاد کرده است - لینک اصلاً رندر نشده است.
حالا بیایید DOM رندر شده را، برخلاف کد منبع، بررسی کنیم. برای انجام این کار، DOM inspector مرورگر خود را باز کنید. نمایشی از markup رندر شده را مشاهده خواهید کرد:
ببینید مرورگر چگونه سعی کرده خطاهای HTML ما را برطرف کند (ما این بررسی را در فایرفاکس انجام دادیم؛ سایر مرورگرهای مدرن نیز باید همین نتیجه را ارائه دهند):
به پاراگرافها و آیتمهای لیست تگهای پایانی داده شده است.
مشخص نیست که اولین عنصر کجا باید بسته شود، بنابراین مرورگر هر بلوک متن جداگانه را در عنصر مخصوص به خود، درست تا پایین سند، قرار داده است!
مرورگر، همانطور که در اینجا نشان داده شده است، مشکل تودرتو بودن نادرست را برطرف کرده است:
لینکی که علامت نقل قول (') نداشت، به طور کلی حذف شده است. آخرین آیتم لیست به این شکل است:
از مثال بالا میتوانید ببینید که واقعاً میخواهید مطمئن شوید که HTML شما به خوبی شکل گرفته است! اما چگونه؟ در یک مثال کوچک مانند مثال بالا، جستجو در میان خطوط و یافتن خطاها آسان است، اما در مورد یک سند HTML بزرگ و پیچیده چطور؟
ابزار این کار سرویس اعتبارسنجی نشانهگذاری (یا اعتبارسنج HTML) است که توسط W3C ایجاد و نگهداری میشود (که در مدل استانداردهای وب در مورد آن آموختید). اعتبارسنج یک سند HTML را به عنوان ورودی میگیرد، آن را بررسی میکند و گزارشی به شما میدهد تا به شما بگوید چه مشکلی در HTML شما وجود دارد.
برای مشخص کردن HTML مورد نظر برای اعتبارسنجی، میتوانید یک آدرس وب ارائه دهید، یک فایل HTML آپلود کنید یا مستقیماً کد HTML را وارد کنید.
پیامهای خطا معمولاً مفید هستند، اما گاهی اوقات درک آنها چندان آسان نیست. با کمی تمرین، میتوانید نحوه تفسیر این پیامها را برای رفع مشکل کد خود بیاموزید. بیایید پیامهای خطا را بررسی کنیم و ببینیم منظور آنها چیست. خواهید دید که هر پیام با یک شماره خط و ستون همراه است تا به شما در یافتن آسان خطا کمک کند.
- : این پیامها نشان میدهند که عنصری باز است که باید بسته شود. تگ پایانی ضمنی است، اما در واقع وجود ندارد. اطلاعات خط/ستون به اولین خط بعد از خطی که تگ پایانی واقعاً باید در آن باشد اشاره میکند، اما این سرنخ خوبی برای فهمیدن مشکل است.
- : درک این موضوع آسانتر است - یک عنصر باز است و اطلاعات خط/ستون مستقیماً به جایی که هست اشاره میکند.
- : این عنصرهایی را که به اشتباه تو در تو قرار گرفتهاند، مشخص میکند و اطلاعات خط/ستون محل قرارگیری آنها را نشان میدهد.
- : این مورد کمی مرموز است؛ به این واقعیت اشاره دارد که یک مقدار ویژگی در جایی، احتمالاً نزدیک به انتهای فایل، به درستی شکل نگرفته است زیرا انتهای فایل در داخل مقدار ویژگی ظاهر میشود. این واقعیت که مرورگر لینک را رندر نمیکند، باید سرنخ خوبی در مورد اینکه کدام عنصر مشکل دارد، به ما بدهد.
- : این کمی مبهم است، اما اساساً به این واقعیت اشاره دارد که عناصر بازی وجود دارند که باید به درستی بسته شوند. شماره خطوط به چند خط آخر فایل اشاره میکنند و این پیام خطا با یک خط کد همراه است که به نمونهای از یک عنصر باز اشاره میکند:
یک ویژگی که فاقد علامت نقل قول پایانی باشد، میتواند منجر به یک عنصر باز شود، زیرا بقیه سند به عنوان محتوای آن ویژگی تفسیر میشود.
-این خیلی مفید نیست، زیرا عنصر به درستی بسته شده است. این خطا به دلیل بسته نشدن عنصر رخ میدهد، که به دلیل نبود علامت نقل قول پایانی است.
اگر نمیتوانید بفهمید هر پیام خطا به چه معناست، نگران نباشید. یک استراتژی خوب این است که چند خطا را همزمان برطرف کنید، سپس پس از هر مجموعه از اصلاحات، HTML خود را مجدداً اعتبارسنجی کنید تا نشان دهید چه خطاهایی باقی مانده است. گاهی اوقات، رفع یک خطای قبلی، از شر پیامهای خطای دیگر نیز خلاص میشود - چندین خطا اغلب میتوانند به دلیل یک مشکل واحد، به صورت دومینو، ایجاد شوند.
وقتی یک بنر سبز کوچک زیبا میبینید که به شما میگوید هیچ خطایی برای گزارش وجود ندارد، متوجه خواهید شد که همه خطاهای شما برطرف شدهاند. در زمان نوشتن، نوشته شده بود:
