پانل DevTools Network را کاوش کنید

Jeff Posnick

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

به پنل شبکه بروید

برای مشاهده ترافیک شبکه برای برنامه آزمایشی به پانل شبکه بروید.

1. برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید .

2. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.

3. روی تب Network کلیک کنید.

4. صفحه را دوباره بارگیری کنید تا ترافیک شبکه را ببینید.

پانل شبکه تمام دارایی های بارگیری شده به دلیل پیمایش اولیه شما را نشان می دهد:

نحوه تفسیر مدخل ها

هر ردیف از ترافیک شبکه ثبت شده نشان دهنده یک جفت درخواست و پاسخ است.

ردیف اول، با type document ، درخواست ناوبری اولیه برای HTML برنامه وب است. این منبع آبشار است. هر یک از درخواست‌های بعدی برای دارایی‌های اضافی (که به عنوان منابع فرعی سند اصلی شناخته می‌شوند) از این منبع اصلی سرازیر می‌شوند.

سطرهای دوم و سوم که یک stylesheet CSS و یک منبع فرعی script در حال بارگذاری را نشان می دهند، درخواست های وابسته ای هستند که توسط سند اصلی آغاز شده اند.

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

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

چند درخواست زمان اجرا اضافی ایجاد کنید

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

با کلیک روی Find Me در برنامه و سپس Allow در پنجره بازشو که ظاهر می‌شود، این درخواست‌های اضافی را فعال کنید. این به سایت امکان می دهد به مکان فعلی شما دسترسی داشته باشد:

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

ورودی های جدید را تفسیر کنید

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

ردیف اول ورودی‌های جدید درخواستی را با یک نوع fetch نشان می‌دهد که مطابق با روشی است که برنامه وب داده‌ها را از API ویکی‌پدیا درخواست می‌کند .

سطرهای زیر همگی تصاویر ( png یا jpeg ) مرتبط با مدخل‌های ویکی‌پدیا هستند. اگرچه دیدن آن از روی اسکرین شات کمی سخت است، اما ورودی های آنها در ستون Waterfall مستقیماً از پاسخ API سرچشمه می گیرند.

برای همه این درخواست‌های اضافی، زمان بر اساس مدت زمانی که صفحه را باز کرده‌اید قبل از اینکه روی یافتن ورودی‌های ویکی‌پدیا نزدیک کلیک کنید، متفاوت است. مهمتر از همه در اینجا این است که وقتی از درخواست ناوبری اولیه جدا شده است. این را می‌توانید از شکاف بزرگی که در نمایشگر Waterfall وجود دارد، مشخص کنید، که نشان‌دهنده یک دوره زمانی است که بین بارگذاری اولیه و زمانی که درخواست API ویکی‌پدیا انجام می‌شود، سپری شده است.

درخواست‌هایی که پس از یک وقفه زمانی پس از پیمایش انجام می‌شوند، بر خلاف مجموعه اولیه درخواست‌هایی که برای نمایش صفحه زمانی که برای اولین بار به آن پیمایش کردید، در دسته «درخواست‌های زمان اجرا» قرار می‌گیرند.

خلاصه کردن مطالب

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

پانل شبکه به شما کمک می کند تا از طریق نمایشگر آبشار، از طریق نشانی های اینترنتی در ستون نام و داده های ستون نوع، به همراه زمان بارگیری، به این سؤال پاسخ دهید که چه چیزی در حال بارگذاری است.

همچنین دیده‌اید که درخواست‌های یک صفحه وب را می‌توان (معمولاً) به یکی از دو دسته گروه‌بندی کرد:

1. درخواست‌های اولیه، بلافاصله پس از پیمایش به یک صفحه جدید، برای HTML، جاوا اسکریپت، CSS (و احتمالاً دارایی‌های دیگر) انجام می‌شود.
2. درخواست‌های زمان اجرا در نتیجه تعامل کاربر با صفحه. این اغلب می تواند با یک درخواست به یک API شروع شود و سپس بر اساس داده های API بازیابی شده به چندین درخواست پیگیری جریان یابد.