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

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



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

Inspector مرورگر Chrome ( قسمت هشتم ) : آشنایی با تب Sources

0 1725 ۲۰ مهر ۹۳

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

یادتونه که اگر مثلا در تب Elements روی عبارت jquery.js:33 کلیک میکردیم ، به تب Sources منتقل میشدیم و کدها رو بهمون نمایش میداد. همچنین برای کار با Break on ها هم که در جلسات قبل توضیح دادم ، به این بخش منتقل میشدیم.

این تب به شما کمک میکنه که کدهای Javascript خود را اشکال زدایی یا ( Debugging ) کنید.

1

در سمت چپ و راست این پنل دو تا قسمت وجود داره ، که وظیفه هر کدوم مشخصه.

2

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

3

در قسمت سمت چپ تمام Domain هایی که از اونا اسکریپت یا ... گرفته شده لیست میشه و با کلیک بر مثلث کنار هر کدوم میتونین جزئیات هر کدوم رو ببینید.

4

مثلا من بر روی هر کدام از فایلهای jquery.js و jquery-migrate.min.js دو بار کلیک میکنم. با این کار هر دو فایل در Editor خود Inspector باز خواهند شد و میتونیم کدهای درونش رو ببینیم.

5

  1. با کلیک بر روی این قسمت اگر کدهای CSS یا Javascript نامنظمی داشته باشین ، کدهاتون مرتب و منظم میشه و میتونین براحتی مشکل و ایراد رو پیدا کنید. بصورت زیر :
    6همونطور که میبینید ، نامش رو بصورت jquery.js:formatted نوشته. یعنی قالب بندی این فایل رو عوض کرده. اینو هم بگم که این تغییر فقط برای تست کردن هست و بر روی فایل اصلی اعمال نمیشه.
  2. این قسمت نشون میده که در حال حاضر ، اشاره گر چشمک زن ( Cursor ) در کدام سطر و کدام ستون قرار داره.
  3. در این بخش تبها قرار میگیرن و با کلیک بر روی هر تب ، جزئیات اون فایل نمایش داده میشه.
  4. در این بخش هم ، شماره خطوط قرار میگیره.

7

اگر در بخش Editor شما هیچ فایلی باز نباشه ، میتونین با زدن دکمه های ترکیبی Ctrl + P ، هر فایلی رو که میخواین انتخاب کنید ، تا جزئیاتش به نمایش در بیاد.

8

با استفاده از این قسمت میتونین همچنین ، نوعی جستجو در فایلهای موجود انجام بدین.

9

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

10

در قسمت سمت راست ، بخشهایی که مربوط به اشکال یابی کدها هست ، وجود داره.

  1. با کلیک بر روی این گزینه ، اجرای برنامه متوقف میشه و میتونین کارای مورد نظرتون رو در اون زمان انجام بدین. بعد از اینکه برنامه رو متوقف کردین ، دو تا گزینه دیگه جای این گزینه رو میگیرن :
    111. اجرای برنامه تا رسیدن به مرحله ( Break point ) بعدی ادامه پیدا میکنه.
    2. کلا از محیط اشکال یابی خارج میشیم و به حالت عادی برمیگردونه
  2.   درون همان تابع میمیاند و خط به خط برنامه اجرا میشه و میتونین تاثیر هر خط کد رو بر روی متغیرها و ... ببینید.
  3. به اولین تابعی که فرزند همین تابع باشه وارد میشه.
  4. به اولین تابعی که والد همین تابع باشه ، وارد میشه.
  5. به وسیله این گزینه میتونیم Break point ها رو غیر فعال یا فعال کنیم.
  6. در این قسمت ، تعدادی دسته بندی وجود داره که بعضیاشو قبلا گفتیم و بقیه رو هم الان میگیم.

در بخش Scope Variables ، دامنه ی تعریف هر کدوم از متغیرها بیان میشه.

بخشهای Call Stack و Dom Breakpoint هم قبلا گفته شد.

کاربرد قسمتهای Breakpoints و XHR Breakpoints و Event listener Breakpoints تقریبا یکی هست. به این معنی که هر وقت اجرای برنامه به یک خط خاص یا یک درخواست Ajax خاص و یا یک رویداد خاص رسید ، برنامه متوقف بشه و اطلاعات در اختیارمون قرار بگیره.

از قسمتهای بالا فقط در مورد قسمت Breakpoints بیشتر توضیح میدم و بقیه موارد چیز خاصی نداره و خودتون با یه مقدار کار کردن ، باهاش آشنا میشین.

12

همونطور که میبینید ، هیچ Breakpoint وجود ندارد. برای اضافه کردن باید کنار هر خط از کد که میخواهیم کلیک کنیم ، تا به رنگ آبی در بیاید ، به صورت زیر :

13

با کلیک مجدد ، این رنگ آبی از بین میره و انگار اون Breakpoints حذف شده. همچنین میتونین چندتا خط رو با هم دیگه انتخاب کنبد ، برای اینکار کافیه کنار هر خط که خواستین ، یکبار کلیک کنید.

تصویر بالا رو در نظر بگیرین. بعد از اینکه کنار یک خط کلیک کردین ، یک مورد به بخش Breakpoints اضافه میشه :

14

همونطور که میبینید ، نام فایل و شماره خط نوشته شده. با برداشتن تیک یا با زدن گزینه 3 میتونین اون Breakpoint رو غیر فعال ( Deactive ) کنین. با انتخاب گزینه 2 هم میتونین این مورد رو حذف کنید.

خیلی امکانات دیگه هم وجود داره ، که من پیشنهاد میکنیم به این لینک هم یه سری بزنین و از اون استفاده کنید.

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram