خطایابی صفحه آرایی در css

خطایابی صفحه آرایی

در این مطلب قصد معرفی یک ترفند برای خطایابی بهتر مشکلاتی که در حین طراحی در صفحه آرایی بوجود می آیند را داریم. این ترفند توسط 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"})

 

می توانید روش انجام این کار را در تصویر متحرک زیر مشاهده کنید:

 
تست صفحه آرایی روی سایت محشر محک
 

  • شادی

    عالی بود ممنون از شما

  • آمنه

    وااااای این فوق العاده بود !!!

  • شاهین

    بسیار عالی.

    تشکر

  • مثل همیشه خوب و مفید

  • ممنون از همه دوستان عزیز واسه همراهی گرمشون 🙂

  • مهدی

    خیلی جالب بود

  • amir

    ممنون مهندس
    اما یه سوال دقیق تر توضیح بده که این روش واسه چه کاری هستش؟
    رنگ بندی های قرمز و زرد و سبز و.. دقیق برای چی هستن
    ینی این خطاها به ما میگن کدوم قسمت سایت کداش درسته و کجاش غلط؟

    • دیدین گاهی یه عنصری سرجای خودش نیست. یا اینکه ارتفاعش مناسب نیست. یا اینکه بعضی موقعا عنصرها قابل کلیک نیستند بعد از کلنجار رفتن متوجه میشین که یک عنصری روی اون قرار داشته و چون رنگ و محتوا نداشته شما اونو نمی دیدید. اینجور اتفاقارو معمولا از طریق devtools بررسی میکنیم. یعنی موس رو می بریم روی DOM توی devtools و اون نشون میده عنصر کجاست و چکاره است.

      حالا این چنین ابزاری باعث میشه سریع تر اینجور مورد ها رو پیدا کنیم. با یک کلیک دور تمام عنصرها یک خط کشیده میشه و موقعیتشون و غیره مشخص میشه و خطاهاشون قابل شناسایی میشن و متوجه میشیم مشکل از کدوم عنصر آب میخوره. بعد میریم توی کد و CSS مون رو دست می کنیم.

      در مورد رنگ ها هم همونطور که بالا نوشتم, هر دفعه رنگها بصورت تصادفی انتخاب می شن اما نکته ای که هست اینه که رنگ های تگ های هم نام همیشه یکی میشه. مثلا یک بار همه div ها قرمز میشن, همه p ها آبی. بار بعد که تست می گیرید رنگ ها عوض میشن

      موفق باشید

  • فوق العاده اید ؛
    دست ویکی پدیا رو از پشت بستید . . .
    ایولللللللللللللللللللل