در این مطلب قصد معرفی یک ترفند برای خطایابی بهتر مشکلاتی که در حین طراحی در صفحه آرایی بوجود می آیند را داریم. این ترفند توسط addy Osmani تحت عنوان خطایابی صحفه آرایی فقط با 82 بایت کد, معرفی شد.
کار این تکه کد جاوااسکریپت این است که برای هر تگ موجود در صفحه یک outline مشخص می کند که باعث می شود به راحتی مشکلات مربوط به صفحه آرایی قابل ردیابی شوند. تگ ها بر اساس نام, رنگ متفاوت خواهند داشت.
برای استفاده از این ترفند کافی است تکه کد زیر را در کنسول مرورگر خود اجرا کنید:
for(i=0;A=$$("*")[i++];)A.style.outline="solid hsl("+(A+A).length*9+",99%,50%)1px"
اما قطعا روش جالبی نخواهد بود که هر بار برای ردیابی مشکل, این کد را در کنسول اجرا کنیم. پس به عنوان راه حل بهتر از بوکمارکلت استفاده می کنیم.
برای کسانی که با بوکمارکلت ها آشنا نیستند: ما می توانیم کد جاوااسکریپت را به وسیله پروتکل javascript: در محتوای یک بوکمارک قرار دهیم و هر بار که بر روی آن کلید کنیم آن کد اجرا می شود. که این قابلیت می تواند باعث بوجود آوردن کارهای خلاقانه و جالبی شود. (باور کنید گاهی اوقات خجالت می کشم به ویکی پدیای فارسی لینک بدم :) )
در اینجا کافی است کد زیر را به عنوان محتوای بوکمارک ذخیره کنید:
javascript:[].forEach.call(document.querySelectorAll("*"),function(a){a.style.outline="solid hsl("+(a+a).length*9+",99%,50%)1px"})
می توانید روش انجام این کار را در تصویر متحرک زیر مشاهده کنید:
عالی بود ممنون از شما
وااااای این فوق العاده بود !!!
بسیار عالی.
تشکر
مثل همیشه خوب و مفید
ممنون از همه دوستان عزیز واسه همراهی گرمشون :)
سلام اقای سیدی خسته نباشید بابت آموزشای خوبتون
برای همین کار یک extension در کروم درست شده به اسم Pesticide for Chrome که وقتی نصبش میکنید
روی هر صفحه وبی که باشید با کلیک کردن روش دور هر المان یا تگ درون صفحه یک outline به همین شیوه کد جاوا اسکریپت
کشیده میشه و کار رو برای خطایابی خیلی راحت میکنه
خیلی جالب بود
ممنون مهندس
اما یه سوال دقیق تر توضیح بده که این روش واسه چه کاری هستش؟
رنگ بندی های قرمز و زرد و سبز و.. دقیق برای چی هستن
ینی این خطاها به ما میگن کدوم قسمت سایت کداش درسته و کجاش غلط؟
دیدین گاهی یه عنصری سرجای خودش نیست. یا اینکه ارتفاعش مناسب نیست. یا اینکه بعضی موقعا عنصرها قابل کلیک نیستند بعد از کلنجار رفتن متوجه میشین که یک عنصری روی اون قرار داشته و چون رنگ و محتوا نداشته شما اونو نمی دیدید. اینجور اتفاقارو معمولا از طریق devtools بررسی میکنیم. یعنی موس رو می بریم روی DOM توی devtools و اون نشون میده عنصر کجاست و چکاره است.
حالا این چنین ابزاری باعث میشه سریع تر اینجور مورد ها رو پیدا کنیم. با یک کلیک دور تمام عنصرها یک خط کشیده میشه و موقعیتشون و غیره مشخص میشه و خطاهاشون قابل شناسایی میشن و متوجه میشیم مشکل از کدوم عنصر آب میخوره. بعد میریم توی کد و CSS مون رو دست می کنیم.
در مورد رنگ ها هم همونطور که بالا نوشتم, هر دفعه رنگها بصورت تصادفی انتخاب می شن اما نکته ای که هست اینه که رنگ های تگ های هم نام همیشه یکی میشه. مثلا یک بار همه div ها قرمز میشن, همه p ها آبی. بار بعد که تست می گیرید رنگ ها عوض میشن
موفق باشید
فوق العاده اید ؛
دست ویکی پدیا رو از پشت بستید . . .
ایولللللللللللللللللللل
اقای سیدی عزیز سلام
برای این مرجع کە بصورت خودبخش گذاشتید ممنوونم واقعا عالییە مخصوصا مسالها کە زیبا جمع میکنید من بیشتر از طریق ایمیل خبردار میشم..باز ممنون
سواڵێ داشتم : دارم قالبی طراحی میکنم کە در قسمت مرورگر کروم بهم ارور میدهد وقتی (کلیک راست و انتخاب inspect ) بم 61 errors میدهد..ایا راهی ەست بتونم ارورها را برطرف کنم ؟ ارور بیشتر از فایل css است .
سلام دوست عزیز
لطف می کنید کمی بیشتر به من اطلاعات بدین. چه خطایی؟ یه تصویری بفرستید یا اگر کدتون رو جایی آپلود کردین یک لینکی بزارید تا بررسی کنیم با هم.
با سلام و ممنون از پاسختان، راست میفرمایید متاسفانه روی لوکال است تمام شد براتوون خواهم فرستاد استاد عزیز….
قالب از بووت ستراپ است کە بنده دارم بە وردپرس تبدیل میکنم .سوال انجاست که ایا میشود این خطاها را پیداکرد در فایل ستایل پوسته؟
خیلی ممنون از لطفتان
مطمئنین خطاهای جاوااسکریپت نیست؟ چون برای استایل خطایی داده نمیشه مگر اینکه نتونه فایلی, عکسی چیزیرو که آدرس دادین توی استایل پیدا نکنه.
جناب سیدی ببخشید بده مزاحمتان میشوم !
قالب را از اینجا دانلود کردم ، فکر کنم حوی چیدمانم اشتباه هستند..
https://getbootstrap.com/ex…
خودتونو بزارین جای من یه بار کامنتارو بخونید.
جدا چیزی متوجه نمی شم. ببخشید
کد خودتون رو که آپلود کردید لینک بدید تا بررسی کنیم.
ممنون
درود بی کران
واقعا ممنونم بابت مطالب عالی سایتتون
در پناه حق
ممنون از شما دوست عزیز. موفق باشید.
خیلی مطالبه جالبی میزارید خوندنشون هم خیلی لذت بخشه ادم خسته نمیشه تو این سایت بگرده ؛
خسته نباشید به خاطر زحماتی که می کشید قطعا با نشر علم بیشتر ثواب رو می برید.
دمت گرم داداش