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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

Inspector مرورگر Chrome ( قسمت پنجم ) : تکمیل تب Elements

0 2434 ۱۴ مهر ۹۳

خب همونطور که از اسم این مطلب پیداس ، میخوایم تب Elements رو تکمیل کنیم.

1

سه تب Event Listener و DOM Breakpoints و Properties بیشتر مربوط به کسانی هست که با Javascript  کار میکنن و میتونه بهشون کمک کنه.

همونطور که در تصویر بالا مشاهده میکنید ، در تب Event Listener تمام رویدادها ( Event ) نمایش داده میشه. مثلا beforeload و click و ...

کنار هر مورد یک فلش مثلثی وجود داره. با کلیک بر روی اون ، اطلاعات درونش نشون داده میشه.

2

بعنوان مثال ، اطلاعات درون click رو مشاهده کنید. میبینید که رویداد کلیک در 3 جا تعریف شده. دو تا برای body با کلاس slbdy و یکی هم برای document.

روبروی هر کدوم هم یک لینک هست که مشخص میکنه این رویداد در کجا تعریف شده و handler اونو نمایش میده. عددی که در آخرش میبینید ، یعنی برید فایل رو باز کنید و این event در اون خط قرار داره.

با کلیک بر روی هر کدوم از لینکها ، به تب sources منتقل میشیم و میتونیم جایی که این event تعریف شده رو ببینیم.

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

3

اگه یادتون باشه در قسمتهای قبلی ، هر وقت روی کدهای HTML کلیک راست میکردیم ، یک باکس باز میشد و تعدادی گزینه داشت. من همه گزینه ها رو براتون توضیح دادم ، بغیر از Break on. این گزینه هم بیشتر مربوط به javascript میشه. این گزینه به ما اجازه میده که بفهمیم در هر لحظه چه کد javascript ای داره کدهای HTML و CSS رو دستکاری میکنه و اطلاعات دقیقی رو در اختیارمون قرار میده.

همونطور که از اسمش معلومه ، وقتی Javascript خواست در کدهامون دستکاری کنه ، اجرای دستورات متوقف ( Break ) میشه و طراح میتونه ببینه کدوم خط فایل و کدوم function داره این دستکاری رو انجام میده.

گزینه ی Break on دستکاری javascript رو کلا به سه صورت در نظر گرفته :

  1.  Subtree modifications : هر گاه تغییراتی در فرزندان المنت صورت بگیره ، برنامه break میشه.
  2. Attributes modifications : هر گاه تغییراتی در خصوصیتهای خود المنت صورت بگیره ، برنامه break میشه.
  3. Node removal : هر وقت المنت خواست توسط javascript حذف بشه ، برنامه متوقف میشه و به ما میگه که چه کدهایی دارن این کارو انجام میدن.

هر وقت شما روی المنتی کلیک راست میکنید و break on رو برای اون فعال میکنید ، یک مورد به پنل DOM Breakpoins اضافه میشه. بصورت زیر :

4

بزارید یک مثال براتون بزنم. فرض کنید میخواید بفهمید چه توابعی در چه فایلهایی دارن دست به دست هم میدن و اسلایدر درون سایت سون لرن رو مدیریت میکنن.

برای اینکار روی اسلایدر کلیک راست میکنیم و Inspect Element رو کلیک میکنیم.

5

همونطور که میبینید این اسلایدر از یک ul تشکیل شده که درون اون ، 5 تا li وجود داره ، که درون هر li هم عکس و اطلاعات مربوط به اون اسلاید وجود داره.

اگه در Inspector به کدهای بالا دقت کنید ، زمانی که اسلایدر عوض میشه ، بعضی از خصوصیت های li ها تغییر میکنه. این تغییر دادن خصوصیتها توسط javascript صورت میگیره. خب برای اینکه بفهمیم دقیقا چه کدهایی هستن باید از break on استفاده کنیم. چون خصوصیتها داره عوض میشه پس باید از مورد دوم ، یعنی Attributes modifications استفاده کنیم.

به محض اینکه javascript اولین تغییر رو در خصوصیتهای المنت بوجود بیاره ، برنامه متوقف میشه و به تب Sources منتقل میشید و اطلاعات در اختیارتون قرار میگیره و یک علامت بشکل زیر در صفحه ظاهر میشه :

6

  1. اگر میخواید برنامه اجرا بشه و متوقف بودنو بیخیال بشید باید چندبار روی مورد 1 کلیک کنید.
  2. میدونید که تغییر در خصوصیتها توسط توابع مختلفی صورت میگیره ، با مورد 2 میشه تابع بعدی رو صدا بزنیم ، تا با روند کلی اجرا آشنا بشیم.

همونطور که گفتم به تب Sources منتقل میشید و اطلاعات در بخش Call stack در اختیارتون قرار میگیره :

7

 

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

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

8

در تب DOM Breakpoints هم شما میتونین ، break on هایی که قبلا درست کردین رو حذف کنید و یا با برداشتن تیک کنارشون ، اونارو غیر فعال کنید.

9

هر المنتی رو که Inspect کنید ، در تب Properties ، اطلاعات بسیار مفیدی در مورد اون المنت بهتون میده که بعضی مواقع خیلی بدردتون میخوره.

فقط یک نکته در جلسات قبل یادم رفت بگم . اونم اینه که میتونین Inspector رو در سه جای مختلف قرار بدین :

  • پایین صفحه
  • صفحه جداگانه
  • سمت راست

مورد اول و دومی رو که باهاش آشنا هستید ، حالا اگر دوست داشتین که Inspector شما سمت راست باشه میتونین به شکل زیر عمل کنید :

10

کافیه که روی علامته ، کلیک کنید و نگه دارین تا یک مورد دیگه هم نمایش داده بشه و انتخابش کنین تا Inspector در سمت راست مرورگر قرار بگیره.

خب دوستان خسته نباشید.

موفق باشید. یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram