ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 29) : بازرسی کامل سایت با Lighthouse - قسمت 1

- visibility ۰ mode_comment

همونطور که اطلاع دارید در جلسه قبل کار کردن با ویرایشگر سایه یا Shadow رو به شما آموزش دادیم. در این جلسه میخوایم بازرسی جزئی و کامل سایت با استفاده از Lighthouse رو به شما آموزش بدیم.

Lighthouse یک ابزار اتوماتیک رایگان یا Open Source می باشد که با استفاده از اون میتونین نقاط ضعف سایت خودتون رو متوجه بشید و اونا رو بهبود ببخشید. با استفاده از این ابزار میتونین هر نوع سایتی رو تست کنید و نتایج رو بررسی کرده و با راه حل هایی که بهتون میده، مشکلات سایتتون رو برطرف کنید.

با استفاده از این ابزار میتونین سایتتون رو از 4 نظر مختلف بازرسی کنید:

  • Progressive web apps یا PWA
  • Performance
  • Best Practice
  • Accessibility

به چند روش مختلف میتونین Lighthouse رو اجرا کنید و نتایج مورد نظرتون رو بدست بیارید:

  • نصب از طریق npm و کار کردن در Command line
  • نصب افزونه و کار کردن با اون
  • استفاده از Chrome DevTools

استفاده از Lighthouse در Chrome

مرورگر Chrome اخیرا Lighthouse رو در خودش قرار داد و شما میتونین از امکانات اون برای بازرسی سایت مورد نظرتون استفاده کنید. برای اینکار نیاز به نصب چیز خاصی نیست و این مورد از قبل در Inspector قرار داده شده است.

ما در این آموزش میخوایم این سایت رو مورد بازرسی و تست قرار بدیم و مشکلات اون رو با هم بررسی کنیم.

خب بعد از اینکه سایت مورد نظر رو در مرورگر Chrome باز کردید، وارد Developer Tools بشید. همونطور که میبینید یک تب بنام Audits در اون قرار دارد:

میبینید زمانی که بر روی تب Audits کلیک میکنیم، لوگوی مربوط به این ابزار که شبیه به فانوس دریایی می باشد، نمایش داده شده است. حالا ممکنه فکر کنید چرا این لوگو و اسم رو برای این ابزار در نظر گرفته اند. همونطور که اطلاع دارید هدف از فانوس دریایی، راهنمایی کشتی ها در شب می باشد و ناخدا با استفاده از فانوس دریایی متوجه وجود ساحل میشن و میتونن راه خودشون رو پیدا کنند و از مشکلات احتمالی جلوگیری میشه.

Lighthouse یا همون فانوس دریایی در Chrome Inspector نیز به همین دلیل قرار داده شده است و اینبار بجای کشتی، توسعه دهندگان رو راهنمایی میکنه تا بتونن مشکلات سایت خودشون رو بفهمند و قبل از اینکه مشکلی برای سایتشون به وجود بیاد که به بازدید سایت ضربه بزنه، اونا رو برطرف کنند و کاربران از سایت راضی باشند و اونا رو از دست ندهند. چون مثلا فرض کنید که سایت شما 20 ثانیه طول بکشه تا لود بشه. کاربر به احتمال زیاد با دیدن این صحنه میره و دیگه پشت سرشو هم نگاه نمیکنه!!

نحوه انجام تست جدید

خب همونطور که گفتیم میتونیم سایت مورد نظرمون رو از 4 جنبه مختلف مورد بررسی و تست قرار بدیم. اگر اولین بار باشه که وارد این تب میشید و هیچ گزارش قبلی در اون موجود نباشه، با کلیک بر روی دکمه آبی Perform an audit میتونین یک بازرسی جدید رو انجام بدین.

اما اگر یک تست رو انجام داده باشید و گزارش اون نمایش داده شده باشه، دیگه این دکمه رو نمیبینید و بجای اون میتونین بر روی دکمه + یا New audit در قسمت بالا کلیک کنید:

از هر کدام از روشهای فوق که اقدام کنید، یک باکس باز میشه و از شما میخواد نوع تست مورد نظرتون رو انتخاب کنید:

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

در جلسه بعدی نکات بیشتر در مورد این تب رو بهتون آموزش خواهیم داد. پس با ما همراه باشید.

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

موفق باشید

یا علی

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.