ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 1)

در این آموزش و قسمتهای بعدی قصد دارم تعدادی ترفند و راه پیشرفته برای کار کردن با Inspector مرورگر Chrome رو بهتون آموزش بدم و تا اینکه بتونیم از قدرت اون بیشتر از گذشته استفاده کنیم.

همونطور که همیشه میگم سعی کنید که مرورگر Chrome خودتون رو Update و بروزرسانی کنید تا وقتی که خودتون میخاید موارد مختلف رو تست کنید به مشکلی برنخورید.

ترفند 1 : ساختن Snippet و اجرا کردن آن در هر صفحه وب

با استفاده از این روش شما میتونین درون صفحه ای که هستید، بدون اینکه ادیتور خودتون رو باز کنید، یک Snippet بسازید و کدهای مورد نظر خودتون رو درونش قرار بدین و بعد اون رو save کرده و اون رو Run یا اجرا کنید. این کدها بدون اینکه مرورگر شما نیازی که reload شدن داشته باشه اجرا میشن و خروجی برای شما نمایش داده میشه. برای اینکار ابتدا سایت 7learn رو میاریم و بعد از اون Inspector رو باز کرده و وارد تب Sources میشیم:

در این صفحه میتونین منابعی که در سایت فعلی بکار رفته شده رو ببینید و روی اونا کار کنید که ما فعلا با اونا کاری نداریم. ما برای انجام کار خودمون باید به تب Snippets بریم:

میبینید که در ابتدا چیزی وجود نداره. برای اضافه کردن یک snippet جدید باید در سایدبار سمت چپ کلیک راست کرده و گزینه New رو انتخاب کنید:

بعد از اینکار و با انتخاب گزینه New یک Snippet جدید ساخته میشه و بصورت پیش فرض یک اسم داره و شما میتونین اون رو تغییر بدین:

اگر این Snippet مانند حالت بالا اسمش فعال بود، که میتونین به راحتی اسمشو عوض کنید ولی اگه نبود، میتونید بر روی اون کلیک راست کرده و گزینه Rename رو انتخاب کنید:

بعد از اینکار اسم Snippet بصورت فعال در میاد و میتونین اون تغییر بدیم. من اسم اون رو sample.js قرار میدم و اینتر میزنم. حالا میخام درون اون کدهای Javascript قرار بدم. برای نمونه میخام یک alert قرار بدم:

میبینید که یک alert قرار دادیم. همونطور که در تصویر بالا مشخص کردم چون snippet مورد نظر هنوز save نشده، یک ستاره کنارش قرار گرفته و شما میتونین با کلیدهای ترکیبی ctrl+s اون رو ذخیره کنید. بعد از اینکار برای اجرا کردن snippet باید روی اون کلیک راست کرده و گزینه Run رو انتخاب کنید:

با زدن گزینه Run این Snippet اجرا میشه و یک Alert بصورت زیر نمایش داده میشه:

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

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

موفق باشید

یا علی