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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 5) : نظارت رویدادها و ویرایش سریع تگهای HTML

0 200 ۸ شهریور ۹۵

inspector

ترفند 9 : مانیتور و نظارت کردن بر روی رویدادها

شما میتونین به سادگی و با استفاده از قدرت Inspector بر روی رویدادهای متنوعی که در صفحه وب رخ میده نظارت داشته باشید و اونا رو مانیتور و پایش کنید و اطلاعات مورد نظرتون رو از اونا در بیارید. برای اینکار به سایت w3schools برید و در Inspector تب Console رو باز کنید:monitor events inspector

همونطور که دیدید الان در Console هستیم. فرض کنید میخایم زمانی که بر روی صفحه کلیک شد، اطلاعات اون رویداد برای ما نمایش داده بشه. برای اینکار بصورت زیر عمل میکنیم:

همونطور که دیدید باید از دستور monitorEvents استفاده کنیم. این دستور دو ورودی دریافت میکنه. ورودی اول المنتی که میخایم رویداد رو براش بررسی کنیم قرار میدیم و ورودی دوم هم رویدادی که قرار هست بررسی بشه. حالا اگر بخوایم رویداد کلیک بر روی صفحه رو بررسی کنیم، باید عبارت monitorEvents(window, "click") رو در Console تایپ کرده و اینتر بزنیم:monitor events inspector 2

از این به بعد، هر جای صفحه که کلیک کنیم، اطلاعات اون نمایش داده میشه. برای مثال من برای یکبار بر روی یک نقطه از سایت مورد نظر کلیک میکنم و خروجی بصورت زیر هست:monitor events inspector 3

همونطور که میبینید یک رویداد از نوع click ثبت شده و اطلاعات کلی در مورد اون قرار داده شده. اگر بر روی مثلث واقع در کنار اون کلیک کنیم، اطلاعات اون بصورت کامل نمایش داده میشه:monitor events inspector 4

همونطور که میبینید اطلاعات رویداد بصورت کامل در اختیارتون قرار داده میشه. مثلا ویژگی altKey برابر با false هست و به معنای اینه که در زمان کلیک کردن، دکمه alt رو بر روی کیبور نگه نداشتیم. clientX و clientY فاصله های افقی و عمودی رو مشخص میکنه. همونطور که میبینید گفته شده که رویداد کلیک بر روی المنت h1 رخ داده است. شما میتونین از این ترفند استفاده های زیادی کنید. یکی از کارایی که میشه کرد اینه که بعضی اوقات میتونین با اینکار بفهمید که رویداد مورد نظرتون چه ویژگی هایی رو داره و بتونین از اونا در کدهاتون استفاده کنید.

ترفند 10 : ویرایش سریع تگهای HTML در تب Elements

شاید براتون پیش اومده باشه که بخواید مثلا تگ h1 رو به تگ p تبدیل کنید و برای اینکار لازم باشه که هم تگ ابتدا و هم تگ انتها رو ویرایش کنید. شما میتونین این کار رو در Inspector بصورت راحت انجام بدین و خود Inspector تگ نهایی رو برای شما با تگ ابتدایی مطابقت میده. همون سایت بالایی رو باز کرده و در Inspector تب elements رو باز کنید:edit tag name inspector

فرض کنید که میخایم تگ h1 مشخص شده رو به تگ p تغییر بدیم. برای اینکار بصورت زیر عمل میکنیم:change tag inspetor

دیدید که به سادگی بر روی تگ ابتدایی h1 دو بار کلیک میکنیم تا بصورت فعال در بیاد. بعد از اون اون رو به p تغییر میدیم و اینتر میزنیم. با اینکار تگ تغییر میکنه و منتظر میمونه که ویژگی دیگه ای رو به اون تگ اضافه کنید. شما میتونین مجددا اینتر بزنید تا ویژگی دیگه ای اضافه نشه. بهمین راحتی. حتی شما میتونین هر اسم دیگه ای رو برای تگها بزارید.change tag inspetor

همونطور که دیدید من اسم تگ رو فارسی قرار دادم و اون رو سلام کردم!

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

موفق باشید

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram