Developer tools: анализ результата запроса в браузере онлайн урок.


В этом уроке мы рассмотрим возможности инструментов разработчика для анализа HTTP запросов. Для начала, откроем панель инструментов разработчика. Это можно сделать нажав F12 либо комбинацию Ctr+Shift+I. Также это можно сделать из главного меню браузера.


Откроем вкладку Network. Мы увидим сообщение о том что страницу следует обновить. Это необходимо для того чтобы начать запись передачи данных.



Обновим страницу и увидим что появились записи в табличке. Это список выполненных запросов. Их много, поскольку веб страничка содержит подключенные файлы - это стили, JavaScript файлы, картинки, шрифты и т.п. Иными словами: все элементы веб документа, которые содержат путь к еще одному файлу - это еще один запрос.



Самый первый в списке - это наш основной запрос который мы только что сделали при помощи браузера, когда перешли по ссылке. Если мы кликнем на эту запись, то справа появится панель с подробной информацией касательно запроса и его результатов. Эта панель содержит несколько вкладок:



  • General. Содержит информацию о методе, заголовках запроса / ответа, а также и коде состояния и параметрах запроса.

  • Response: Содержит тело ответа.

  • Preview: В это вкладке мы сможем увидеть то, как тело ответа интерпретируется браузером.

  • Cookies. Информация о cookies, которые были отправлены вместе с запросом.

  • Timing. Данные о скорости запроса / ответа.



Таким образом, мы всегда можем проанализировать из чего состоит запрос, который мы отправляем и из чего состоит ответ. Эта панель существенно облегчает отладку приложений с асинхронными запросами, про которые Вы можете почитать в этом курсе.