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

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

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

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

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

میانای پانل «شبکه» Chrome DevTools.

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

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

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

پاک کردن درخواست‌ها

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

مکان دکمه «پاک کردن» در نوار کنش.

ذخیره کردن درخواست‌ها در بار کردن صفحه‌ها

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

ضبط کردن نماگرفت درحین بار کردن صفحه

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

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

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

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

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

نمونه‌ای که فریم‌های ضبط‌شده بارگیری صفحه را نشان می‌دهد.

ویرایش و ارسال مجدد درخواست

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

  1. روی درخواست کلیک راست کنید و ویرایش و ارسال مجدد به‌عنوان واکشی را انتخاب کنید. ‫DevTools کشوی کنسول را با درخواست تکمیل‌شده به‌عنوان تماس fetch() باز می‌کند و پارامترهای درخواست اصلی و زمینه اجرا را حفظ می‌کند.
  2. درصورت تمایل، fetch() تماس را در Console ویرایش کنید، سپس برای ارسال مجدد درخواست، Enter را فشار دهید.

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

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

با غیرفعال کردن حافظه نهان مرورگر، تجربه بازدیدکننده بار اول را شبیه‌سازی کنید

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

چارگوش انتخاب «غیرفعال کردن حافظه نهان» در نوار تنظیمات.

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

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

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

پاک کردن دستی حافظه نهان مرورگر

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

گزینه منوِ زمینه‌ای برای پاک کردن حافظه نهان مرورگر.

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

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

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

«آفلاین» از منوِ کرکره‌ای انتخاب شده است.

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

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

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

منوِ کرکره‌ای محدود کردن شبکه با پیش‌تنظیم‌ها.

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

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

ایجاد نمایه‌های محدودسازی سفارشی

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

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

    نمایه سفارشی انتخاب‌شده از منوِ محدودسازی. پانل «شبکه» نماد هشداری را نمایش می‌دهد.

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

محدود کردن اتصال‌های WebSocket

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

برای مشاهده محدود کردن WebSocket:

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

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

شبیه‌سازی اتصالات شبکه کُند از کشوی «وضعیت شبکه»

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

  1. روی نماد دکمه «شرایط شبکه» در کشو. کلیک کنید تا کشوی شرایط شبکه باز شود.
  2. سرعت اتصال را از منوِ محدودکردن شبکه انتخاب کنید.

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

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

گزینه منوِ زمینه‌ای برای پاک کردن کوکی‌های مرورگر.

ملغی کردن سرصفحه‌های پاسخ HTTP

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

لغو کردن نماینده کاربر

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

  1. روی نماد دکمه «شرایط شبکه» در کشو. کلیک کنید تا کشوی شرایط شبکه باز شود.
  2. انتخاب خودکار را لغو انتخاب کنید.
  3. یکی از گزینه‌های نماینده کاربر را از منو انتخاب کنید یا گزینه سفارشی را در چارگوش وارد کنید.

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

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

    • در macOS،‏ Command + F.
    • در Windows یا Linux،‏ Control + F.
  2. در برگه جستجو، پُرسمان خود را وارد کنید و کلید Enter را فشار دهید. به‌صورت اختیاری روی یا کلیک کنید تا به‌ترتیب حساسیت به حروف بزرگ و کوچک یا عبارت‌های باقاعده را روشن کنید.

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

برگه «جستجو» در سمت راست پانل «شبکه».

برای بازآوری نتایج جستجو، روی بازآوری کلیک کنید. برای پاک کردن نتایج، روی پاک کردن کلیک کنید.

برای کسب اطلاعات بیشتر درباره همه روش‌هایی که می‌توانید در DevTools جستجو کنید، به جستجو: پیدا کردن نوشتار در همه منابع بارشده مراجعه کنید.

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

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

از چارگوش فیلتر برای فیلتر کردن درخواست‌ها براساس ویژگی‌ها، مانند دامنه یا اندازه درخواست، استفاده کنید یا یک رشته نوشتاری وارد کنید تا با نشانی وب، دامنه، نام میزبان، یا درگاه درخواست (برای مثال، localhost یا example.com)، ازجمله درخواست‌های همان سایت، مطابقت داشته باشد.

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

چارگوش نوشتاری «فیلترها» و چارگوش انتخاب «وارونه کردن».

برای معکوس کردن فیلتر، چارگوش انتخاب معکوس کردن را در کنار چارگوش فیلتر علامت بزنید.

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

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

  • cookie-domain. منابعی را که دامنه کوکی خاصی را تنظیم می‌کنند نشان دهید.
  • cookie-name. منابعی را که نام کوکی خاصی را تنظیم می‌کنند نشان دهید.
  • cookie-path. منابعی را که مسیر کوکی خاصی را تنظیم می‌کنند نشان دهید.
  • cookie-value. منابعی را نشان می‌دهد که مقدار کوکی خاصی را تنظیم می‌کنند.
  • domain. فقط منابع دامنه مشخص‌شده را نمایش دهید. می‌توانید از نویسه عام (*) برای افزودن چندین دامنه استفاده کنید. برای مثال، *.com منابع را از همه نام‌های دامنه که به .com ختم می‌شوند نمایش می‌دهد. ‫DevTools منو کرکره‌ای تکمیل خودکار را با همه دامنه‌هایی که با آن‌ها مواجه شده است پر می‌کند.
  • has-overrides. درخواست‌هایی را که content، headers، هر ملغی‌سازی (yes)، یا هیچ ملغی‌سازی (no) را ملغی کرده‌اند نشان دهید. می‌توانید ستون ملغی‌سازی دارد مربوطه را به جدول درخواست اضافه کنید.
  • has-response-header. منابعی را که حاوی سرایند پاسخ HTTP مشخص‌شده است نشان دهید. DevTools منو کرکره‌ای تکمیل خودکار را با همه سرایندهای پاسخی که با آن‌ها مواجه شده است پر می‌کند.
  • is. از is:running برای پیدا کردن منابع WebSocket استفاده کنید.
  • 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 را در زبانه «مشکلات» نشان دهید. کوکی‌های بدساخت با سرصفحه‌های Set-Cookie نادرست در پانل «شبکه» پرچم‌گذاری خواهند شد.
  • scheme. منابع بازیابی‌شده ازطریق HTTP محافظت‌نشده (scheme:http) یا HTTPS محافظت‌شده (scheme:https) را نشان می‌دهد.
  • set-cookie-domain. منابعی را نشان می‌دهد که سرایند Set-Cookie با مشخصه Domain دارند که با مقدار مشخص‌شده مطابقت دارد. ‫DevTools تکمیل خودکار را با همه دامنه‌های کوکی که با آن‌ها مواجه شده است تکمیل می‌کند.
  • set-cookie-name. منابعی را نشان می‌دهد که سرصفحه Set-Cookie با نامی دارند که با مقدار مشخص‌شده مطابقت دارد. «ابزارهای توسعه‌دهندگان» تکمیل خودکار را با همه نام‌های کوکی که با آن‌ها مواجه شده است پر می‌کند.
  • set-cookie-value. منابعی را نشان بده که سرایند Set-Cookie با مقداری که با مقدار مشخص‌شده مطابقت دارد دارند. «ابزارهای توسعه‌دهندگان» تکمیل خودکار را با همه مقادیر کوکی که با آن‌ها مواجه شده است پر می‌کند.
  • status-code. فقط منابعی را نشان دهید که کد وضعیت HTTP آن‌ها با کد مشخص‌شده مطابقت داشته باشد. DevTools منوِ کرکره‌ای تکمیل خودکار را با همه رمزهای وضعیتی که با آن‌ها مواجه شده است پر می‌کند.
  • ‫url. منابعی را نشان دهید که url آن‌ها با مقدار مشخص‌شده مطابقت دارد.

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

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

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

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

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

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

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

فیلتر کردن هر درخواستی که در حدود ۲۱ تا ۲۵ میلی‌ثانیه فعال نبوده است.

پنهان کردن نشانی‌های وب داده

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

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

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

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

پنهان کردن نشانی‌های وب افزونه

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

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

نشانی‌های وب افزونه از جدول «درخواست‌ها» پنهان شد.

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

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

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

جدول «درخواست‌ها» فقط درخواست‌هایی را نشان می‌دهد که پاسخ کوکی‌ها مسدود شده است.

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

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

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

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

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

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

جدول «درخواست‌ها» فقط درخواست‌های مسدودشده را نشان می‌دهد.

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

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

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

جدول «درخواست‌ها» فقط درخواست‌های طرف سوم را نشان می‌دهد.

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

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

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

مرتب کردن براساس ستون

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

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

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

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

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

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

مرتب‌سازی Waterfall براساس مدت کل.

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

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

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

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

درخواست‌های شبکه ثبت‌شده در جدول «درخواست‌ها» فهرست شده است.

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

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

    مقادیر مختلف در ستون «وضعیت».

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

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

    • تجزیه‌گر. تجزیه‌گر HTML در Chrome.
    • هدایت کردن. هدایت HTTP.
    • متن. تابع جاوا اسکریپت. دراین‌صورت، پانل شبکه پیوندی به خط مربوطه در فایل منبع ارائه می‌دهد.
    • راهنماهای اولیه. پاسخ HTTP 103 Early Hints.
    • موارد دیگر. فرایند یا کنش دیگری، مثل پیمایش به صفحه‌ای بااستفاده از پیوند یا وارد کردن نشانی وب در نوار نشانی.
  • اندازه. اندازه ترکیبی سرایندهای پاسخ به‌علاوه بدنه پاسخ، همان‌طور که توسط سرور ارائه شده است.

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

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

افزودن یا برداشتن ستون‌ها

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

افزودن یا برداشتن ستون به جدول «درخواست‌ها».

می‌توانید ستون‌های تکمیلی زیر را اضافه یا حذف کنید:

  • درخواست شماره . ترتیب مطلق شروع درخواست، که به‌طور پیش‌فرض در جایگاه اول جدول درخواست‌ها سنجاق شده است.
  • مسیر. بخش مسیر نشانی وب.
  • نشانی وب. نشانی وب کامل درخواست.
  • روش. روش HTTP درخواست (برای مثال، GET،‏ POST،‏ PUT،‏ DELETE).
  • پروتکل. پروتکل درخواست (برای مثال، h2 برای HTTP/2،‏ h3 برای HTTP/3، و غیره).
  • طرح. بخش طرح‌واره نشانی وب.
  • دامنه. بخش دامنه نشانی وب.
  • نشانی ازراه‌دور. نشانی IP و درگاه راه دور درخواست.
  • فضای نشانی راه‌دور. فضای نشانی راه‌دور درخواست. Public برای IPهای عمومی، Private برای IPهای خصوصی.
  • فضای نشانی آغازگر. فضای نشانی آغازگر درخواست. مشابه کنترل از دور.
  • کوکی‌ها. تعداد کوکی‌ها در درخواست.
  • تنظیم کوکی‌ها. تعداد کوکی‌ها در پاسخ.
  • اولویت. اولویت درخواست.
  • شناسه اتصال. شناسه اتصال درخواست در جلسه مشتری، درصورت وجود.
  • دارای موارد ملغی‌شده. آیا درخواست دارای ملغی‌سازی است (بله، نه، محتوا، یا سرصفحه‌ها).
  • مرتبط با آگهی است. درست یا نادرست.
  • ازپیش بارگذاری‌شده. اینکه درخواست بااستفاده از پیش‌بار کردن حدسی آغاز شده است یا نه.
  • مسدودسازی پرداز زدن. اینکه درخواست مسدودکننده پرداز، احتمالاً مسدودکننده، یا هیچ‌کدام است.
  • آبشار. تجزیه‌وتحلیل تصویری از فعالیت هر درخواست.

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

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

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

افزودن ستون سفارشی به جدول «درخواست‌ها».

گروه‌بندی درخواست‌ها براساس قاب‌های درون‌خطی

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

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

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

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

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

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

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

ستون «آبشاری» در برگه «درخواست‌ها».

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

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

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

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

برگه «پیام‌ها» از اتصال WebSocket انتخاب‌شده.

این جدول سه ستون دارد:

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

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

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

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

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

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

برگه EventStream از اتصال جاری‌سازی.

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

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

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

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

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

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

برگه «پیش‌نمایش» درخواست انتخاب‌شده.

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

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

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

برگه «پاسخ» درخواست انتخاب‌شده که پاسخ‌های نوشتاری را نشان می‌دهد.

برای پاسخ‌های دودویی یا فشرده، روش رمزگشایی (Base64،‏ Hex، یا UTF-8) را از منوِ کرکره‌ای در پایین برگه پاسخ انتخاب کنید.

مشاهده سرصفحه‌های HTTP

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

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

برگه «سرایندها» در درخواستی که از جدول «درخواست‌ها» انتخاب شده است.

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

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

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

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

  1. برگه سرصفحه‌ها را برای درخواست موردنظرتان باز کنید. مشاهده سرصفحه‌های HTTP را ببینید.
  2. در کنار بخش سرایند درخواست یا سرایند پاسخ، روی مشاهده منبع کلیک کنید.

هشدار سرصفحه‌های موقت

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

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

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

‫DevTools همچنین می‌تواند فقط سرصفحه‌های موقت را به‌دلیل مسائل امنیتی نمایش دهد.

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

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

برگه «بار مفید» درخواست انتخاب‌شده که آرگومان‌ها را نشان می‌دهد.

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

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

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

دکمه‌های مشاهده منبع در کنار بخش‌های بار مفید.

مشاهده پارامترهای فرم و پُرسمان رمزگذاری‌شده با نشانی وب

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

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

مشاهده محموله‌های دودویی و فشرده‌شده

برای محموله‌های درخواست دودویی یا فشرده، روش رمزگشایی (Base64،‏ Hex، یا UTF-8) را از منوِ کرکره‌ای در پایین برگه محموله انتخاب کنید.

مشاهده پایه‌بار دودویی.

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

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

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

برگه «کوکی‌ها» در درخواست انتخاب‌شده که جزئیات «کوکی» را نشان می‌دهد.

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

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

مشاهده جلسه‌های محدود به دستگاه

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

برای مشاهده اطلاعات تعویق (بازآوری):

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

برگه «جلسه‌های محدود به دستگاه».

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

  • Deferred (Refresh)
  • Not deferred (Proactive refresh attempted)
  • Not deferred (Request is in scope of session but proactive refresh is not possible)
  • Not deferred (Request is in scope of session but initiator is not allowed to trigger refresh)
  • Not deferred (Request is in scope of session but cookies are still present)
  • Not deferred (Request is not in scope of session)

مشاهده تفکیک زمانی درخواست

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

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

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

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

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

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

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

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

درحال پیش‌نمایش تفکیک زمان‌بندی درخواست.

توضیح مراحل تفکیک زمان‌بندی

در اینجا اطلاعات بیشتری درباره هریک از فازهایی که ممکن است در برگه زمان‌بندی ببینید ارائه شده است:

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

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

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

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

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

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

«ابزارهای توسعه‌دهندگان» زمان‌بندی رویدادهای DOMContentLoaded و load را در چندین مکان در پانل شبکه نمایش می‌دهد. رویداد DOMContentLoaded به رنگ آبی و رویداد load به رنگ قرمز است.

مکان‌های رویدادهای DOMContentLoaded و بارگیری در پانل «شبکه».

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

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

تعداد کل درخواست‌ها از زمان باز شدن DevTools.

مشاهده اندازه کل منابع منتقل‌شده و بارشده

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

اندازه کل منابع منتقل‌شده و بارشده.

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

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

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

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

مشاهده اندازه فشرده‌نشده منبع

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

نمونه‌ای از منابع فشرده‌نشده.

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

صادر کردن داده‌های درخواست‌ها

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

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

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

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

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

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

    انتخاب «ذخیره همه موارد فهرست‌شده به‌عنوان HAR (پاک‌سازی‌شده)».

  • در نوار کنش در بالای پانل شبکه، روی صادر کردن HAR (پاک‌سازی‌شده)... کلیک کنید.

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

    دکمه «صادر کردن HAR» در نوار اقدام در بالا با دو گزینه صادر کردن فعال شده است.

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

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

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

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

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

  • کپی کردن نشانی وب. نشانی وب درخواست را در بریده‌دان کپی کنید.
  • کپی کردن به‌عنوان cURL. درخواست را به‌عنوان فرمان cURL کپی کنید.
  • کپی کردن به‌عنوان PowerShell. درخواست را به‌عنوان فرمان PowerShell کپی کنید.
  • کپی به‌عنوان واکشی. درخواست را به‌عنوان فراخوانی واکشی کپی کنید.
  • کپی کردن به‌عنوان واکشی (Node.js). درخواست را به‌عنوان فراخوانی واکشی Node.js کپی کنید.
  • کپی به‌عنوان عنصر پیش‌بارگیری. درخواست را به‌عنوان برچسب HTML <link rel="preload"> کپی کنید.
  • کپی کردن پاسخ. بدنه پاسخ را در بریده‌دان کپی کنید.
  • کپی کردن ردیابی پشته‌ای. ردیابی پشته‌ای درخواست را در بریده‌دان کپی کنید.

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

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

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

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

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

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

تغییر چیدمان پانل «شبکه»

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

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

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

دکمه «پنهان کردن فیلترها» در نوار تنظیمات.

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

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

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

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

پنهان کردن قطعه «نمای کلی»

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

چارگوش انتخاب نمای کلی نمایش.