مانیتور شبکه هر درخواست شبکهای که توسط صفحه فعلی انجام میشود را ضبط و نمایش میدهد — فراخوانیهای XHR/Fetch API، بارگذاری scriptها، واکشی stylesheetها، دانلود تصاویر، فایلهای فونت و موارد دیگر. URLها، متدهای HTTP، کدهای وضعیت، اندازه پاسخها و زمانبندی را ببینید — همه در یک پنل شناور بهروزرسانیشده در زمان واقعی بدون باز کردن DevTools مرورگر.
تب Network در Chrome DevTools قدرتمند اما سنگین است — فضای صفحه قابل توجهی اشغال میکند، هنگام ناوبری بازنشینی میشود و نیاز دارید از محتوای صفحه دور شوید. مانیتور شبکه ویژگیهای نظارت شبکه ضروری را در یک پنل شناور سبکوزن که روی صفحه مینشیند ارائه میدهد. درخواستهای XHR و Fetch را رهگیری میکند و بارگذاری منابع را از طریق Performance API نظارت میکند و هر درخواست شبکه را همانطور که اتفاق میافتد نشان میدهد. هر درخواست URL، متد HTTP (GET، POST، PUT، DELETE)، کد وضعیت (رنگبندیشده: سبز برای 2xx، زرد برای 3xx، قرمز برای 4xx/5xx)، اندازه پاسخ در بایت و مدت در میلیثانیه را نشان میدهد. برای گسترش جزئیات روی هر درخواست کلیک کنید: هدرهای درخواست، هدرهای پاسخ، payload درخواست (برای POST/PUT)، پیشنمایش بدنه پاسخ و تجزیهوتحلیل زمانبندی. بر اساس نوع فیلتر کنید (XHR/Fetch، JS، CSS، تصاویر، فونتها) تا بر روی ترافیک خاص تمرکز کنید.
هر درخواست شبکه همانطور که اتفاق میافتد در پنل ظاهر میشود — بارگذاری صفحه، فراخوانیهای API، منابع lazy-loaded و واکشیهای پسزمینه. فید در زمان واقعی بدون نیاز به رفرش دستی بهروزرسانی میشود.
روی هر درخواست کلیک کنید تا جزئیات کامل را ببینید: URL درخواست، متد، هدرها، payload (برای POST/PUT)، هدرهای پاسخ، پیشنمایش بدنه پاسخ (JSON به صورت خودکار قالببندیشده)، کد وضعیت، اندازه و تجزیهوتحلیل زمانبندی.
درخواستها را بر اساس نوع فیلتر کنید: XHR/Fetch (فراخوانیهای API)، JS (scriptها)، CSS (stylesheetها)، IMG (تصاویر)، Font (فونتهای وب) یا همه. ترافیک API را از بارگذاری منابع جدا کنید تا بر آنچه اهمیت دارد تمرکز کنید.
کدهای وضعیت برای تشخیص فوری رنگبندی میشوند: سبز برای 2xx (موفق)، زرد برای 3xx (تغییر مسیر)، قرمز برای 4xx (خطاهای client) و 5xx (خطاهای server). درخواستهای ناموفق فوراً قابل مشاهده هستند.
هر درخواست اندازه پاسخ (در KB) و مدت کل (در میلیثانیه) را نشان میدهد. فراخوانیهای API کند، منابع بیش از حد بزرگ و درخواستهای غیرضروری که عملکرد صفحه را تأثیر میگذارند را شناسایی کنید.
یک نوار خلاصه تعداد کل درخواست و اندازه ترکیبی همه درخواستهای ضبطشده را نشان میدهد. خلاصه را فیلتر کنید تا جمع را برای هر نوع ببینید — چه مقدار پهنای باند برای scriptها در مقابل تصاویر در مقابل فراخوانیهای API صرف میشود.
درخواستهای XHR/Fetch را نظارت کنید تا تأیید کنید frontend شما endpointهای API صحیح را با پارامترهای درست فراخوانی میکند. برای بازرسی payloadهای درخواست و بدنههای پاسخ کلیک کنید — فرمتهای داده نادرست را فوراً شناسایی کنید.
ورودیهای قرمز 404 و 500 فوراً منابع شکسته یا فراخوانیهای API ناموفق را برجسته میکنند. ببینید کدام URLها شکست میخورند، کی شکست میخورند و چه پاسخ خطایی سرور برمیگرداند.
بر اساس مدت مرتب کنید تا کندترین درخواستها را پیدا کنید. بر اساس اندازه مرتب کنید تا بزرگترین منابع را پیدا کنید. جمع خلاصه تصویر کامل پهنای باند را نشان میدهد — آیا صفحه درخواستهای بیش از حدی میکند یا دادههای بیش از حدی دانلود میکند؟
ببینید صفحه چه درخواستهای شبکهای در پسزمینه میکند — pingهای آنالیتیکس، فراخوانیهای heartbeat، درخواستهای polling، منابع lazy-loaded. کل فعالیت شبکه را فراتر از آنچه برای کاربر قابل مشاهده است درک کنید.
درخواستها را فیلتر کنید و بررسی کنید با کدام دامنهها تماس برقرار میشود. scriptهای شخص ثالثی که فراخوانیهای شبکه غیرمنتظرهای انجام میدهند را شناسایی کنید — pixelهای ردیابی، جمعآوری داده یا فراخوانیهای API که نمیدانستید وجود دارند.
داک شناور DevSuite Pro را باز کرده و روی آیکون مانیتور شبکه کلیک کنید. یک پنل باز میشود و فوراً شروع به ضبط درخواستهای شبکه میکند.
صفحه را به طور معمول استفاده کنید. هر درخواست شبکه همانطور که انجام میشود در فید ظاهر میشود — فراخوانیهای API، بارگذاری منابع و واکشیهای پسزمینه همه ضبط میشوند.
روی فیلترهای نوع (XHR، JS، CSS، IMG، Font) کلیک کنید تا نما را محدود کنید. فقط فراخوانیهای API را برای اشکالزدایی واکشی داده نشان دهید، یا فقط تصاویر برای بررسی بارگذاری دارایی.
روی هر ردیف درخواست کلیک کنید تا جزئیات آن گسترش یابد: URL، هدرها، payload، بدنه پاسخ، کد وضعیت، اندازه و زمانبندی.
کدهای وضعیت قرمز (404، 500) درخواستهای ناموفق را نشان میدهند. مدتهای کند گلوگاههای عملکرد را علامت میزنند. اندازههای بزرگ منابعی را پیشنهاد میکنند که نیاز به بهینهسازی دارند.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.
