• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6246 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

0 444 ۲۳ مرداد ۹۵

inspector

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

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

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

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

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

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

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

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

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

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

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

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

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

موفق باشید

یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram