Інструменти розробника в браузері. Вкладка Network

В продовження циклу статей про Developer Tools, розглянемо вкладку Network.

Вкладка призначена для того, щоб відстежувати завантаження сторінки та всіх її файлів (назви файлів, відповідь (статус) сервера). Також підтягується тип файлу, його ініціатори, розмір, час, за який він завантажився.

Верхній рядок називається TimeLine. Він відображає послідовність завантаження всіх файлів сторінки, а також тривалість завантаження кожного елемента і їх сумарний час в мілісекундах.

Нижче зібрана докладна інформація щодо завантаження сторінки:

• кількість запитів, надісланих на сервер;
• кількість переданих даних;
• час, за який був завантажений весь HTML-код (без скриптів та ін.);
• час, за який було побудовано DOM дерево сторінок;
• час завантаження всіх необхідних ресурсів, що впливають на відображення сторінок (мультимедійний контент, JavaScript файли і все інше, що знаходиться на сторінці).

Для перегляду процесу і властивостей завантаження конкретного елементу потрібно навести курсором на стовпець «Waterfall», у вікні відобразяться різні параметри:

• Queueing – час, який тривала черга запиту.
• Request Sent – який тривала відправка запиту.
• Waiting (TTFB) – час очікування завантаження першого байта сторінки (Time to first byte). 
• Content Download – час завантаження контенту.

Також знайти додаткову інформацію про файл можна в стовпчику «Name», клікнувши на нього. У вікні відобразяться такі властивості:

• Headers – відображає параметри заголовків, статус відповіді сервера, тип запиту, файл, метод, IP адресу.
• Preview – можна подивитись прев’ю файла.
• Response – відображаються додаткові відповіді сервера,якщо вони є.
• Initiator –  показує, що запросило ресурс (наприклад,яким рядком коду).
• Timing – показує детальний таймлайн завантаження сторінки.
• Cookies – відображає властивості cookies (ключ і значення).

Для того, щоб орієнтуватися у вкладці Headers, потрібно знати, які бувають коди відповіді сервера. Вони діляться на 5 основних класів:

• 1хх – інформаційні (часовий код, який повідомляє про те, що сервер прийняв запит і його буде опрацьовано).
• 2хх –успішна обробка (сервер отримав запит і успішно його опрацював).
• 3хх – перенаправлення (редирект означає, що для виконання запиту треба виконати ще один запит за певною адресою) 
• 4хх – помилка з боку користувача, сервер не може виконати запит.
• 5хх – помилка на сервері ( користувач надсилає коректний запит, але через внутрішню помилку на сервері він не може бути опрацьований).

У вкладці Network знаходяться також наступні інструменти:

1. Кнопка «Stop recording network log». За замовчуванням кнопка активна.

2. Праворуч від кнопки «Stop recording network log» знаходиться кнопка «Clear», призначена для очищення логів. Після перезавантаження сторінки логи відобразяться знову.
3. У блоці налаштувань знаходиться кнопка «Capture Screenshots». Вона дозволяє зробити запис скріншотів кожного етапу завантаження сторінки.

4. Кнопка «Filter» приховує і показує панель фільтрів.
5. Кнопка «Search» відкриває вікно пошуку по всім файлам, присутнім на сторінці.
6. «Preserve Log» – визначає, зберігати логи чи ні. Якщо чек-бокс не відзначений, то дані будуть видалятися при оновленні сторінки і завантажуватися заново. Якщо включити чек-бокс, то при оновленні або переході на іншу сторінку попередні логи будуть збережені.
7. «Disable cache» – визначає, чи використовувати кеш браузера.
8. Випадаючий список  «Online» дозволяє вибрати і емулювати тип інтернет-з'єднання: online, offline, fast 3G, slow 3G, або додати свій тип.

Максимально вивчити і спробувати на практиці  інструменти розробника рекомендується всім тестувальникам, які хочуть підвищити свої технічні навички. Види тестування, які можна проводити з їх допомогою, значно розширюють можливості QA інженера та підвищують якість тестування.