ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 21) : آموزش Code Coverage

همونطور که اطلاع دارید در جلسات گذشته ترفندهای بسیار زیادی رو برای Inspector مرورگر Chrome قرار دادیم و شما رو با ویژگی ها و امکاناتی که در اختیارتون قرار میده رو آشنا کردیم. از این جلسه به بعد سعی میکنیم در مورد ویژگی هایی که جدید به Inspector اضافه میشه و یا ویژگی هایی که اصلا در موردشون بحث نشده، آموزش هایی رو قرار بدیم. در این جلسه میخوایم Code Coverage، امکانی که اخیرا توسط Chrome اضافه شده رو مورد بررسی قرار بدیم.

همونطور که اطلاع دارید هر تغییری که میخواد در Inspector یا مرورگر Chrome به وجود بیاد، اول اون ویژگی یا تغییر رو در مرورگر Chrome Canary قرار میدن و بعد از اینکه به حالت پایدار و Stable در اومد و اگر کاربران نیز از اون راضی باشند (از کاربران و توسعه دهندگان نظر یا Feedback گرفته میشه و تصمیم گیری میشه)، اون رو در مرورگر Chrome اصلی قرار میدن. امکان Code coverage نیز در ابتدا در مرورگر Chrome canary معرفی شد و بعد از رسیدن به حالت پایدار، اخیرا اون رو بر روی مرورگر Chrome قرار دادند و شما میتونین مرورگر خودتون رو به روز رسانی کنید و از اون استفاده کنید.

همونطور که می دونید مرورگر Opera نیز بسیار شبیه به Chrome هست و می تونین از Inspect Element مرورگر Opera نیز استفاده کنید. اگر مرورگر Opera شما به روز باشه، همون ویژگی هایی که درون Inspector مرورگر کروم وجود داره، در Opera نیز در اختیارتون قرار میگیره. من در این جلسه از مرورگر Opera نسخه 47.0.2631.80 استفاده می کنم. هر زمان که نسخه جدید منتشر میشه، شما هم همانند من مرورگرتون رو به روز رسانی کنید تا از آخرین ویژگی هایی افزوده شده بهره مند بشید. بعد از هر به روز رسانی، برای اینکه بفهمید چه ویژگی های جدیدی اضافه شده است، میتونین بصورت زیر عمل کنید:

بعد از کلیک بر روی گزینه What's New یک بخش جدید باز میشه و ویژگی های اصلی اضافه شده قرار میگیره. با کلیک بر روی هر کدام میتونین در مورد اون بیشتر مطالعه کنید.

خب بریم سراغ ویژگی Code coverage و توضیحات مربوط به اون رو شروع کنیم. اگر بخوایم بصورت خلاصه بگیم، این امکان کدهای Javascript و CSS مربوط به سایت رو بررسی میکنه و به ما گزارش میده که چند درصد اون کدها استفاده شده و چند درصد مورد استفاده قرار نگرفته. Coverage به معنای پوشش است. اگر بخوایم بخش مربوط به Coverage رو باز کنیم، بصورت زیر عمل میکنیم:

روش دیگه این هست که کلیدهای ترکیبی Ctrl + Shift + p رو فشار بدیم تا بخش مربوط به منوی دستورات یا Command menu باز بشه. در اینجا میتونیم متن Coverage رو تایپ کنیم:

بر روی گزینه Show Coverage که در دسته Drawer ها قرار داره کلیک میکنیم. با اینکار بخش مربوط به Coverage باز میشه:

میبینید که تب جدید مربوط به Coverage باز شده و میتونین با گزینه های مربوط به اون کار کنید. توضیحات مربوط به تصویر بالا:

1. با کلیک بر روی این گزینه به حالت Capturing وارد میشید و در اون تغییرات بصورت آنی و Real time بررسی میشه و گزارشات اون در اختیار شما قرار میگیره.
2. با کلیک بر روی این گزینه در ابتدا صفحه مورد نظر Reload میشه و همزمان گزینه Capturing هم فعال میشه و اطلاعات مربوط به همه فایلهای CSS و Javascript استفاده شده در صفحه رو در اختیار ما قرار میده.
3. با کلیک بر روی این آیکون نیز میتونین گزارشات قدیمی رو پاک کنید و تست جدیدی رو انجام بدین.

ما برای تست سایت سون لرن رو باز میکنیم و وارد تب Coverage میشیم و بر روی آیکون 2 مشخص شده در تصویر بالا کلیک میکنیم. با اینکار مرورگر رفرش میشه و اطلاعات مربوط به فایلهای در اختیارمون قرار میگیره:

توضیحات مربوط به تصویر بالا:

1. در اینجا آدرس فایل CSS یا Javascript قرار داده میشه
2. در اینجا نوع کدهای موجود در اون فایل رو قرار میده
3. کل سایز مربوط به اون فایل بر حسب بایت
4. بایتهای استفاده نشده در فایل مورد نظر (کدهایی از فایل که در صفحه فعلی اصلا از اونا استفاده نشده است)
5. در اینجا هم برای هر فایل یک Progress bar قرار گرفته که رنگ قرمز نشان دهنده کدهای استفاده نشده و رنگ سبز نشان دهنده کدهای مورد استفاده قرار گرفته می باشد.

مثلا همونطور که در تصویر بالا میبینید، در فایل bootstrap.min.js، تقریبا 82.5% اون بلا استفاده است و کدهای اون بیهوده قرار داده شده اند و هیچ تاثیری ندارند. با کلیک بر روی اون، این فایل در تب Source باز میشه:

همونطور که میبینید bootstrap.min.js باز میشه و یک خط عمودی در سمت چپ اون قرار گرفته که اون جاهایی که قرمز هستند، کدهایی هستند که مورد استفاده قرار نگرفته اند. البته باید در نظر بگیرید که این محاسبات برای لود اولیه صفحه هستند و امکان داره که بیشتر کدهای Javascript و یا حتی CSS بعد از لود شدن صفحه و با کارهایی که کاربران انجام میدن، اجرا بشن. مثلا کلیک کردن بر روی یک دکمه یا باز کردن یک Lightbox و ...

Inspector برای این مشکل نیز راه حلی رو قرار داده و همونطور که در تصویر زیر مشاهده میکنید، دکمه Capturing قرمز رنگ است و این به آن معنی است که بصورت Real time و آنی کدها مورد بررسی قرار میگیرن.

زمانی که این دکمه فعال است، میتونین وارد صفحه بشید و با سایت کارهای مورد نظرتون رو انجام بدین. اگر به این درصدها و مقادیر دقت کنید، خواهید دید که تغییر خواهند کرد.

حالا شاید بگید این موارد به چه درد ما میخوره. شاید این امکان برای پروژه های کوچک کاربرد داشته باشه ولی اصل کار اون با پروژه های بزرگ هست و کسایی که بر روی پروژه های بزرگ کار میکنن، میتونین کدهای مرده و غیرقابل استفاده در سایتشون رو پیدا کنند و اونا رو حذف کنند. اگر شما از ابزارهایی مانند Webpack استفاده میکنید، امکاناتی وجود دارد که کدهای Javascript که غیرقابل استفاده هستند رو بصورت اتوماتیک برای شما حذف میکنه. بهمین راحتی. خودتون میتونین با این امکان کار کنید و چیزهای بیشتری رو در مورد اون یاد بگیرید.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی