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

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



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

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

0 1868 ۲۳ مهر ۹۳

با استفاده از تب Profiles شما میتونین زمان صرف شده برای اجرای هر کد و همچنین حافظه ی ( Memory ) مورد استفاده قرار گرفته در این صفحه سایت رو بررسی کنین. این ابزار میتونه این اطلاعات رو به صورت نمودار هم در اختیارتون قرار بده.

1

شما میتونین در اینجا سه چیز رو بررسی کنید :

2

  1. این قسمت بیشتر توابع رو مورد بررسی قرار میده و زمانی که صرف شده تا توابع اجرا بشن رو آنالیز میکنه و اطلاعات رو در اختیارمون قرار میده.
  2.  این قسمت توزیع حافظه ( memory ) رو در صفحه برای اشیاء Javascript و گره هایی( node ) از DOM که به این شئ مربوط هستن رو ، مورد بررسی قرار میده.
  3. این قسمت هم زمان اختصاص داده شده به هر شئ Javascript رو نشون میده با کمی تفاوت. این قسمت تقریبا مثل نوار قلب عمل میکنه و لحظه به لحظه رو مورد بررسی قرار میده و آنالیز میکنه.

اینو هم بگم با استفاده از دکمه Load میتونین ، آنالبزهایی که قبلا ذخیره کردید رو دوباره باز کنید و بررسی کنید.

خب برای شروع گزینه 1 رو انتخاب کنید و روی دکمه Start کلیک کنید.

3

  1. همونطور که در تصویر بالا میبینید ، دکمه Start به Stop تبدیل میشه. تا زمانی که روی Stop کلیک نکنیم ، آنالیز ادامه پیدا میکنه.
  2. در این قسمت اگر اون دایره قرمز باشه ، یعنی آنالیز در حال انجام هست و اگه خاکستری باشه یعنی غیر فعاله. با استفاده از دکمه کناریش میتونین همه آنالیزهای قبلی رو پاک کنید.
  3. در این قسمت هم آنالیز ها قرار میگیرن و اسم و وضعیتشو نشون میده. مثلا در تصویر بالا اسمش Profile 1 هست و وضعیتش هم Recording هست. یعنی در حال ثبت و ضبط.

من پیشنهاد میکنم که دکمه Start رو بزنین و بعدش صفحه رو Reload کنید و بعد از اینکه صفحه کاملا لود شد ، بیاید و دکمه Stop رو بزنید تا همه چیز مورد بررسی قرار بگیره.

4

  1. بعد از اینکه روی Stop کلیک کردید ، اطلاعات در اختیارتون قرار میگیره. با کلیک کردن بر روی دکمه Save میتونین این آنالیز رو ذخیره کنید و بعدا اونو در جای دیگه یا زمان دیگه مورد بررسی قرار بدین.
  2. در این قسمت میتونین تعدادی عمل رو بر روی داده ها اتجام بدین. همونطور که میبینید ، سه تا ستون وجود داره.
    Self : زمانی که طول کشیده تا فقط این تابع اجرا بشه
    Total : زمانی که طول کشیده تا این تابع و توابعی که توسط این تابع صدا زده شده اند ، اجرا بشن
    Function : اسم تابع رو مینویسه. در بعضی از موارد کنار هر تابع یک فلش هست ، با کلیک بر روی اون میتونین جزئیات بیشتری رو ببینید.
  3. در این قسمت هم آدرس اون فایلی که تابع درونش قرار داره رو بهمون نشون میده.

5

  1. هر کدوم از موارد رو که انتخاب کنید ، با استفاده از این گزینه میتونین اونو از این لیست حذف کنید و یا کنارش بزارین.
    هر تغییری که در موارد ایجاد کنید ، یک گزینه اضافه میشه و میتونین موارد رو به حالت اولیه برگردونین.
    6
  2. با استفاده از این گزینه میتونین روی یکی از توابع تمرکز ( Focus ) کنید و اونو دقیقتر مورد بررسی قرار بدین.
  3. با استفاده از این منوی کشویی هم میتونین نحوه نمایش رو تغییر بدین. اگر گزینه Chart رو انتخاب کنید ، تمام اطلاعات بصورت نموداری در اختیارتون قرار میگیره و میتونین اون نمودار رو آنالیز و بررسی کنید.

7

همونطور که میبینید در بالای این قسمت یک نوار وجود داره که زمان ابتدا تا انتها رو روی اون نوشته و در هر لحظه نمودار رو رسم کرده. در دو گوشه ی کناری این نوار ، دو قسمت وجود داره که اگر روی اونا هاور کنیم ، میتونیم اونا رو جابجا کنیم و زمانهای کمتری رو مورد بررسی قرار بدیم.

مثلا فرض کنید کل بررسی 2 دقیقه طول کشیده باشه و من بخوام فقط 30 ثانیه وسط رو مورد بررسی قرار بدم. برای اینکار باید این نواحی رو جابجا کنید. بصورت زیر :

8

حالا در قسمت پایین میتونیم بر بروی نمودار اطلاعات خوبی بدست بیاریم :

10

 

با هاور کردن ماوس روی هر قسمت اطلاعاتی در یک باکس در اختیارتون قرار میگیره که میتونه بهتون کمک کنه.

در بعضی از جاها نوشته شده IDLE. این یعنی اینکه در این قسمت بیکار بوده و عملی انجام نداده.

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

برای مورد Heap snapshop هم میتونین به این لینک برید.

اگر مورد Record heap alocation رو انتخاب کنید و Start رو بزنید ، تصویری مثل تصویر پایین بهتون نمایش داده میشه :

11

اگر بخواین که آنالیز تموم بشه ، باید برگردید و روی دکمه Stop کلیک کنید.

12

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

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

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

 

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram