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

سوفیا املیانوا
Sofia Emelianova

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

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

پنل شبکه

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

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

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

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

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

دکمه Clear.

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

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

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

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

برای فعال کردن اسکرین شات ها، تنظیمات را باز کنید تنظیمات. داخل پنل Network و تیک گزینه Capture screenshots را بزنید.

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

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

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

گرفتن اسکرین شات فعال شد.

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

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

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

انتخاب Replay XHR.

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

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

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

چک باکس Disable Cache.

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

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

  1. را کلیک کنید شرایط شبکه برای باز کردن کشوی شرایط شبکه .
  2. چک باکس Disable cache را علامت بزنید یا پاک کنید.

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

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

انتخاب پاک کردن کش مرورگر

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

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

برای شبیه سازی یک تجربه شبکه کاملاً آفلاین، از منوی کشویی Network throttling در کنار چک باکس Disable cache، Offline را انتخاب کنید.

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

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

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

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

منوی کشویی throttling شبکه با از پیش تنظیم.

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

پروفایل های throttling سفارشی ایجاد کنید

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

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

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

DevTools a را نمایش می دهد هشدار. نماد هشدار در کنار پانل شبکه برای یادآوری فعال بودن throttling.

اتصالات WebSocket دریچه گاز

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

برای مشاهده دریچه گاز WebSocket:

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

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

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

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

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

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

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

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

هدرهای پاسخ HTTP را لغو کنید

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

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

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

  1. را کلیک کنید شرایط شبکه برای باز کردن کشوی شرایط شبکه .
  2. انتخاب خودکار را پاک کنید.
  3. یک گزینه user agent را از منو انتخاب کنید یا یک گزینه سفارشی را در کادر وارد کنید.

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

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

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

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

تب Search در سمت راست در پنل Network.

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

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

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

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

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

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

کادر متنی Filters و چک باکس Invert.

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

با جدا کردن هر ویژگی با یک فاصله، می توانید از چندین ویژگی به طور همزمان استفاده کنید. به عنوان مثال، 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 خام را در برگه Issues نشان دهید. کوکی‌های نادرست با هدرهای Set-Cookie نادرست در پانل شبکه پرچم‌گذاری می‌شوند.
  • 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 (هر نوع دیگری که در اینجا فهرست نشده است) در پانل شبکه کلیک کنید.

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

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

استفاده از فیلترهای نوع برای نمایش منابع CSS و Document.

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

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

فیلتر کردن هر درخواستی که فعال نبود در حدود 21-25 میلی ثانیه.

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

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

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

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

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

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

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

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

URL های برنامه افزودنی از جدول درخواست ها پنهان شده اند.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مرتب سازی آبشار بر اساس مدت زمان کل

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

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

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

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

جدول درخواست ها

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

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

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

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

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

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

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

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

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

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

اضافه کردن یا حذف یک ستون به جدول درخواست ها.

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

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

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

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

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

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

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

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

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

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

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

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

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

ستون آبشار در برگه درخواست ها.

پیام های یک اتصال WebSocket را تجزیه و تحلیل کنید

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

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

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

تب پیام ها

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

  • داده ها محموله پیام اگر پیام متنی ساده باشد، در اینجا نمایش داده می شود. برای کدهای باینری، این ستون نام و کد آن کد را نمایش می دهد. اپکدهای زیر پشتیبانی می شوند: Continuation Frame، Binary Frame، Connection Close Frame، Ping Frame و Pong Frame.
  • طول . طول بار پیام، بر حسب بایت.
  • زمان زمان دریافت یا ارسال پیام

پیام ها با توجه به نوع آنها کد رنگی می شوند:

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

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

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

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

تب EventStream.

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

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

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

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

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

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

تب Preview.

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

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

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

تب Response.

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

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

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

برگه سرصفحه یک درخواست انتخاب شده از جدول درخواست ها.

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

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

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

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

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

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

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

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

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

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

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

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

تب Payload.

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

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

برای مشاهده منابع پارامترهای رشته کوئری و داده های فرم، در تب Payload ، روی مشاهده منبع در کنار بخش Query String Parameters یا Form Data کلیک کنید.

دکمه های منبع مشاهده

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

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

کدگذاری URL را تغییر دهید.

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

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

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

برگه کوکی ها.

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

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

بررسی زمان بندی یک درخواست

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

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

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

برگه زمان بندی

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • روی هر درخواستی در جدول درخواست‌ها کلیک راست کنید و Copy > Save all [listed] as HAR (غیرصان‌شده) یا Save all [listed] as HAR (با داده‌های حساس) را انتخاب کنید.

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

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

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

    دکمه "Export HAR" در نوار عمل در بالا با دو گزینه صادرات فعال است.

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

  • فایل HAR را در جدول Requests بکشید و رها کنید.
  • روی وارد کردن HAR در نوار اقدام در بالای پانل شبکه کلیک کنید.

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

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

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

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

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

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

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

نوار عمل فیلترها را مخفی کنید

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

دکمه Hide Filters.

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

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

تنظیمات را باز کنید تنظیمات. و روی Big request rows کلیک کنید تا ردیف های بزرگ را ببینید.

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

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

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

کادر بررسی نمای کلی نمایش.

،

سوفیا املیانوا
Sofia Emelianova

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

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

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

پنل شبکه

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

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

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

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

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

دکمه شفاف

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

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

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

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

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

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

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

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

ضبط تصاویر فعال شده است.

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

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

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

انتخاب Replay XHR.

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

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

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

کادر تأیید حافظه نهان.

حافظه پنهان مرورگر را از کشو شرایط شبکه غیرفعال کنید

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

  1. را کلیک کنید شرایط شبکه نماد برای باز کردن کشو شرایط شبکه .
  2. کادر ذخیره حافظه نهان Disable را بررسی یا پاک کنید.

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

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

انتخاب حافظه نهان مرورگر.

بصورت آفلاین

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

برای شبیه سازی یک تجربه کاملاً آفلاین شبکه ، Offline را از منوی کشویی Network Throttling در کنار کادر Cache Check Cache انتخاب کنید.

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

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

اتصالات شبکه آهسته را تقلید کنید

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

منوی کشویی شبکه با استفاده از پیش تنظیم شده.

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

پروفایل های شیب دار سفارشی ایجاد کنید

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

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

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

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

اتصالات Weblockocket دریچه گاز

علاوه بر درخواست های HTTP ، DevTools Throttles WebSocket Connections از نسخه 99.

برای رعایت شیب وب سایت:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    • در MacOS ، Command + f .
    • در ویندوز یا لینوکس ، کنترل + f .
  2. در برگه جستجو ، پرس و جو خود را وارد کرده و Enter را فشار دهید. برای روشن کردن حساسیت یا عبارات ، به صورت اختیاری کلیک کنید.

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

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

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

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

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

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

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

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

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

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

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

در مرحله بعدی لیست کاملی از خصوصیات پشتیبانی شده قرار دارد.

  • cookie-domain منابعی را نشان دهید که دامنه کوکی خاص را تعیین می کند.
  • cookie-name منابعی را نشان دهید که یک نام کوکی خاص را تعیین می کند.
  • cookie-path منابعی را نشان دهید که یک مسیر کوکی خاص را تعیین می کند.
  • cookie-value منابعی را نشان دهید که یک مقدار کوکی خاص را تعیین می کند.
  • domain . فقط منابع را از دامنه مشخص شده نمایش دهید. برای شامل چندین دامنه می توانید از یک شخصیت Wildcard ( * ) استفاده کنید. به عنوان مثال ، *.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 کشویی خودکار را با تمام انواع میمونی که با آن روبرو شده است جمع می کند.
  • mixed-content تمام منابع محتوای مختلط ( mixed-content:all ) یا فقط مواردی را که نمایش داده می شوند ( mixed-content:displayed ) نشان دهید.
  • priority منابعی را نشان دهید که سطح اولویت آنها با مقدار مشخص شده مطابقت دارد.
  • resource-type . به عنوان مثال ، منابع از یک نوع منبع را نشان دهید. DevTools کشویی خودکار را با تمام انواع منابع مورد نظر خود جمع می کند.
  • response-header-set-cookie . نشان دادن هدرهای Set-Cookie Raw در برگه Issues. کوکی های ناهنجار با هدرهای نادرست Set-Cookie در پنل شبکه پرچم گذاری می شوند.
  • 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) ، مانیفست یا موارد دیگر (هر نوع دیگری که در اینجا ذکر نشده است) روی صفحه شبکه کلیک کنید.

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

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

با استفاده از فیلترهای نوع برای نمایش CSS و منابع اسناد.

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

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

فیلتر کردن هرگونه درخواست که در حدود 21-25 میلی ثانیه فعال نبود.

URL های داده را مخفی کنید

URL های داده پرونده های کوچکی هستند که در سایر اسناد تعبیه شده اند. هر درخواستی که در جدول درخواست هایی که با data: URL داده است.

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

URL های داده پنهان از جدول درخواست ها.

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

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

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

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

URL های پسوند پنهان از جدول درخواست ها.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

درخواست ها

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

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

برای مرتب کردن درخواست ها توسط آن ستون ، روی هدر هر ستون در جدول Areasons کلیک کنید.

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

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

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

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

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

مرتب سازی آبشار در کل مدت زمان.

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

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

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

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

جدول درخواست ها

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

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

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

    • به عنوان مثال ، کد وضعیت HTTP ، 200 یا 404 .
    • CORS error برای درخواست ها به دلیل اشتراک منابع متقاطع (COR) انجام نشد.
    • (blocked:origin) برای درخواست هایی با هدرهای غلط تنظیم شده. برای دیدن یک ابزار ابزار با اشاره به آنچه اشتباه پیش آمده است ، روی این مقدار وضعیت حرکت کنید.
    • (failed) به دنبال پیام خطا.
  • تایپ کنید . نوع تقلید از منبع درخواست شده.

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

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

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

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

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

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

افزودن یا حذف ستون به جدول درخواست ها.

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

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

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

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

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

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

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

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

درخواست شبکه با درخواست های گروه بندی شده توسط Iframes وارد شوید.

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

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

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

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

ستون آبشار برگه درخواست ها.

پیام های اتصال WebSocket را تجزیه و تحلیل کنید

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

  1. در زیر ستون نام جدول درخواست ها ، روی URL اتصال WebSocket کلیک کنید.
  2. روی تب Messages کلیک کنید. جدول 100 پیام آخر را نشان می دهد.

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

برگه پیام ها

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

  • داده ها بار پرداخت پیام اگر پیام ساده است ، در اینجا نمایش داده می شود. برای کد های باینری ، این ستون نام و کد Opcode را نشان می دهد. Opcodes زیر پشتیبانی می شود: قاب ادامه ، قاب باینری ، قاب نزدیک اتصال ، قاب پینگ و قاب PONG.
  • طول . طول بار پیام ، در بایت.
  • زمان زمان دریافت یا ارسال پیام.

پیام ها با توجه به نوع آنها کدگذاری می شوند:

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

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

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

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

برگه EventsTream.

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

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

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

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

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

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

برگه پیش نمایش.

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

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

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

برگه پاسخ

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

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

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

برگه هدر درخواست انتخاب شده از جدول درخواست ها.

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

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

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

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

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

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

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

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

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

Devtools همچنین می تواند به دلایل امنیتی فقط هدرهای موقت را به نمایش بگذارد.

مشاهده درخواست بارگذاری

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

برگه Payload.

مشاهده منبع بارگذاری

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

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

دکمه های منبع مشاهده.

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

برای تغییر رمزگذاری URL برای آرگومان ها ، در برگه Payload ، روی View Decoded یا مشاهده URL رمزگذاری شده کلیک کنید.

رمزگذاری URL.

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

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

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

برگه کوکی ها.

برای توصیف هر یک از ستون ها ، به قسمت ها مراجعه کنید.

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

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

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

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

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

برگه زمان بندی

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

پیش نمایش یک شکست زمان بندی

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

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

پیش نمایش تجزیه و تحلیل زمان درخواست.

مراحل شکست زمان توضیح داده شد

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

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

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

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

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

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

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

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

مکان وقایع DomContentled و بارگذاری شده در صفحه شبکه.

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

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

تعداد کل درخواست ها از زمان افتتاح DevTools.

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

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

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

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

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

هنگامی که یک بیانیه JavaScript باعث درخواست یک منبع می شود ، برای مشاهده ردیابی پشته منتهی به درخواست ، روی ستون آغازگر حرکت می کند.

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

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

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

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

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

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

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

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

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

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

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

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

    انتخاب "ذخیره همه لیست شده به عنوان HAR (ضد عفونی)".

  • Export Har (Sanitized) کلیک کنید ... در نوار اکشن در بالای صفحه شبکه .

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

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

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

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

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

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

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

  • URL را کپی کنید URL درخواست را در کلیپ بورد کپی کنید.
  • کپی به عنوان حلقه . درخواست را به عنوان یک دستور CURL کپی کنید.
  • کپی به عنوان PowerShell . درخواست را به عنوان دستور PowerShell کپی کنید.
  • کپی به عنوان واکشی . درخواست را به عنوان تماس واکشی کپی کنید.
  • کپی به عنوان Fetch (node.js) . درخواست را به عنوان یک تماس Node.js کپی کنید.
  • پاسخ کپی بدنه پاسخ را در کلیپ بورد کپی کنید.
  • ردیابی پشته را کپی کنید . آهنگ پشته درخواست را در کلیپ بورد کپی کنید.

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

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

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

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

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

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

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

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

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

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

دکمه Hide Filters.

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

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

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

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

آهنگ نمای کلی را پنهان کنید

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

کادر نمایش اجمالی نمایش.