مرجع ویژگی های شبکه

Kayce Basques

Sofia Emelianova

در این مرجع جامع از ویژگی‌های تحلیل شبکه Chrome DevTools، روش‌های جدیدی را برای تحلیل نحوه بارگذاری صفحه خود کشف کنید.

درخواست‌های شبکه را ثبت کنید

به طور پیش‌فرض، DevTools تمام درخواست‌های شبکه را در پنل Network ثبت می‌کند، البته تا زمانی که DevTools باز باشد.

توقف ضبط درخواست‌های شبکه

برای توقف ضبط درخواست‌ها:

• روی توقف ضبط گزارش شبکه کلیک کنید در پنل شبکه . این گزینه به رنگ خاکستری در می‌آید که نشان می‌دهد DevTools دیگر درخواست‌ها را ضبط نمی‌کند.
• در حالی که پنل شبکه در حالت فوکوس است، کلیدهای Command > + E (مک) یا Control + E (ویندوز، لینوکس) را فشار دهید.

درخواست‌های پاک‌شده

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

ذخیره درخواست‌ها در طول بارگذاری صفحات

برای ذخیره درخواست‌ها در طول بارگذاری صفحات، کادر انتخاب Preserve log را در پنل Network علامت بزنید. DevTools تمام درخواست‌ها را ذخیره می‌کند تا زمانی که Preserve log را غیرفعال کنید.

گرفتن اسکرین شات در حین بارگذاری صفحه

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

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

برای گرفتن اسکرین‌شات، در حالی که پنل شبکه در حالت فوکوس است، صفحه را مجدداً بارگذاری کنید.

پس از گرفتن اسکرین‌شات، می‌توانید به روش‌های زیر با آن تعامل داشته باشید:

• برای مشاهده‌ی نقطه‌ای که اسکرین‌شات گرفته شده است، نشانگر ماوس را روی آن نگه دارید. یک خط زرد در جدول زمانی نمای کلی ظاهر می‌شود.
• برای فیلتر کردن درخواست‌هایی که پس از گرفتن اسکرین‌شات رخ داده‌اند، روی تصویر کوچک اسکرین‌شات کلیک کنید.
• برای بزرگنمایی روی یک تصویر کوچک، روی آن دوبار کلیک کنید.

درخواست XHR را دوباره پخش کنید

برای پخش مجدد یک درخواست XHR، یکی از موارد زیر را در جدول درخواست‌ها انجام دهید:

• درخواست را انتخاب کنید و R را فشار دهید.
• روی درخواست کلیک راست کرده و Replay XHR را انتخاب کنید.

تغییر رفتار بارگذاری

با غیرفعال کردن حافظه پنهان مرورگر، از یک بازدیدکننده برای اولین بار تقلید کنید

برای شبیه‌سازی تجربه کاربری که برای اولین بار از سایت شما استفاده می‌کند، گزینه غیرفعال کردن حافظه پنهان (Disable cache) را تیک بزنید. DevTools حافظه پنهان مرورگر را غیرفعال می‌کند. این کار تجربه کاربری که برای اولین بار از سایت شما استفاده می‌کند را با دقت بیشتری شبیه‌سازی می‌کند، زیرا درخواست‌ها در بازدیدهای مکرر از حافظه پنهان مرورگر ارسال می‌شوند.

کش مرورگر را از کشوی وضعیت‌های شبکه غیرفعال کنید

اگر می‌خواهید هنگام کار در سایر پنل‌های DevTools، حافظه پنهان را غیرفعال کنید، از کشوی شرایط شبکه استفاده کنید.

1. کلیک کنید آیکون برای باز کردن کشوی شرایط شبکه .
2. کادر غیرفعال کردن حافظه پنهان را علامت بزنید یا علامت آن را بردارید.

پاک کردن دستی کش مرورگر

برای پاک کردن دستی کش مرورگر در هر زمانی، در هر جایی از جدول درخواست‌ها کلیک راست کرده و گزینه Clear browser cache را انتخاب کنید.

شبیه‌سازی آفلاین

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

برای شبیه‌سازی یک تجربه شبکه کاملاً آفلاین، از منوی کشویی Network throttling در کنار کادر غیرفعال کردن حافظه پنهان ، گزینه Offline را انتخاب کنید.

DevTools یک آیکون هشدار در کنار تب Network نمایش می‌دهد تا به شما یادآوری کند که حالت آفلاین فعال است.

شبیه‌سازی اتصالات شبکه کند

برای شبیه‌سازی 4G سریع، 4G کند یا 3G، از منوی کشویی Throttling در نوار عملیات بالا، تنظیمات پیش‌فرض مربوطه را انتخاب کنید.

DevTools یک آیکون هشدار در کنار پنل Network نمایش می‌دهد تا به شما یادآوری کند که throttling فعال است.

ایجاد پروفایل‌های تنظیم گلوگاه سفارشی

علاوه بر تنظیمات پیش‌فرض، مانند کند یا سریع بودن 4G، می‌توانید پروفایل‌های تنظیم سرعت دلخواه خود را نیز اضافه کنید:

1. منوی Throttling را باز کنید و Custom > Add... را انتخاب کنید.
2. همانطور که در تنظیمات توضیح داده شده است، یک پروفایل تنظیم سرعت جدید تنظیم کنید. تنظیمات > تنظیم سرعت .

3. به پنل Network برگردید، پروفایل جدید خود را از منوی کشویی Throttling انتخاب کنید.

   

DevTools یک را نمایش می‌دهد نماد هشدار در کنار پنل شبکه برای یادآوری فعال بودن تنظیم سرعت.

اتصالات وب سوکت Throttle

علاوه بر درخواست‌های HTTP، DevTools از نسخه ۹۹ به بعد، اتصالات WebSocket را نیز کنترل می‌کند.

برای مشاهده‌ی کاهش سرعت WebSocket:

1. برای مثال، با استفاده از یک ابزار تست ، یک اتصال جدید را آغاز کنید.
2. در پنل شبکه ، گزینه «بدون محدودیت سرعت» را انتخاب کنید و از طریق اتصال، پیامی ارسال کنید.
3. یک پروفایل تنظیم سرعت سفارشی بسیار کند، مثلاً 10 kbit/s ، ایجاد کنید. چنین پروفایل کندی به شما کمک می‌کند تا تفاوت را متوجه شوید.
4. در پنل شبکه ، پروفایل را انتخاب کنید و پیام دیگری ارسال کنید.
5. فیلتر WS را فعال یا غیرفعال کنید، روی نام اتصال خود کلیک کنید، تب پیام‌ها را باز کنید و اختلاف زمانی بین پیام‌های ارسالی و تکرار شده را با و بدون تنظیم سرعت بررسی کنید. برای مثال:

اتصالات شبکه کند را از کشوی شرایط شبکه شبیه‌سازی کنید

اگر می‌خواهید هنگام کار در سایر پنل‌های DevTools، اتصال شبکه را محدود کنید، از کشوی شرایط شبکه استفاده کنید.

1. کلیک کنید آیکون برای باز کردن کشوی شرایط شبکه .
2. سرعت اتصال را از منوی Network throttling انتخاب کنید.

پاک کردن دستی کوکی‌های مرورگر

برای پاک کردن دستی کوکی‌های مرورگر در هر زمانی، در هر جایی از جدول درخواست‌ها کلیک راست کرده و گزینه پاک کردن کوکی‌های مرورگر را انتخاب کنید.

هدرهای پاسخ HTTP را نادیده بگیرید

به نادیده گرفتن فایل‌ها و هدرهای پاسخ HTTP به صورت محلی مراجعه کنید.

نادیده گرفتن عامل کاربر

برای لغو دستی عامل کاربر:

1. کلیک کنید آیکون برای باز کردن کشوی شرایط شبکه .
2. پاک کردن انتخاب به صورت خودکار .
3. یک گزینه‌ی عامل کاربر از منو انتخاب کنید، یا یک مورد دلخواه را در کادر وارد کنید.

درخواست‌های جستجو

برای جستجو در هدرهای درخواست، پیلودها و پاسخ‌ها:

1. برای باز کردن برگه جستجو در سمت راست، میانبر زیر را فشار دهید:

   • در macOS، کلیدهای Command + F.
   • در ویندوز یا لینوکس، کنترل + F.

2. در برگه جستجو ، عبارت مورد نظر خود را وارد کرده و Enter را بزنید. در صورت تمایل، برای فعال کردن حساسیت به حروف کوچک و بزرگ یا عبارات منظم، روی match_case یا regular_expression کلیک کنید.

3. روی یکی از نتایج جستجو کلیک کنید. پنل Network درخواستی که مطابقت داشته باشد را با رنگ زرد برجسته می‌کند. علاوه بر این، این پنل همچنین تب Headers یا Response را باز می‌کند و در صورت وجود، رشته‌ای را که با آن مطابقت داشته باشد، برجسته می‌کند.

برای به‌روزرسانی نتایج جستجو، روی «به‌روزرسانی » کلیک کنید. برای پاک کردن نتایج، روی «پاک کردن بلوک» کلیک کنید.

برای اطلاعات بیشتر در مورد تمام روش‌های جستجو در DevTools، به «جستجو: یافتن متن در تمام منابع بارگذاری شده» مراجعه کنید.

درخواست‌های فیلتر

فیلتر کردن درخواست‌ها بر اساس ویژگی‌ها

از کادر فیلتر برای فیلتر کردن درخواست‌ها بر اساس ویژگی‌ها، مانند دامنه یا اندازه درخواست، استفاده کنید.

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

برای معکوس کردن فیلتر، کادر انتخاب Invert کنار کادر Filter را علامت بزنید.

شما می‌توانید با جدا کردن هر ویژگی با یک فاصله، از چندین ویژگی به طور همزمان استفاده کنید. برای مثال، mime-type:image/gif larger-than:1K تمام GIFهایی را که بزرگتر از یک کیلوبایت هستند نمایش می‌دهد. این فیلترهای چند ویژگی معادل عملیات AND هستند. عملیات OR پشتیبانی نمی‌شوند.

در ادامه لیست کاملی از ویژگی‌های پشتیبانی‌شده آمده است.

• cookie-domain . منابعی را که یک دامنه کوکی خاص را تنظیم می‌کنند، نمایش دهید.
• cookie-name . منابعی را که نام کوکی خاصی را تعیین می‌کنند، نمایش می‌دهد.
• cookie-path . منابعی را که مسیر کوکی خاصی را تعیین می‌کنند، نمایش می‌دهد.
• cookie-value . منابعی را که مقدار کوکی خاصی را تعیین می‌کنند، نمایش می‌دهد.
• domain . فقط منابع را از دامنه مشخص شده نمایش دهید. می‌توانید از کاراکتر wildcard ( * ) برای گنجاندن چندین دامنه استفاده کنید. برای مثال، *.com منابع را از تمام نام‌های دامنه‌ای که به .com ختم می‌شوند نمایش می‌دهد. DevTools منوی کشویی تکمیل خودکار را با تمام دامنه‌هایی که با آنها مواجه شده است، پر می‌کند.
• has-overrides . درخواست‌هایی را نشان می‌دهد که content ، headers ، هرگونه override ( yes ) یا هیچ override ( no ) لغو شده‌اند. می‌توانید ستون مربوطه Has overrides را به جدول درخواست اضافه کنید.
• has-response-header . منابعی را که حاوی هدر پاسخ HTTP مشخص شده هستند نمایش می‌دهد. DevTools منوی کشویی تکمیل خودکار را با تمام هدرهای پاسخی که با آنها مواجه شده است، پر می‌کند.
• برای یافتن منابع WebSocket از is is:running استفاده کنید.
• larger-than . منابعی را که بزرگتر از اندازه مشخص شده هستند، بر حسب بایت نمایش می‌دهد. تنظیم مقدار 1000 معادل تنظیم مقدار 1k است.
• method . منابعی را که از طریق یک نوع متد HTTP مشخص بازیابی شده‌اند، نمایش می‌دهد. DevTools منوی کشویی تکمیل خودکار را با تمام متدهای HTTP که با آنها مواجه شده است، پر می‌کند.
• mime-type . منابع یک نوع MIME مشخص شده را نمایش می‌دهد. DevTools منوی کشویی تکمیل خودکار را با تمام انواع MIME که با آنها مواجه شده است، پر می‌کند.
• mixed-content . نمایش همه منابع محتوای ترکیبی ( mixed-content:all ) یا فقط آنهایی که نمایش داده می‌شوند ( mixed-content:displayed ).
• priority . منابعی را نشان دهید که سطح اولویت آنها با مقدار مشخص شده مطابقت دارد.
• resource-type . منابعی از یک نوع منبع، مثلاً تصویر، را نمایش می‌دهد. DevTools منوی کشویی تکمیل خودکار را با تمام انواع منابعی که با آنها مواجه شده است، پر می‌کند.
• response-header-set-cookie . هدرهای خام Set-Cookie را در برگه Issues نمایش دهید. کوکی‌های ناقص با هدرهای Set-Cookie نادرست در پنل Network علامت‌گذاری می‌شوند.
• scheme . منابع بازیابی شده از طریق HTTP محافظت نشده ( scheme:http ) یا HTTPS محافظت شده ( scheme:https ) را نشان دهید.
• set-cookie-domain . منابعی را نشان می‌دهد که دارای سرآیند Set-Cookie با ویژگی Domain هستند که با مقدار مشخص شده مطابقت دارد. DevTools فرم تکمیل خودکار را با تمام دامنه‌های کوکی که با آنها مواجه شده است، پر می‌کند.
• set-cookie-name . منابعی را نشان می‌دهد که سرآیند Set-Cookie با نامی مطابق با مقدار مشخص شده مطابقت دارد. DevTools فرم تکمیل خودکار را با تمام نام‌های کوکی که با آنها مواجه شده است، پر می‌کند.
• set-cookie-value . منابعی را نشان می‌دهد که دارای سرصفحه Set-Cookie با مقداری هستند که با مقدار مشخص شده مطابقت دارد. DevTools فرم تکمیل خودکار را با تمام مقادیر کوکی که با آنها مواجه شده است، پر می‌کند.
• status-code . فقط منابعی را نشان می‌دهد که کد وضعیت HTTP آنها با کد مشخص شده مطابقت دارد. DevTools منوی کشویی تکمیل خودکار را با تمام کدهای وضعیتی که با آنها مواجه شده است، پر می‌کند.
• url . منابعی را نشان می‌دهد که url آنها با مقدار مشخص شده مطابقت دارد.

فیلتر کردن درخواست‌ها بر اساس نوع

برای فیلتر کردن درخواست‌ها بر اساس نوع منبع، روی دکمه‌های All ، Fetch/XHR ، JS ، CSS ، Img ، Media ، Font ، Doc ، WS (WebSocket)، Wasm (WebAssembly)، Manifest یا Other (هر نوع دیگری که در اینجا ذکر نشده است) در پنل Network کلیک کنید.

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

برای نمایش همزمان منابع از چندین نوع، دکمه Command (مک) یا Control (ویندوز، لینوکس) را نگه دارید و سپس روی چندین فیلتر نوع کلیک کنید.

فیلتر کردن درخواست‌ها بر اساس زمان

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

پنهان کردن آدرس‌های اینترنتی داده‌ها

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

برای پنهان کردن این درخواست‌ها، در نوار عملیات فیلترها ، فیلترهای بیشتر > کادر انتخاب مخفی کردن URLهای داده را انتخاب کنید.

نوار وضعیت در پایین، تعداد درخواست‌های نمایش داده شده از کل درخواست‌ها را نمایش می‌دهد.

پنهان کردن URL های افزونه

برای تمرکز روی کدی که می‌نویسید، می‌توانید درخواست‌های نامربوطی که توسط افزونه‌هایی که ممکن است در کروم نصب کرده باشید ارسال می‌شوند را فیلتر کنید. درخواست‌های افزونه دارای URLهایی هستند که با chrome-extension:// شروع می‌شوند.

برای پنهان کردن درخواست‌های افزونه، در نوار عملیات فیلترها ، فیلترهای بیشتر > کادر انتخاب پنهان کردن نشانی‌های اینترنتی افزونه را انتخاب کنید.

نوار وضعیت در پایین، تعداد درخواست‌های نمایش داده شده از کل درخواست‌ها را نمایش می‌دهد.

فقط درخواست‌هایی را نشان بده که کوکی‌های پاسخشان مسدود شده است

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

نوار وضعیت در پایین، تعداد درخواست‌های نمایش داده شده از کل درخواست‌ها را نمایش می‌دهد.

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

علاوه بر این، پنل شبکه یک نماد هشدار در کنار درخواستی با کوکی‌های مسدود شده، چه به دلیل پرچم‌های کروم و چه به دلیل پیکربندی، نشان می‌دهد. برای دیدن یک راهنمای ابزار با یک سرنخ، روی نماد کلیک کنید و برای اطلاعات بیشتر به پنل مشکلات بروید.

فقط درخواست‌های مسدود شده را نشان بده

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

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

فقط درخواست‌های شخص ثالث را نمایش بده

برای فیلتر کردن همه چیز به جز درخواست‌هایی که مبدا آنها با مبدا صفحه متفاوت است، در نوار ابزار فیلترها ، فیلترهای بیشتر > تیک گزینه درخواست‌های شخص ثالث را انتخاب کنید.

نوار وضعیت در پایین، تعداد درخواست‌های نمایش داده شده از کل درخواست‌ها را نمایش می‌دهد.

مرتب‌سازی درخواست‌ها

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

مرتب سازی بر اساس ستون

برای مرتب‌سازی درخواست‌ها بر اساس آن ستون، روی سربرگ هر ستون در جدول درخواست‌ها کلیک کنید.

مرتب سازی بر اساس مرحله فعالیت

برای تغییر نحوه مرتب‌سازی درخواست‌ها در Waterfall ، روی هدر جدول Requests کلیک راست کنید، موس را روی Waterfall ببرید و یکی از گزینه‌های زیر را انتخاب کنید:

• زمان شروع . اولین درخواستی که آغاز شده است در بالا قرار دارد.
• زمان پاسخ . اولین درخواستی که دانلود آن شروع شده در بالا قرار دارد.
• زمان پایان . اولین درخواستی که پایان یافته است در بالا قرار دارد.
• مدت زمان کل . درخواستی که کوتاه‌ترین زمان راه‌اندازی اتصال و درخواست/پاسخ را دارد، در بالا قرار دارد.
• تأخیر . درخواستی که کمترین زمان را برای پاسخ منتظر مانده است، در بالا قرار دارد.

این توضیحات فرض می‌کنند که هر گزینه مربوطه از کوتاه‌ترین به طولانی‌ترین رتبه‌بندی شده است. کلیک روی سرستون آبشاری ، ترتیب را برعکس می‌کند.

در این مثال، نمودار آبشاری بر اساس کل مدت زمان مرتب شده است. قسمت روشن‌تر هر نوار، زمان صرف شده برای انتظار و قسمت تیره‌تر، زمان صرف شده برای دانلود بایت‌ها را نشان می‌دهد.

تجزیه و تحلیل درخواست‌ها

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

مشاهده گزارش درخواست‌ها

از جدول درخواست‌ها (Requests) برای مشاهده‌ی گزارش تمام درخواست‌های انجام‌شده در زمان باز بودن DevTools استفاده کنید. کلیک کردن یا نگه داشتن ماوس روی درخواست‌ها، اطلاعات بیشتری در مورد آن‌ها نشان می‌دهد.

جدول درخواست‌ها (Requests) به طور پیش‌فرض ستون‌های زیر را نمایش می‌دهد:

• نام . نام فایل یا شناسه‌ای برای منبع.

• وضعیت . این ستون می‌تواند مقادیر زیر را نشان دهد:

  

  • کد وضعیت HTTP، برای مثال، 200 یا 404 .
  • CORS error برای درخواست‌های ناموفق به دلیل اشتراک‌گذاری منابع بین مبدا (CORS).
  • (blocked:origin) برای درخواست‌هایی با هدرهای پیکربندی نادرست. برای مشاهده‌ی یک راهنما (tooltip) حاوی نکته‌ای در مورد مشکل پیش آمده، نشانگر ماوس را روی این مقدار وضعیت نگه دارید.
  • (failed) و به دنبال آن پیام خطا.

• نوع . نوع MIME منبع درخواستی.

• آغازگر (Initiator ): اشیاء یا فرآیندهای زیر می‌توانند درخواست‌ها را آغاز کنند:

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

• اندازه : اندازه ترکیبی هدرهای پاسخ به علاوه بدنه پاسخ، همانطور که توسط سرور ارائه می‌شود.

• زمان . کل مدت زمان، از شروع درخواست تا دریافت آخرین بایت در پاسخ.

• آبشاری . تفکیک بصری از فعالیت هر درخواست.

اضافه کردن یا حذف ستون‌ها

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

شما می‌توانید ستون‌های اضافی زیر را اضافه یا حذف کنید: مسیر ، URL ، روش ، پروتکل ، طرح ، دامنه ، آدرس راه دور ، فضای آدرس راه دور ، فضای آدرس آغازگر ، کوکی‌ها ، تنظیم کوکی‌ها ، اولویت ، شناسه اتصال ، لغوها و آبشار .

اضافه کردن ستون‌های سفارشی

برای اضافه کردن یک ستون سفارشی به جدول درخواست‌ها :

1. روی سربرگ جدول درخواست‌ها کلیک راست کرده و گزینه Response Headers > Manage Header Columns را انتخاب کنید.
2. در پنجره‌ی محاوره‌ای، روی «افزودن سربرگ سفارشی» کلیک کنید، نام آن را وارد کنید و روی «افزودن» کلیک کنید.

درخواست‌ها را بر اساس فریم‌های درون‌خطی گروه‌بندی کنید

اگر فریم‌های درون‌خطی در یک صفحه، درخواست‌های زیادی را آغاز می‌کنند، می‌توانید با گروه‌بندی آنها، گزارش درخواست‌ها را کاربرپسندتر کنید.

برای گروه‌بندی درخواست‌ها بر اساس iframeها، تنظیمات را باز کنید. داخل پنل Network بروید و تیک گزینه Group by frame را بزنید.

برای مشاهده درخواستی که توسط یک فریم درون‌خطی آغاز شده است، آن را در گزارش درخواست باز کنید.

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

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

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

تجزیه و تحلیل پیام‌های یک اتصال WebSocket

برای مشاهده پیام‌های یک اتصال WebSocket:

1. در زیر ستون نام (Name) از جدول درخواست‌ها (Requests )، روی آدرس اینترنتی (URL) اتصال وب‌سوکت (WebSocket connection) کلیک کنید.
2. روی برگه پیام‌ها کلیک کنید. جدول ۱۰۰ پیام آخر را نشان می‌دهد.

برای به‌روزرسانی جدول، دوباره روی نام اتصال WebSocket در زیر ستون Name از جدول Requests کلیک کنید.

جدول شامل سه ستون است:

• داده . محتوای پیام. اگر پیام متن ساده باشد، در اینجا نمایش داده می‌شود. برای کدهای عملیاتی دودویی، این ستون نام و کد کد عملیاتی را نمایش می‌دهد. کدهای عملیاتی زیر پشتیبانی می‌شوند: فریم ادامه، فریم دودویی، فریم اتصال بسته، فریم پینگ و فریم پنگ.
• طول . طول بار مفید پیام، بر حسب بایت.
• زمان . زمانی که پیام دریافت یا ارسال شده است.

پیام‌ها بر اساس نوعشان رنگ‌بندی شده‌اند:

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

تجزیه و تحلیل رویدادها در یک جریان

برای مشاهده رویدادهایی که سرورها از طریق Fetch API ، EventSource API و XHR پخش می‌کنند:

1. درخواست‌های شبکه را در صفحه‌ای که رویدادها را پخش می‌کند، ضبط کنید .
2. در بخش Network ، یک درخواست را انتخاب کنید و تب EventStream را باز کنید.

برای فیلتر کردن رویدادها، یک عبارت منظم را در نوار فیلتر در بالای برگه EventStream مشخص کنید.

برای پاک کردن لیست رویدادهای ثبت‌شده، روی بلوک Clear کلیک کنید.

پیش‌نمایشی از متن پاسخ را مشاهده کنید

برای مشاهده پیش‌نمایش بدنه پاسخ:

1. روی URL درخواست، زیر ستون نام در جدول درخواست‌ها ، کلیک کنید.
2. روی برگه پیش‌نمایش کلیک کنید.

این برگه بیشتر برای مشاهده تصاویر مفید است.

مشاهده متن پاسخ

برای مشاهده متن پاسخ به یک درخواست:

1. روی URL درخواست، زیر ستون نام در جدول درخواست‌ها، کلیک کنید.
2. روی برگه پاسخ کلیک کنید.

مشاهده هدرهای HTTP

برای مشاهده داده‌های هدر HTTP یک درخواست:

1. روی یک درخواست در جدول درخواست‌ها کلیک کنید.
2. برگه Headers را باز کنید و به پایین بروید تا به بخش‌های General ، Response Headers ، Request Headers و در صورت تمایل، Early Hints Headers برسید .

در بخش عمومی ، DevTools پیام وضعیت خوانا برای انسان را در کنار کد وضعیت HTTP دریافتی به شما نشان می‌دهد.

در بخش Response Headers ، می‌توانید نشانگر ماوس را روی مقدار هدر نگه دارید و روی دکمه ویرایش کلیک کنید تا هدر پاسخ به صورت محلی بازنویسی شود .

مشاهده منبع هدر HTTP

به طور پیش‌فرض، تب Headers نام هدرها را به ترتیب حروف الفبا نشان می‌دهد. برای مشاهده نام هدرهای HTTP به ترتیب دریافت آنها:

1. برای درخواستی که به آن علاقه دارید، برگه Headers را باز کنید. به بخش View HTTP headers مراجعه کنید.
2. روی گزینه‌ی view source ، کنار بخش Request Header یا Response Header کلیک کنید.

هشدار هدرهای موقت

گاهی اوقات تب Headers پیام هشدار Provisional headers are shown... را نشان می‌دهد. این ممکن است به دلایل زیر باشد:

• درخواست از طریق شبکه ارسال نشده است، بلکه از یک حافظه پنهان محلی ارائه شده است که هدرهای درخواست اصلی را ذخیره نمی‌کند. در این حالت، می‌توانید حافظه پنهان را غیرفعال کنید تا هدرهای درخواست کامل را ببینید.

• منبع شبکه معتبر نیست. برای مثال، fetch("https://jec.fish.com/unknown-url/") در کنسول اجرا کنید.

DevTools همچنین به دلایل امنیتی می‌تواند فقط هدرهای موقت را نمایش دهد.

مشاهده بار درخواست

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

مشاهده منبع بار داده

به طور پیش‌فرض، DevTools محتوای مخرب را به شکلی قابل خواندن توسط انسان نشان می‌دهد.

برای مشاهده منابع پارامترهای رشته پرس و جو و داده‌های فرم، در تب Payload ، روی گزینه view source در کنار بخش‌های پارامترهای رشته پرس و جو یا داده‌های فرم کلیک کنید.

مشاهده آرگومان‌های رمزگشایی‌شده توسط URL از پارامترهای رشته پرس‌وجو

برای فعال/غیرفعال کردن رمزگذاری URL برای آرگومان‌ها، در تب Payload ، روی گزینه‌ی view decoded یا view URL-encoded کلیک کنید.

مشاهده کوکی‌ها

برای مشاهده کوکی‌های ارسال شده در هدر HTTP یک درخواست:

1. روی URL درخواست، زیر ستون نام در جدول درخواست‌ها، کلیک کنید.
2. روی برگه کوکی‌ها کلیک کنید.

برای توضیحات هر یک از ستون‌ها، به فیلدها مراجعه کنید.

برای تغییر کوکی‌ها، به مشاهده، ویرایش و حذف کوکی‌ها مراجعه کنید.

مشاهده زمان‌بندی دقیق درخواست

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

1. روی URL درخواست، زیر ستون نام در جدول درخواست‌ها ، کلیک کنید.
2. روی برگه زمان‌بندی کلیک کنید.

برای دسترسی سریع‌تر به این داده‌ها ، پیش‌نمایش تفکیک زمانی را ببینید.

برای اطلاعات بیشتر در مورد هر یک از مراحلی که ممکن است در برگه زمان‌بندی مشاهده کنید، به بخش «توضیح مراحل تجزیه زمان‌بندی» مراجعه کنید.

پیش‌نمایش تفکیک زمانی

برای مشاهده پیش‌نمایشی از تفکیک زمانی یک درخواست، نشانگر ماوس را روی ورودی درخواست در ستون Waterfall از جدول Requests نگه دارید.

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

مراحل تجزیه زمان‌بندی توضیح داده شده است

در اینجا اطلاعات بیشتری در مورد هر یک از مراحلی که ممکن است در برگه زمان‌بندی مشاهده کنید، آمده است:

• صف‌بندی . مرورگر درخواست‌ها را قبل از شروع اتصال و در زمان‌های زیر در صف قرار می‌دهد:
  • درخواست‌های با اولویت بالاتر وجود دارند. اولویت درخواست توسط عواملی مانند نوع منبع و همچنین موقعیت آن در سند تعیین می‌شود. برای اطلاعات بیشتر، بخش اولویت منبع را در راهنمای fetchpriority مطالعه کنید.
  • در حال حاضر شش اتصال TCP برای این مبدا باز است که این محدودیت محسوب می‌شود. (فقط برای HTTP/1.0 و HTTP/1.1 اعمال می‌شود.)
  • مرورگر به طور خلاصه در حال اختصاص فضا در حافظه پنهان دیسک است.
• متوقف شده . درخواست می‌تواند پس از شروع اتصال به هر یک از دلایل شرح داده شده در صف‌بندی، متوقف شود.
• جستجوی DNS . مرورگر در حال یافتن آدرس IP درخواست است.
• اتصال اولیه . مرورگر در حال برقراری اتصال است، از جمله دست‌دهی‌های TCP یا تلاش‌های مجدد و مذاکره در مورد SSL.
• مذاکره پروکسی . مرورگر در حال مذاکره با یک سرور پروکسی برای درخواست است.
• درخواست ارسال شد . درخواست در حال ارسال است.
• آماده‌سازی ServiceWorker . مرورگر در حال راه‌اندازی Service Worker است.
• درخواست به ServiceWorker . درخواست به Service Worker ارسال می‌شود.
• انتظار (TTFB) . مرورگر منتظر اولین بایت پاسخ است. TTFB مخفف عبارت Time To First Byte است. این زمان‌بندی شامل ۱ رفت و برگشت تأخیر و زمانی است که سرور برای آماده‌سازی پاسخ صرف کرده است.
• دانلود محتوا . مرورگر در حال دریافت پاسخ است، چه مستقیماً از شبکه و چه از یک سرویس ورکر. این مقدار، کل زمان صرف شده برای خواندن بدنه پاسخ است. مقادیر بزرگتر از حد انتظار می‌تواند نشان‌دهنده کندی شبکه باشد، یا اینکه مرورگر مشغول انجام کارهای دیگری است که خواندن پاسخ را به تأخیر می‌اندازد.

مشاهده آغازگرها و وابستگی‌ها

برای مشاهده‌ی آغازگرها و وابستگی‌های یک درخواست، کلید Shift را نگه دارید و در جدول درخواست‌ها، ماوس را روی درخواست ببرید. DevTools آغازگرها را سبز و وابستگی‌ها را قرمز نشان می‌دهد.

وقتی جدول درخواست‌ها به ترتیب زمانی مرتب شده باشد، اولین درخواست سبز رنگ بالای درخواستی که نشانگر ماوس روی آن قرار دارد، آغازگر وابستگی است. اگر درخواست سبز رنگ دیگری بالاتر از آن وجود داشته باشد، آن درخواست بالاتر، آغازگرِ آغازگرِ آن درخواست است. و به همین ترتیب ادامه می‌یابد.

مشاهده رویدادهای بارگذاری

DevTools زمان‌بندی رویدادهای DOMContentLoaded و load را در چندین مکان در پنل Network نمایش می‌دهد. رویداد DOMContentLoaded با رنگ آبی و رویداد load با رنگ قرمز نمایش داده می‌شود.

مشاهده تعداد کل درخواست‌ها

تعداد کل درخواست‌ها در نوار وضعیت در پایین پنل شبکه فهرست شده است.

مشاهده حجم کل منابع منتقل شده و بارگذاری شده

DevTools حجم کل منابع منتقل شده و بارگذاری شده (فشرده نشده) را در نوار وضعیت در پایین پنل Network فهرست می‌کند.

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

مشاهده‌ی ردپای پشته‌ای که باعث ایجاد یک درخواست شده است

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

مشاهده حجم فشرده نشده یک منبع

تنظیمات را بررسی کنید > ردیف‌های درخواست بزرگ و سپس به مقدار پایین ستون Size نگاه کنید.

در این مثال، اندازه فشرده‌شده سند www.google.com که از طریق شبکه ارسال شده است، 43.8 KB بوده است، در حالی که اندازه فشرده‌نشده آن 136 KB بوده است.

داده‌های درخواست‌های خروجی

شما می‌توانید لیست درخواست‌ها را با فیلترهای اعمال شده، به روش‌های مختلفی که در ادامه توضیح داده شده است، استخراج یا کپی کنید.

ذخیره تمام درخواست‌های شبکه در یک فایل HAR

HAR (بایگانی HTTP) یک فرمت فایل است که توسط چندین ابزار جلسه HTTP برای خروجی گرفتن داده‌های ضبط شده استفاده می‌شود. این فرمت یک شیء JSON با مجموعه‌ای خاص از فیلدها است.

برای کاهش احتمال نشت تصادفی اطلاعات حساس، به طور پیش‌فرض می‌توانید گزارش شبکه "پاکسازی‌شده" را با فرمت HAR صادر کنید که اطلاعات حساسی مانند هدرهای Cookie ، Set-Cookie و Authorization را حذف می‌کند. در صورت لزوم، می‌توانید گزارش را با داده‌های حساس نیز صادر کنید.

برای ذخیره تمام درخواست‌های شبکه در یک فایل HAR، یکی از دو روش زیر را انتخاب کنید:

• روی هر درخواستی در جدول درخواست‌ها کلیک راست کنید و گزینه کپی > ذخیره همه [لیست شده] به عنوان HAR (پاک‌سازی شده) یا ذخیره همه [لیست شده] به عنوان HAR (با داده‌های حساس) را انتخاب کنید.

  

• روی دانلود Export HAR (sanitized)... در نوار عملیات بالای پنل Network کلیک کنید.

  برای خروجی گرفتن با داده‌های حساس، ابتدا تنظیمات > تنظیمات برگزیده > شبکه > کادر انتخاب «اجازه تولید HAR با داده‌های حساس» را فعال کنید، سپس روی دکمه دانلود «خروجی» کلیک کنید و از منوی کشویی، گزینه «خروجی HAR (با داده‌های حساس)» را انتخاب کنید.

  

وقتی فایل HAR را دارید، می‌توانید آن را برای تجزیه و تحلیل به دو روش دوباره به DevTools وارد کنید:

• فایل HAR را کشیده و در جدول درخواست‌ها رها کنید.
• روی آپلود، وارد کردن HAR در نوار عملیات بالای پنل شبکه کلیک کنید.

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

در زیر ستون نام (Name) از جدول درخواست‌ها (Requests) ، روی یک درخواست کلیک راست کنید، نشانگر ماوس را روی گزینه کپی (Copy ) قرار دهید و یکی از گزینه‌های زیر را انتخاب کنید.

برای کپی کردن یک درخواست، پاسخ آن یا ردیابی پشته:

• کپی کردن آدرس اینترنتی (URL) . آدرس اینترنتی درخواست را در کلیپ‌بورد کپی کنید.
• کپی به عنوان cURL . درخواست را به عنوان یک دستور cURL کپی کنید.
• کپی به عنوان PowerShell . درخواست را به عنوان یک دستور PowerShell کپی کنید.
• کپی به عنوان واکشی . درخواست را به عنوان یک فراخوانی واکشی کپی کنید.
• کپی به عنوان واکشی (Node.js) . درخواست را به عنوان فراخوانی واکشی Node.js کپی کنید.
• کپی کردن پاسخ . متن پاسخ را در کلیپ‌بورد کپی کنید.
• کپی کردن رد پشته . رد پشته درخواست را در کلیپ‌بورد کپی می‌کند.

برای کپی کردن همه درخواست‌ها:

• کپی کردن تمام URLها . کپی کردن URLهای تمام درخواست‌ها در کلیپ‌بورد.
• همه را به عنوان cURL کپی کنید . همه درخواست‌ها را به عنوان زنجیره‌ای از دستورات cURL کپی کنید.
• همه را به عنوان PowerShell کپی کنید . همه درخواست‌ها را به عنوان زنجیره‌ای از دستورات PowerShell کپی کنید.
• کپی کردن همه به عنوان واکشی . تمام درخواست‌ها را به عنوان زنجیره‌ای از فراخوانی‌های واکشی کپی می‌کند.
• همه را به عنوان واکشی (Node.js) کپی کنید . همه درخواست‌ها را به عنوان زنجیره‌ای از فراخوانی‌های واکشی Node.js کپی کنید.
• همه را به صورت HAR (پاکسازی شده) کپی کنید . همه درخواست‌ها را به صورت داده‌های HAR و بدون داده‌های حساس مانند هدرهای Cookie ، Set-Cookie و Authorization کپی کنید.
• همه را به عنوان HAR (با داده‌های حساس) کپی کنید . همه درخواست‌ها را به عنوان داده‌های HAR با داده‌های حساس کپی کنید.

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

• تمام URL های لیست شده را کپی کنید . URL های تمام درخواست های فیلتر شده را در کلیپ بورد کپی کنید.
• تمام لیست‌های cURL را کپی کن . تمام درخواست‌های فیلتر شده را به صورت زنجیره‌ای از دستورات cURL کپی کن.
• تمام موارد ذکر شده به عنوان PowerShell را کپی کنید . تمام درخواست‌های فیلتر شده را به عنوان زنجیره‌ای از دستورات PowerShell کپی کنید.
• تمام موارد ذکر شده به عنوان واکشی را کپی کنید . تمام درخواست‌های فیلتر شده را به عنوان زنجیره‌ای از فراخوانی‌های واکشی کپی کنید.
• تمام موارد ذکر شده به عنوان fetch (Node.js) را کپی کنید . تمام درخواست‌های فیلتر شده را به عنوان زنجیره‌ای از فراخوانی‌های fetch در Node.js کپی کنید.
• تمام موارد ذکر شده به عنوان HAR (پاکسازی شده) را کپی کنید . تمام درخواست‌های فیلتر شده را به عنوان داده‌های HAR بدون داده‌های حساس مانند Cookie ، Set-Cookie و هدرهای Authorization کپی کنید.
• تمام موارد ذکر شده به عنوان HAR (با داده‌های حساس) را کپی کنید . تمام درخواست‌های فیلتر شده را به عنوان داده‌های HAR با داده‌های حساس کپی کنید.

تغییر طرح پنل شبکه

بخش‌هایی از رابط کاربری پنل شبکه را باز یا بسته کنید تا روی آنچه برای شما مهم است تمرکز کنید.

نوار اکشن فیلترها را پنهان کنید

به طور پیش‌فرض، DevTools نوار فیلترها را در بالای پنل Network نشان می‌دهد. برای مخفی کردن آن، روی filter_alt Filter کلیک کنید.

از ردیف‌های درخواست بزرگ استفاده کنید

وقتی می‌خواهید فضای خالی بیشتری در جدول درخواست‌های شبکه خود داشته باشید، از ردیف‌های بزرگ استفاده کنید. برخی ستون‌ها همچنین هنگام استفاده از ردیف‌های بزرگ، اطلاعات کمی بیشتری ارائه می‌دهند. به عنوان مثال، مقدار پایین ستون Size ، اندازه فشرده نشده یک درخواست است و ستون Priority ، اولویت اولیه (مقدار پایین) و نهایی (مقدار بالا) دریافت را نشان می‌دهد.

تنظیمات را باز کنید و برای دیدن ردیف‌های بزرگ، روی «ردیف‌های درخواست بزرگ» کلیک کنید.

مخفی کردن مسیر نمای کلی

به طور پیش‌فرض، DevTools مسیر Overview را نشان می‌دهد. تنظیمات را باز کنید. و برای مخفی کردن آن، تیک گزینه‌ی «نمایش نمای کلی» را بردارید.