در این مرجع جامع از ویژگیهای تحلیل شبکه Chrome DevTools، روشهای جدیدی را برای تحلیل نحوه بارگذاری صفحه خود کشف کنید.
به طور پیشفرض، DevTools تمام درخواستهای شبکه را در پنل Network ثبت میکند، البته تا زمانی که DevTools باز باشد.
برای توقف ضبط درخواستها:
- روی توقف ضبط گزارش شبکه کلیک کنید
در پنل شبکه . این گزینه به رنگ خاکستری در میآید که نشان میدهد DevTools دیگر درخواستها را ضبط نمیکند.
- در حالی که پنل شبکه در حالت فوکوس است، کلیدهای Command > + E (مک) یا Control + E (ویندوز، لینوکس) را فشار دهید.
در پنل شبکه . این گزینه به رنگ خاکستری در میآید که نشان میدهد DevTools دیگر درخواستها را ضبط نمیکند. روی پاک کردن کلیک کنید در پنل شبکه ، تمام درخواستها را از جدول درخواستها پاک کنید.
برای ذخیره درخواستها در طول بارگذاری صفحات، کادر انتخاب Preserve log را در پنل Network علامت بزنید. DevTools تمام درخواستها را ذخیره میکند تا زمانی که Preserve log را غیرفعال کنید.
برای تجزیه و تحلیل آنچه کاربران هنگام انتظار برای بارگذاری صفحه شما میبینند، از صفحه اسکرینشات بگیرید.
برای فعال کردن اسکرینشات، تنظیمات را باز کنید. داخل پنل شبکه بروید و گزینهی «گرفتن اسکرینشات» را تیک بزنید.
برای گرفتن اسکرینشات، در حالی که پنل شبکه در حالت فوکوس است، صفحه را مجدداً بارگذاری کنید.
پس از گرفتن اسکرینشات، میتوانید به روشهای زیر با آن تعامل داشته باشید:
- برای مشاهدهی نقطهای که اسکرینشات گرفته شده است، نشانگر ماوس را روی آن نگه دارید. یک خط زرد در جدول زمانی نمای کلی ظاهر میشود.
- برای فیلتر کردن درخواستهایی که پس از گرفتن اسکرینشات رخ دادهاند، روی تصویر کوچک اسکرینشات کلیک کنید.
- برای بزرگنمایی روی یک تصویر کوچک، روی آن دوبار کلیک کنید.
برای پخش مجدد یک درخواست XHR، یکی از موارد زیر را در جدول درخواستها انجام دهید:
- درخواست را انتخاب کنید و R را فشار دهید.
- روی درخواست کلیک راست کرده و Replay XHR را انتخاب کنید.
برای شبیهسازی تجربه کاربری که برای اولین بار از سایت شما استفاده میکند، گزینه غیرفعال کردن حافظه پنهان (Disable cache) را تیک بزنید. DevTools حافظه پنهان مرورگر را غیرفعال میکند. این کار تجربه کاربری که برای اولین بار از سایت شما استفاده میکند را با دقت بیشتری شبیهسازی میکند، زیرا درخواستها در بازدیدهای مکرر از حافظه پنهان مرورگر ارسال میشوند.
اگر میخواهید هنگام کار در سایر پنلهای DevTools، حافظه پنهان را غیرفعال کنید، از کشوی شرایط شبکه استفاده کنید.
- کلیک کنید
آیکون برای باز کردن کشوی شرایط شبکه .
- کادر غیرفعال کردن حافظه پنهان را علامت بزنید یا علامت آن را بردارید.
آیکون برای باز کردن کشوی شرایط شبکه .برای پاک کردن دستی کش مرورگر در هر زمانی، در هر جایی از جدول درخواستها کلیک راست کرده و گزینه Clear browser cache را انتخاب کنید.
دسته جدیدی از برنامههای وب به نام برنامههای وب پیشرونده وجود دارد که میتوانند با کمک سرویس ورکرها به صورت آفلاین کار کنند. هنگام ساخت این نوع برنامه، مفید است که بتوانید به سرعت دستگاهی را که هیچ اتصال دادهای ندارد، شبیهسازی کنید.
برای شبیهسازی یک تجربه شبکه کاملاً آفلاین، از منوی کشویی Network throttling در کنار کادر غیرفعال کردن حافظه پنهان ، گزینه Offline را انتخاب کنید.
DevTools یک آیکون هشدار در کنار تب Network نمایش میدهد تا به شما یادآوری کند که حالت آفلاین فعال است.
برای شبیهسازی 4G سریع، 4G کند یا 3G، از منوی کشویی Throttling در نوار عملیات بالا، تنظیمات پیشفرض مربوطه را انتخاب کنید.
DevTools یک آیکون در کنار پنل Network نمایش میدهد تا به شما یادآوری کند که throttling فعال است.
علاوه بر تنظیمات پیشفرض، مانند کند یا سریع بودن 4G، میتوانید پروفایلهای تنظیم سرعت دلخواه خود را نیز اضافه کنید:
- منوی Throttling را باز کنید و Custom > Add... را انتخاب کنید.
- همانطور که در توضیح داده شده است، یک پروفایل تنظیم سرعت جدید تنظیم کنید. تنظیمات > تنظیم سرعت .
به پنل Network برگردید، پروفایل جدید خود را از منوی کشویی Throttling انتخاب کنید.
DevTools یک را نمایش میدهد نماد هشدار در کنار پنل شبکه برای یادآوری فعال بودن تنظیم سرعت.
علاوه بر درخواستهای HTTP، DevTools از نسخه ۹۹ به بعد، اتصالات WebSocket را نیز کنترل میکند.
برای مشاهدهی کاهش سرعت WebSocket:
- برای مثال، با استفاده از یک ابزار تست ، یک اتصال جدید را آغاز کنید.
- در پنل شبکه ، گزینه «بدون محدودیت سرعت» را انتخاب کنید و از طریق اتصال، پیامی ارسال کنید.
- یک پروفایل تنظیم سرعت سفارشی بسیار کند، مثلاً
10 kbit/s، ایجاد کنید. چنین پروفایل کندی به شما کمک میکند تا تفاوت را متوجه شوید. - در پنل شبکه ، پروفایل را انتخاب کنید و پیام دیگری ارسال کنید.
- فیلتر WS را فعال یا غیرفعال کنید، روی نام اتصال خود کلیک کنید، تب پیامها را باز کنید و اختلاف زمانی بین پیامهای ارسالی و تکرار شده را با و بدون تنظیم سرعت بررسی کنید. برای مثال:
اگر میخواهید هنگام کار در سایر پنلهای DevTools، اتصال شبکه را محدود کنید، از کشوی شرایط شبکه استفاده کنید.
- کلیک کنید
آیکون برای باز کردن کشوی شرایط شبکه .
- سرعت اتصال را از منوی Network throttling انتخاب کنید.
آیکون برای باز کردن کشوی شرایط شبکه .برای پاک کردن دستی کوکیهای مرورگر در هر زمانی، در هر جایی از جدول درخواستها کلیک راست کرده و گزینه پاک کردن کوکیهای مرورگر را انتخاب کنید.
به نادیده گرفتن فایلها و هدرهای پاسخ HTTP به صورت محلی مراجعه کنید.
برای لغو دستی عامل کاربر:
- کلیک کنید
آیکون برای باز کردن کشوی شرایط شبکه .
- پاک کردن انتخاب به صورت خودکار .
- یک گزینهی عامل کاربر از منو انتخاب کنید، یا یک مورد دلخواه را در کادر وارد کنید.
آیکون برای باز کردن کشوی شرایط شبکه .برای جستجو در هدرهای درخواست، پیلودها و پاسخها:
برای باز کردن برگه جستجو در سمت راست، میانبر زیر را فشار دهید:
- در macOS، کلیدهای Command + F.
- در ویندوز یا لینوکس، کنترل + F.
در برگه جستجو ، عبارت مورد نظر خود را وارد کرده و Enter را بزنید. در صورت تمایل، برای فعال کردن حساسیت به حروف کوچک و بزرگ یا عبارات منظم، روی یا کلیک کنید.
روی یکی از نتایج جستجو کلیک کنید. پنل Network درخواستی که مطابقت داشته باشد را با رنگ زرد برجسته میکند. علاوه بر این، این پنل همچنین تب Headers یا Response را باز میکند و در صورت وجود، رشتهای را که با آن مطابقت داشته باشد، برجسته میکند.
برای بهروزرسانی نتایج جستجو، روی » کلیک کنید. برای پاک کردن نتایج، روی «پاک کردن کلیک کنید.
برای اطلاعات بیشتر در مورد تمام روشهای جستجو در DevTools، به «جستجو: یافتن متن در تمام منابع بارگذاری شده» مراجعه کنید.
از کادر فیلتر برای فیلتر کردن درخواستها بر اساس ویژگیها، مانند دامنه یا اندازه درخواست، استفاده کنید.
اگر نمیتوانید کادر را ببینید، احتمالاً نوار فیلترها پنهان است. به بخش «پنهان کردن نوار فیلترها» مراجعه کنید.
برای معکوس کردن فیلتر، کادر انتخاب Invert کنار کادر Filter را علامت بزنید.
شما میتوانید با جدا کردن هر ویژگی با یک فاصله، از چندین ویژگی به طور همزمان استفاده کنید. برای مثال، mime-type:image/gif larger-than:1K تمام GIFهایی را که بزرگتر از یک کیلوبایت هستند نمایش میدهد. این فیلترهای چند ویژگی معادل عملیات AND هستند. عملیات OR پشتیبانی نمیشوند.
در ادامه لیست کاملی از ویژگیهای پشتیبانیشده آمده است.
-
cookie-domain. منابعی را که یک دامنه کوکی خاص را تنظیم میکنند، نمایش دهید. -
cookie-name. منابعی را که نام کوکی خاصی را تعیین میکنند، نمایش میدهد. -
cookie-path. منابعی را که مسیر کوکی خاصی را تعیین میکنند، نمایش میدهد. -
cookie-value. منابعی را که مقدار کوکی خاصی را تعیین میکنند، نمایش میدهد. -
domain. فقط منابع را از دامنه مشخص شده نمایش دهید. میتوانید از کاراکتر wildcard (*) برای گنجاندن چندین دامنه استفاده کنید. برای مثال،*.comمنابع را از تمام نامهای دامنهای که به.comختم میشوند نمایش میدهد. DevTools منوی کشویی تکمیل خودکار را با تمام دامنههایی که با آنها مواجه شده است، پر میکند. -
has-overrides. درخواستهایی را نشان میدهد کهcontent،headers، هرگونه override (yes) یا هیچ override (no) لغو شدهاند. میتوانید ستون مربوطه Has overrides را به جدول درخواست اضافه کنید. -
has-response-header. منابعی را که حاوی هدر پاسخ HTTP مشخص شده هستند نمایش میدهد. DevTools منوی کشویی تکمیل خودکار را با تمام هدرهای پاسخی که با آنها مواجه شده است، پر میکند. - برای یافتن منابع
WebSocketازisis:runningاستفاده کنید. -
larger-than. منابعی را که بزرگتر از اندازه مشخص شده هستند، بر حسب بایت نمایش میدهد. تنظیم مقدار1000معادل تنظیم مقدار1kاست. -
method. منابعی را که از طریق یک نوع متد HTTP مشخص بازیابی شدهاند، نمایش میدهد. DevTools منوی کشویی تکمیل خودکار را با تمام متدهای HTTP که با آنها مواجه شده است، پر میکند. -
mime-type. منابع یک نوع MIME مشخص شده را نمایش میدهد. DevTools منوی کشویی تکمیل خودکار را با تمام انواع MIME که با آنها مواجه شده است، پر میکند. -
mixed-content. نمایش همه منابع محتوای ترکیبی (mixed-content:all) یا فقط آنهایی که نمایش داده میشوند (mixed-content:displayed). -
priority. منابعی را نشان دهید که سطح اولویت آنها با مقدار مشخص شده مطابقت دارد. -
resource-type. منابعی از یک نوع منبع، مثلاً تصویر، را نمایش میدهد. DevTools منوی کشویی تکمیل خودکار را با تمام انواع منابعی که با آنها مواجه شده است، پر میکند. -
response-header-set-cookie. هدرهای خام Set-Cookie را در برگه Issues نمایش دهید. کوکیهای ناقص با هدرهایSet-Cookieنادرست در پنل Network علامتگذاری میشوند. -
scheme. منابع بازیابی شده از طریق HTTP محافظت نشده (scheme:http) یا HTTPS محافظت شده (scheme:https) را نشان دهید. -
set-cookie-domain. منابعی را نشان میدهد که دارای سرآیندSet-Cookieبا ویژگیDomainهستند که با مقدار مشخص شده مطابقت دارد. DevTools فرم تکمیل خودکار را با تمام دامنههای کوکی که با آنها مواجه شده است، پر میکند. -
set-cookie-name. منابعی را نشان میدهد که سرآیندSet-Cookieبا نامی مطابق با مقدار مشخص شده مطابقت دارد. DevTools فرم تکمیل خودکار را با تمام نامهای کوکی که با آنها مواجه شده است، پر میکند. -
set-cookie-value. منابعی را نشان میدهد که دارای سرصفحهSet-Cookieبا مقداری هستند که با مقدار مشخص شده مطابقت دارد. DevTools فرم تکمیل خودکار را با تمام مقادیر کوکی که با آنها مواجه شده است، پر میکند. -
status-code. فقط منابعی را نشان میدهد که کد وضعیت HTTP آنها با کد مشخص شده مطابقت دارد. DevTools منوی کشویی تکمیل خودکار را با تمام کدهای وضعیتی که با آنها مواجه شده است، پر میکند. -
url. منابعی را نشان میدهد کهurlآنها با مقدار مشخص شده مطابقت دارد.
برای فیلتر کردن درخواستها بر اساس نوع منبع، روی دکمههای All ، Fetch/XHR ، JS ، CSS ، Img ، Media ، Font ، Doc ، WS (WebSocket)، Wasm (WebAssembly)، Manifest یا Other (هر نوع دیگری که در اینجا ذکر نشده است) در پنل Network کلیک کنید.
اگر نمیتوانید این دکمهها را ببینید، احتمالاً نوار عملیات فیلترها پنهان است. به بخش «پنهان کردن نوار فیلترها» مراجعه کنید.
برای نمایش همزمان منابع از چندین نوع، دکمه Command (مک) یا Control (ویندوز، لینوکس) را نگه دارید و سپس روی چندین فیلتر نوع کلیک کنید.
برای نمایش فقط درخواستهایی که در آن بازه زمانی فعال بودهاند، روی خط زمانی «نمای کلی» به چپ یا راست بکشید. این فیلتر شامل همه درخواستها میشود. هر درخواستی که در طول زمان مشخصشده فعال بوده است، نمایش داده میشود.
URL های داده، فایلهای کوچکی هستند که در اسناد دیگر جاسازی شدهاند. هر درخواستی که در جدول درخواستها مشاهده میکنید و با data: شروع میشود، یک URL داده است.
برای پنهان کردن این درخواستها، در نوار عملیات فیلترها ، فیلترهای بیشتر > مخفی کردن URLهای داده را انتخاب کنید.
نوار وضعیت در پایین، تعداد درخواستهای نمایش داده شده از کل درخواستها را نمایش میدهد.
برای تمرکز روی کدی که مینویسید، میتوانید درخواستهای نامربوطی که توسط افزونههایی که ممکن است در کروم نصب کرده باشید ارسال میشوند را فیلتر کنید. درخواستهای افزونه دارای URLهایی هستند که با chrome-extension:// شروع میشوند.
برای پنهان کردن درخواستهای افزونه، در نوار عملیات فیلترها ، فیلترهای بیشتر > پنهان کردن نشانیهای اینترنتی افزونه را انتخاب کنید.
نوار وضعیت در پایین، تعداد درخواستهای نمایش داده شده از کل درخواستها را نمایش میدهد.
برای فیلتر کردن همه چیز به جز درخواستهایی که کوکیهای پاسخ آنها به هر دلیلی مسدود شده است، در نوار ابزار فیلترها ، فیلترهای بیشتر > کوکیهای پاسخ مسدود شده را انتخاب کنید.
نوار وضعیت در پایین، تعداد درخواستهای نمایش داده شده از کل درخواستها را نمایش میدهد.
برای فهمیدن دلیل مسدود شدن کوکی پاسخ، درخواست را انتخاب کنید، برگه کوکیهای آن را باز کنید و نشانگر ماوس را روی نماد قرار دهید.
علاوه بر این، پنل شبکه یک نماد در کنار درخواستی با کوکیهای مسدود شده، چه به دلیل پرچمهای کروم و چه به دلیل پیکربندی، نشان میدهد. برای دیدن یک راهنمای ابزار با یک سرنخ، روی نماد کلیک کنید و برای اطلاعات بیشتر به پنل مشکلات بروید.
برای فیلتر کردن همه موارد به جز درخواستهای مسدود شده، در نوار ابزار فیلترها ، فیلترهای بیشتر > درخواستهای مسدود شده را انتخاب کنید. برای آزمایش این مورد، میتوانید از برگه مسدود کردن درخواست شبکه در کشو استفاده کنید.
جدول درخواستها، درخواستهای مسدود شده را با رنگ قرمز مشخص میکند. نوار وضعیت در پایین، تعداد درخواستهای نمایش داده شده از کل درخواستها را نشان میدهد.
برای فیلتر کردن همه چیز به جز درخواستهایی که مبدا آنها با مبدا صفحه متفاوت است، در نوار ابزار فیلترها ، فیلترهای بیشتر > درخواستهای شخص ثالث را انتخاب کنید.
نوار وضعیت در پایین، تعداد درخواستهای نمایش داده شده از کل درخواستها را نمایش میدهد.
به طور پیشفرض، درخواستهای موجود در جدول Requests بر اساس زمان شروع مرتب شدهاند، اما میتوانید جدول را با استفاده از معیارهای دیگر مرتب کنید.
برای مرتبسازی درخواستها بر اساس آن ستون، روی سربرگ هر ستون در جدول درخواستها کلیک کنید.
برای تغییر نحوه مرتبسازی درخواستها در Waterfall ، روی هدر جدول Requests کلیک راست کنید، موس را روی Waterfall ببرید و یکی از گزینههای زیر را انتخاب کنید:
- زمان شروع . اولین درخواستی که آغاز شده است در بالا قرار دارد.
- زمان پاسخ . اولین درخواستی که دانلود آن شروع شده در بالا قرار دارد.
- زمان پایان . اولین درخواستی که پایان یافته است در بالا قرار دارد.
- مدت زمان کل . درخواستی که کوتاهترین زمان راهاندازی اتصال و درخواست/پاسخ را دارد، در بالا قرار دارد.
- تأخیر . درخواستی که کمترین زمان را برای پاسخ منتظر مانده است، در بالا قرار دارد.
این توضیحات فرض میکنند که هر گزینه مربوطه از کوتاهترین به طولانیترین رتبهبندی شده است. کلیک روی سرستون آبشاری ، ترتیب را برعکس میکند.
در این مثال، نمودار آبشاری بر اساس کل مدت زمان مرتب شده است. قسمت روشنتر هر نوار، زمان صرف شده برای انتظار و قسمت تیرهتر، زمان صرف شده برای دانلود بایتها را نشان میدهد.
تا زمانی که DevTools باز باشد، تمام درخواستها را در پنل Network ثبت میکند. از پنل Network برای تجزیه و تحلیل درخواستها استفاده کنید.
از جدول درخواستها (Requests) برای مشاهدهی گزارش تمام درخواستهای انجامشده در زمان باز بودن DevTools استفاده کنید. کلیک کردن یا نگه داشتن ماوس روی درخواستها، اطلاعات بیشتری در مورد آنها نشان میدهد.
جدول درخواستها (Requests) به طور پیشفرض ستونهای زیر را نمایش میدهد:
- نام . نام فایل یا شناسهای برای منبع.
وضعیت . این ستون میتواند مقادیر زیر را نشان دهد:
- کد وضعیت HTTP، برای مثال،
200یا404. -
CORS errorبرای درخواستهای ناموفق به دلیل اشتراکگذاری منابع بین مبدا (CORS). -
(blocked:origin)برای درخواستهایی با هدرهای پیکربندی نادرست. برای مشاهدهی یک راهنما (tooltip) حاوی نکتهای در مورد مشکل پیش آمده، نشانگر ماوس را روی این مقدار وضعیت نگه دارید. -
(failed)و به دنبال آن پیام خطا.
- کد وضعیت HTTP، برای مثال،
نوع . نوع MIME منبع درخواستی.
آغازگر (Initiator ): اشیاء یا فرآیندهای زیر میتوانند درخواستها را آغاز کنند:
- تجزیهکننده . تجزیهکننده HTML کروم.
- تغییر مسیر . یک تغییر مسیر HTTP.
- اسکریپت . یک تابع جاوا اسکریپت.
- سایر . برخی فرآیندها یا اقدامات دیگر، مانند پیمایش به یک صفحه با استفاده از یک لینک یا وارد کردن یک URL در نوار آدرس.
اندازه : اندازه ترکیبی هدرهای پاسخ به علاوه بدنه پاسخ، همانطور که توسط سرور ارائه میشود.
زمان . کل مدت زمان، از شروع درخواست تا دریافت آخرین بایت در پاسخ.
آبشاری . تفکیک بصری از فعالیت هر درخواست.
روی سربرگ جدول درخواستها کلیک راست کنید و گزینهای را برای پنهان کردن یا نمایش آن انتخاب کنید. گزینههای نمایش داده شده دارای علامت تیک در کنار خود هستند.
شما میتوانید ستونهای اضافی زیر را اضافه یا حذف کنید: مسیر ، URL ، روش ، پروتکل ، طرح ، دامنه ، آدرس راه دور ، فضای آدرس راه دور ، فضای آدرس آغازگر ، کوکیها ، تنظیم کوکیها ، اولویت ، شناسه اتصال ، لغوها و آبشار .
برای اضافه کردن یک ستون سفارشی به جدول درخواستها :
- روی سربرگ جدول درخواستها کلیک راست کرده و گزینه Response Headers > Manage Header Columns را انتخاب کنید.
- در پنجرهی محاورهای، روی «افزودن سربرگ سفارشی» کلیک کنید، نام آن را وارد کنید و روی «افزودن» کلیک کنید.
اگر فریمهای درونخطی در یک صفحه، درخواستهای زیادی را آغاز میکنند، میتوانید با گروهبندی آنها، گزارش درخواستها را کاربرپسندتر کنید.
برای گروهبندی درخواستها بر اساس iframeها، تنظیمات را باز کنید. داخل پنل Network بروید و تیک Group by frame را بزنید.
برای مشاهده درخواستی که توسط یک فریم درونخطی آغاز شده است، آن را در گزارش درخواست باز کنید.
از نمودار آبشاری برای مشاهده زمانبندی درخواستها نسبت به یکدیگر استفاده کنید. به طور پیشفرض، نمودار آبشاری بر اساس زمان شروع درخواستها سازماندهی میشود. بنابراین، درخواستهایی که در سمت چپ قرار دارند، زودتر از درخواستهایی که در سمت راست قرار دارند، شروع شدهاند.
برای مشاهده روشهای مختلف مرتبسازی آبشاری، به بخش مرتبسازی بر اساس مرحله فعالیت مراجعه کنید.
برای مشاهده پیامهای یک اتصال WebSocket:
- در زیر ستون نام (Name) از جدول درخواستها (Requests )، روی آدرس اینترنتی (URL) اتصال وبسوکت (WebSocket connection) کلیک کنید.
- روی برگه پیامها کلیک کنید. جدول ۱۰۰ پیام آخر را نشان میدهد.
برای بهروزرسانی جدول، دوباره روی نام اتصال WebSocket در زیر ستون Name از جدول Requests کلیک کنید.
جدول شامل سه ستون است:
- داده . محتوای پیام. اگر پیام متن ساده باشد، در اینجا نمایش داده میشود. برای کدهای عملیاتی دودویی، این ستون نام و کد کد عملیاتی را نمایش میدهد. کدهای عملیاتی زیر پشتیبانی میشوند: فریم ادامه، فریم دودویی، فریم اتصال بسته، فریم پینگ و فریم پنگ.
- طول . طول بار مفید پیام، بر حسب بایت.
- زمان . زمانی که پیام دریافت یا ارسال شده است.
پیامها بر اساس نوعشان رنگبندی شدهاند:
- پیامکهای خروجی سبز روشن هستند.
- پیامکهای دریافتی سفید هستند.
- کدهای عملیاتی WebSocket به رنگ زرد روشن هستند.
- خطاها با رنگ قرمز روشن مشخص شدهاند.
برای مشاهده رویدادهایی که سرورها از طریق Fetch API ، EventSource API و XHR پخش میکنند:
- درخواستهای شبکه را در صفحهای که رویدادها را پخش میکند، ضبط کنید .
- در بخش Network ، یک درخواست را انتخاب کنید و تب EventStream را باز کنید.
برای فیلتر کردن رویدادها، یک عبارت منظم را در نوار فیلتر در بالای برگه EventStream مشخص کنید.
برای پاک کردن لیست رویدادهای ثبتشده، Clear کلیک کنید.
برای مشاهده پیشنمایش بدنه پاسخ:
- روی URL درخواست، زیر ستون نام در جدول درخواستها ، کلیک کنید.
- روی برگه پیشنمایش کلیک کنید.
این برگه بیشتر برای مشاهده تصاویر مفید است.
برای مشاهده متن پاسخ به یک درخواست:
- روی URL درخواست، زیر ستون نام در جدول درخواستها، کلیک کنید.
- روی برگه پاسخ کلیک کنید.
برای مشاهده دادههای هدر HTTP یک درخواست:
- روی یک درخواست در جدول درخواستها کلیک کنید.
- برگه Headers را باز کنید و به پایین بروید تا به بخشهای General ، Response Headers ، Request Headers و در صورت تمایل، Early Hints Headers برسید .
در بخش عمومی ، DevTools پیام وضعیت خوانا برای انسان را در کنار کد وضعیت HTTP دریافتی به شما نشان میدهد.
در بخش Response Headers ، میتوانید نشانگر ماوس را روی مقدار هدر نگه دارید و روی دکمه ویرایش کنید تا هدر پاسخ به صورت محلی بازنویسی شود .
به طور پیشفرض، تب Headers نام هدرها را به ترتیب حروف الفبا نشان میدهد. برای مشاهده نام هدرهای HTTP به ترتیب دریافت آنها:
- برای درخواستی که به آن علاقه دارید، برگه Headers را باز کنید. به بخش View HTTP headers مراجعه کنید.
- روی گزینهی view source ، کنار بخش Request Header یا Response Header کلیک کنید.
گاهی اوقات تب Headers پیام هشدار Provisional headers are shown... را نشان میدهد. این ممکن است به دلایل زیر باشد:
درخواست از طریق شبکه ارسال نشده است، بلکه از یک حافظه پنهان محلی ارائه شده است که هدرهای درخواست اصلی را ذخیره نمیکند. در این حالت، میتوانید حافظه پنهان را غیرفعال کنید تا هدرهای درخواست کامل را ببینید.
منبع شبکه معتبر نیست. برای مثال،
fetch("https://jec.fish.com/unknown-url/")در کنسول اجرا کنید.
DevTools همچنین به دلایل امنیتی میتواند فقط هدرهای موقت را نمایش دهد.
برای مشاهدهی بار مفید درخواست، یعنی پارامترهای رشتهی پرسوجو و دادههای فرم آن، یک درخواست را از جدول درخواستها انتخاب کرده و تب بار مفید را باز کنید.
به طور پیشفرض، DevTools محتوای مخرب را به شکلی قابل خواندن توسط انسان نشان میدهد.
برای مشاهده منابع پارامترهای رشته پرس و جو و دادههای فرم، در تب Payload ، روی گزینه view source در کنار بخشهای پارامترهای رشته پرس و جو یا دادههای فرم کلیک کنید.
برای فعال/غیرفعال کردن رمزگذاری URL برای آرگومانها، در تب Payload ، روی گزینهی view decoded یا view URL-encoded کلیک کنید.
برای مشاهده کوکیهای ارسال شده در هدر HTTP یک درخواست:
- روی URL درخواست، زیر ستون نام در جدول درخواستها، کلیک کنید.
- روی برگه کوکیها کلیک کنید.
برای توضیحات هر یک از ستونها، به فیلدها مراجعه کنید.
برای تغییر کوکیها، به مشاهده، ویرایش و حذف کوکیها مراجعه کنید.
برای مشاهدهی جزئیات زمانی یک درخواست:
- روی URL درخواست، زیر ستون نام در جدول درخواستها ، کلیک کنید.
- روی برگه زمانبندی کلیک کنید.
برای دسترسی سریعتر به این دادهها ، پیشنمایش تفکیک زمانی را ببینید.
برای اطلاعات بیشتر در مورد هر یک از مراحلی که ممکن است در برگه زمانبندی مشاهده کنید، به بخش «توضیح مراحل تجزیه زمانبندی» مراجعه کنید.
برای مشاهده پیشنمایشی از تفکیک زمانی یک درخواست، نشانگر ماوس را روی ورودی درخواست در ستون Waterfall از جدول Requests نگه دارید.
برای مشاهدهی زمانبندی دقیق درخواست، به روشی برای دسترسی به این دادهها که نیازی به نگه داشتن ماوس روی آن ندارد، مراجعه کنید.
در اینجا اطلاعات بیشتری در مورد هر یک از مراحلی که ممکن است در برگه زمانبندی مشاهده کنید، آمده است:
- صفبندی . مرورگر درخواستها را قبل از شروع اتصال و در زمانهای زیر در صف قرار میدهد:
- درخواستهای با اولویت بالاتر وجود دارند. اولویت درخواست توسط عواملی مانند نوع منبع و همچنین موقعیت آن در سند تعیین میشود. برای اطلاعات بیشتر، بخش اولویت منبع را در راهنمای
fetchpriorityمطالعه کنید. - در حال حاضر شش اتصال TCP برای این مبدا باز است که این محدودیت محسوب میشود. (فقط برای HTTP/1.0 و HTTP/1.1 اعمال میشود.)
- مرورگر به طور خلاصه در حال اختصاص فضا در حافظه پنهان دیسک است.
- درخواستهای با اولویت بالاتر وجود دارند. اولویت درخواست توسط عواملی مانند نوع منبع و همچنین موقعیت آن در سند تعیین میشود. برای اطلاعات بیشتر، بخش اولویت منبع را در راهنمای
- متوقف شده . درخواست میتواند پس از شروع اتصال به هر یک از دلایل شرح داده شده در صفبندی، متوقف شود.
- جستجوی DNS . مرورگر در حال یافتن آدرس IP درخواست است.
- اتصال اولیه . مرورگر در حال برقراری اتصال است، از جمله دستدهیهای TCP یا تلاشهای مجدد و مذاکره در مورد SSL.
- مذاکره پروکسی . مرورگر در حال مذاکره با یک سرور پروکسی برای درخواست است.
- درخواست ارسال شد . درخواست در حال ارسال است.
- آمادهسازی ServiceWorker . مرورگر در حال راهاندازی Service Worker است.
- درخواست به ServiceWorker . درخواست به Service Worker ارسال میشود.
- انتظار (TTFB) . مرورگر منتظر اولین بایت پاسخ است. TTFB مخفف عبارت Time To First Byte است. این زمانبندی شامل ۱ رفت و برگشت تأخیر و زمانی است که سرور برای آمادهسازی پاسخ صرف کرده است.
- دانلود محتوا . مرورگر در حال دریافت پاسخ است، چه مستقیماً از شبکه و چه از یک سرویس ورکر. این مقدار، کل زمان صرف شده برای خواندن بدنه پاسخ است. مقادیر بزرگتر از حد انتظار میتواند نشاندهنده کندی شبکه باشد، یا اینکه مرورگر مشغول انجام کارهای دیگری است که خواندن پاسخ را به تأخیر میاندازد.
برای مشاهدهی آغازگرها و وابستگیهای یک درخواست، کلید Shift را نگه دارید و در جدول درخواستها، ماوس را روی درخواست ببرید. DevTools آغازگرها را سبز و وابستگیها را قرمز نشان میدهد.
وقتی جدول درخواستها به ترتیب زمانی مرتب شده باشد، اولین درخواست سبز رنگ بالای درخواستی که نشانگر ماوس روی آن قرار دارد، آغازگر وابستگی است. اگر درخواست سبز رنگ دیگری بالاتر از آن وجود داشته باشد، آن درخواست بالاتر، آغازگرِ آغازگرِ آن درخواست است. و به همین ترتیب ادامه مییابد.
DevTools زمانبندی رویدادهای DOMContentLoaded و load را در چندین مکان در پنل Network نمایش میدهد. رویداد DOMContentLoaded با رنگ آبی و رویداد load با رنگ قرمز نمایش داده میشود.
تعداد کل درخواستها در نوار وضعیت در پایین پنل شبکه فهرست شده است.
DevTools حجم کل منابع منتقل شده و بارگذاری شده (فشرده نشده) را در نوار وضعیت در پایین پنل Network فهرست میکند.
برای مشاهدهی حجم منابع پس از خارج کردن آنها از حالت فشرده توسط مرورگر، به بخش «مشاهدهی حجم فشردهنشدهی یک منبع» مراجعه کنید.
وقتی یک دستور جاوا اسکریپت باعث درخواست منبعی میشود، نشانگر ماوس را روی ستون Initiator نگه دارید تا ردپای پشته منتهی به درخواست را مشاهده کنید.
تنظیمات را بررسی کنید > ردیفهای درخواست بزرگ و سپس به مقدار پایین ستون Size نگاه کنید.
در این مثال، اندازه فشردهشده سند www.google.com که از طریق شبکه ارسال شده است، 43.8 KB بوده است، در حالی که اندازه فشردهنشده آن 136 KB بوده است.
شما میتوانید لیست درخواستها را با فیلترهای اعمال شده، به روشهای مختلفی که در ادامه توضیح داده شده است، استخراج یا کپی کنید.
HAR (بایگانی HTTP) یک فرمت فایل است که توسط چندین ابزار جلسه HTTP برای خروجی گرفتن دادههای ضبط شده استفاده میشود. این فرمت یک شیء JSON با مجموعهای خاص از فیلدها است.
برای کاهش احتمال نشت تصادفی اطلاعات حساس، به طور پیشفرض میتوانید گزارش شبکه "پاکسازیشده" را با فرمت HAR صادر کنید که اطلاعات حساسی مانند هدرهای Cookie ، Set-Cookie و Authorization را حذف میکند. در صورت لزوم، میتوانید گزارش را با دادههای حساس نیز صادر کنید.
برای ذخیره تمام درخواستهای شبکه در یک فایل HAR، یکی از دو روش زیر را انتخاب کنید:
روی هر درخواستی در جدول درخواستها کلیک راست کنید و گزینه کپی > ذخیره همه [لیست شده] به عنوان HAR (پاکسازی شده) یا ذخیره همه [لیست شده] به عنوان HAR (با دادههای حساس) را انتخاب کنید.
Export HAR (sanitized)... در نوار عملیات بالای پنل Network کلیک کنید.
برای خروجی گرفتن با دادههای حساس، ابتدا > تنظیمات برگزیده > شبکه > «اجازه تولید HAR با دادههای حساس» را فعال کنید، سپس روی دکمه «خروجی» کلیک کنید و از منوی کشویی، گزینه «خروجی HAR (با دادههای حساس)» را انتخاب کنید.
وقتی فایل HAR را دارید، میتوانید آن را برای تجزیه و تحلیل به دو روش دوباره به DevTools وارد کنید:
- فایل HAR را کشیده و در جدول درخواستها رها کنید.
- وارد کردن HAR در نوار عملیات بالای پنل شبکه کلیک کنید.
در زیر ستون نام (Name) از جدول درخواستها (Requests) ، روی یک درخواست کلیک راست کنید، نشانگر ماوس را روی گزینه کپی (Copy ) قرار دهید و یکی از گزینههای زیر را انتخاب کنید.
برای کپی کردن یک درخواست، پاسخ آن یا ردیابی پشته:
- کپی کردن آدرس اینترنتی (URL) . آدرس اینترنتی درخواست را در کلیپبورد کپی کنید.
- کپی به عنوان cURL . درخواست را به عنوان یک دستور cURL کپی کنید.
- کپی به عنوان PowerShell . درخواست را به عنوان یک دستور PowerShell کپی کنید.
- کپی به عنوان واکشی . درخواست را به عنوان یک فراخوانی واکشی کپی کنید.
- کپی به عنوان واکشی (Node.js) . درخواست را به عنوان فراخوانی واکشی Node.js کپی کنید.
- کپی کردن پاسخ . متن پاسخ را در کلیپبورد کپی کنید.
- کپی کردن رد پشته . رد پشته درخواست را در کلیپبورد کپی میکند.
برای کپی کردن همه درخواستها:
- کپی کردن تمام URLها . کپی کردن URLهای تمام درخواستها در کلیپبورد.
- همه را به عنوان cURL کپی کنید . همه درخواستها را به عنوان زنجیرهای از دستورات cURL کپی کنید.
- همه را به عنوان PowerShell کپی کنید . همه درخواستها را به عنوان زنجیرهای از دستورات PowerShell کپی کنید.
- کپی کردن همه به عنوان واکشی . تمام درخواستها را به عنوان زنجیرهای از فراخوانیهای واکشی کپی میکند.
- همه را به عنوان واکشی (Node.js) کپی کنید . همه درخواستها را به عنوان زنجیرهای از فراخوانیهای واکشی Node.js کپی کنید.
- همه را به صورت HAR (پاکسازی شده) کپی کنید . همه درخواستها را به صورت دادههای HAR و بدون دادههای حساس مانند هدرهای
Cookie،Set-CookieوAuthorizationکپی کنید. - همه را به عنوان HAR (با دادههای حساس) کپی کنید . همه درخواستها را به عنوان دادههای HAR با دادههای حساس کپی کنید.
برای کپی کردن مجموعهای از درخواستهای فیلتر شده، یک فیلتر روی لاگ شبکه اعمال کنید، روی یک درخواست کلیک راست کرده و موارد زیر را انتخاب کنید:
- تمام URL های لیست شده را کپی کنید . URL های تمام درخواست های فیلتر شده را در کلیپ بورد کپی کنید.
- تمام لیستهای cURL را کپی کن . تمام درخواستهای فیلتر شده را به صورت زنجیرهای از دستورات cURL کپی کن.
- تمام موارد ذکر شده به عنوان PowerShell را کپی کنید . تمام درخواستهای فیلتر شده را به عنوان زنجیرهای از دستورات PowerShell کپی کنید.
- تمام موارد ذکر شده به عنوان واکشی را کپی کنید . تمام درخواستهای فیلتر شده را به عنوان زنجیرهای از فراخوانیهای واکشی کپی کنید.
- تمام موارد ذکر شده به عنوان fetch (Node.js) را کپی کنید . تمام درخواستهای فیلتر شده را به عنوان زنجیرهای از فراخوانیهای fetch در Node.js کپی کنید.
- تمام موارد ذکر شده به عنوان HAR (پاکسازی شده) را کپی کنید . تمام درخواستهای فیلتر شده را به عنوان دادههای HAR بدون دادههای حساس مانند
Cookie،Set-Cookieو هدرهایAuthorizationکپی کنید. - تمام موارد ذکر شده به عنوان HAR (با دادههای حساس) را کپی کنید . تمام درخواستهای فیلتر شده را به عنوان دادههای HAR با دادههای حساس کپی کنید.
بخشهایی از رابط کاربری پنل شبکه را باز یا بسته کنید تا روی آنچه برای شما مهم است تمرکز کنید.
به طور پیشفرض، DevTools نوار فیلترها را در بالای پنل Network نشان میدهد. برای مخفی کردن آن، روی Filter کلیک کنید.
وقتی میخواهید فضای خالی بیشتری در جدول درخواستهای شبکه خود داشته باشید، از ردیفهای بزرگ استفاده کنید. برخی ستونها همچنین هنگام استفاده از ردیفهای بزرگ، اطلاعات کمی بیشتری ارائه میدهند. به عنوان مثال، مقدار پایین ستون Size ، اندازه فشرده نشده یک درخواست است و ستون Priority ، اولویت اولیه (مقدار پایین) و نهایی (مقدار بالا) دریافت را نشان میدهد.
تنظیمات را باز کنید و برای دیدن ردیفهای بزرگ، روی «ردیفهای درخواست بزرگ» کلیک کنید.
به طور پیشفرض، DevTools مسیر Overview را نشان میدهد. تنظیمات را باز کنید. و برای مخفی کردن آن، تیک گزینهی «نمایش نمای کلی» را بردارید.
