خطایابی صفحه آرایی در 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"})

 

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

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