مانیتور شبکه هر درخواست شبکهای که توسط صفحه فعلی انجام میشود را ضبط و نمایش میدهد — فراخوانیهای XHR/Fetch API، بارگذاری scriptها، واکشی stylesheetها، دانلود تصاویر، فایلهای فونت و موارد دیگر. URLها، متدهای HTTP، کدهای وضعیت، اندازه پاسخها و زمانبندی را ببینید — همه در یک پنل شناور بهروزرسانیشده در زمان واقعی بدون باز کردن DevTools مرورگر.
تب Network در Chrome DevTools قدرتمند اما سنگین است — فضای زیادی از صفحهنمایش را اشغال میکند، با هر ناوبری ریست میشود و شما را مجبور میکند از محتوای صفحه فاصله بگیرید. Network Monitor ویژگیهای اصلی مانیتورینگ شبکه را در یک پنل شناور سبک ارائه میدهد که روی صفحه قرار میگیرد.
این ابزار درخواستهای XHR و Fetch را رهگیری میکند و بارگذاری منابع را از طریق Performance API زیر نظر میگیرد، و هر درخواست شبکه را در لحظه وقوعش نشان میدهد. هر درخواست شامل URL، متد HTTP (GET، POST، PUT، DELETE)، کد وضعیت (با رنگبندی: سبز برای 2xx، زرد برای 3xx، قرمز برای 4xx/5xx)، حجم پاسخ به بایت و مدت زمان به میلیثانیه است. روی هر درخواست کلیک کنید تا جزئیات آن باز شود: هدرهای درخواست، هدرهای پاسخ، payload درخواست، پیشنمایش بدنه پاسخ و تفکیک زمانبندی.
درخواستهایی که از طریق Beacon API ارسال میشوند (معمولاً برای پینگهای آنالیتیکس درست پیش از خروج از صفحه) هم ثبت میشوند، که معمولاً مشاهده آنها دشوار است چون در حین ناوبری صفحه فرستاده میشوند. این ابزار جدا از WebSocket Inspector است — Network Monitor روی ترافیک درخواست/پاسخ HTTP تمرکز دارد، در حالی که اتصالات WebSocket و فریمهای آنها را ابزار اختصاصی WebSocket Inspector پوشش میدهد، تا هر پنل متمرکز و خوانا بماند بهجای اینکه دو نوع ترافیک بسیار متفاوت در یک فید شلوغ با هم مخلوط شوند.
هر درخواست شبکه همانطور که اتفاق میافتد در پنل ظاهر میشود — بارگذاری صفحه، فراخوانیهای 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 را به صورت رایگان نصب کنید و بیش از ۶۴ ابزار توسعه را برای مرورگر خود باز کنید.
