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

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



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

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

0 2065 ۲۵ مهر ۹۳

این تب به شما اجازه میده که تمام فعالیتهای سایتتون رو ثبت و آنالیز کنید. این پنل میتونه نقطه شروعی برای برطرف کردن نقاط ضعف سایتتون باشه. این پنل رویدادها و Event های مختلف رو مورد بررسی قرار میده.

1 این تب خیلی جای کار داره و شاید من نتونم کامل براتون توضیح بدم. پس پیشنهاد میکنم هر کس مایل بود بیشتر در مورد این تب بخونه ، تو گوگل سرچ کنه. حتما مطالب خوبی پیدا میشه. من در حد آشنایی براتون توضیح میدم.

2

  1. هر موقع شما روی این گزینه کلیک کنید ، فرآیند بررسی و آنالیز شروع میشه. با کلیک کردن روی این گزینه ، رنگش از خاکستری به قرمز تبدیل میشه ، این قرمز بودن به معنای فعال بودنه. زمانی که این گزینه رو فعال کردید ، رویدادهایی که در صفحه اتفاق میوفتن ، یکی یکی شمرده میشن و ثبت میشن ، بصورت زیر :
    3هر وقت خواستین فرآیند ضبط و ثبت پایان پیدا کنه تا بتونین اونا رو آنالیز کنید ، باید دوباره روی همین گزینه کلیک کنید تا متوقف بشه و رنگش خاکستری بشه و اطلاعات در اختیارتون قرار بگیره.
  2. با کلیک کردن بر روی این گزینه ، تمام اطلاعات ثبت شده ی قبلی حذف میشه
  3. با استفاده از این ابزار میتونین نتایج رو فیلتر بکنید و مثلا بگین فقط نوع خاصی از نتایج نمایش داده بشن
  4. با استفاده از این گزینه میتونین اطلاعات اضافی و بنوعی آشغال رو جمع و جور کنید
  5. اگر این گزینه رو فعال کنید ، رویدادهای همزمان ، در یک ستون از نمودار در اختیارتون قرار میگیره
  6. اگر این گزینه تیکش خورده باشه تمامی Call Stack ها یا صدا زدن های توابع هم بررسی و نوشته میشه
  7. این گزینه هم اگه فعال باشه اطلاعات خوبی در مورد حافظه مورد استفاده و .... در اختیارتون قرار میگیره.

4

همونطور که میبینید رنگ ها متفاوته ، که مثلا رنگ آبی مربوط به لود ( Load ) هست.

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

  1. Loading : رویدادهایی که مربوط به لود هستن
  2. Scripting : رویدادهای که مربوط به اسکریپت و جاوااسکریپت هستن
  3. Rendering : رویدادهای مربوط به رندر کردن صفحه
  4. Painting : بیشتر مربوط به استایل و اضافه شدن عنصر و ...

5

 

در تصویر بالا خط زمان یا Timeline رو براتون مشخص کردم. در این قسمت زمان ابتدا تا انتها رو به شما نشون میده و با استفاده از دو قسمتی که در سمت چپ و راست قرار داره ، میتونین روی قسمت خاصی از این نوار بررسی رو انجام بدین. بصورت زیر :

6 در تصویر پایین قسمتی که دورش کادر کشیدم رویدادهارو رسم کرده. میتونین ببینین که هر رویداد در چه بازه ی زمانی به وقوع پیوسته.

8

حالا شما میتونین با انتخاب گزینه ای که در زیر مشخص کردم ، رویدادهای همزمان رو در یک ستون در نمودار قرار بدین :

9

به این حالت نمای فریم هم گفته میشه و در سمت راست این قسمت fps یا تعداد فریم در ثانیه هم بیان میشه.

10

شما هر بازه زمانی یا هر مورد خاصی رو انتخاب کنید ، نمودار دایره ای شکلی در اختیار شما قرار میگیره ، که این نمودار در سمت راست و پایین پنل Timeline قرار داره و اطلاعات تصویری و خوبی در اختیارتون قرار میده. در پایین این نمودار هم راهنما و اعداد و ارقامش قرار گرفته که میتونین از اونا استفاده کنید. همونطور که قبلا گفتم idle به معنای بیکار بودن هست. همونطور که در تصویر بالا میبینید ، 64.225ms این قسمتی که انتخاب کردیم بیکار بوده که با رنگ سفید نمایش داده میشه.

11

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

12

هر بازه ی زمانی رو که مشخص میکنید ، اطلاعات ریزتر و مرتبتری در قسمت Records در اختیارتون قرار میگیره.

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

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

14

اگر گزینه Memory رو از قسمت بالا انتخاب کنید ، یک نمودار در مورد حافظه در اختیارتون قرار میگیره که بعضی از مواقع میتونه کمکتون کنه :

15

از قسمتی هم که در تصویر پایین مشخص کردم ،  میتونین مشخص کنین چه چیزهایی در نمودار نمایش داده بشه.

16

 

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

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

خب دوستان این دوره آموزشی با همه خوبیها و بدیهاش تموم شد.

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

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram