Поиск неисправностей веб-сайта путем изучения HTTP-трафика - Исследование HTTP-трафика с помощью Fiddler

Исследование HTTP-трафика с помощью Fiddler

Fiddler - это бесплатный инструмент HTTP-отладки, созданный компанией Microsoft. Fiddler работает с хостингом браузера, но также с легкостью работает с Internet Explorer. (Данная статья демонстрирует работу Fiddler с Internet Explorer. Для того, чтобы работать с другими обозревателями, я рекомендую вам прочесть соответствующую литературу.)

Для того, чтобы начать работать с Fiddler, посетите домашнюю страницу Fiddler и установите программу, загрузив ее с данной страницы. Будучи установленным, Fiddler доступен из Internet Explorer , а именно посредством меню Tools. Запуск Fiddler откроет вам новое окно, которое отслеживает все HTTP-запросы (HTTP request), выполненные обозревателем и отображенные в левой части окна. Выбор запроса из списка выведет его детали в правую часть окна. В детальное описание включен отчет о производительности, а также информация о запросе (данные, посланные с клиента на сервер) и ответ (данные, посланные от сервера к клиенту).

Следующий рисунок демонстрирует Fiddler в действии. Левая часть перечисляет различные HTTP-запроcы (HTTP request) . Я начал с посещения страницы www.google.com и затем осуществил поиск "ASP.NET". (Различные вызовы к clients1.google.com for /complete/search?hl=en... являются AJAX-запросы к автозаполняемому полю поиска домашней страницы Google). После просмотра результатов поиска я нажал на ссылку www.asp.net. Обозреватель загружает домашнюю страницу данного сайта, а также внешних файлов, связанных с сайтом: CSS-файлы (.css), JavaScript-файлы (файлы .js, WebResource.axd и ScriptResource.axd), и файлы изображений. Выбор запроса в левой части отображает детали в правой. Оригинальный запрос к www.google.com выбран в левой части, а статистика отображается в правой.

Вы также можете просматривать детали о запросе и ответе в правой части, выбрав закладку "Session Inspector". Из данной закладки вы можете исследовать свежие данные, отосланные в HTTP-запроcе и ответе (HTTP request). Следующее изображение демонстрирует данные о запросе и ответе к www.google.com.

Fiddler является незаменимым приложением и каждый разработчик должен иметь его в своем инструментарии. Единственный недостаток, который практически каждый разработик встречает на своем пути при работе с Fiddler, это то, что Fiddler не может исследовать HTTP-трафик, посланный к локальному хосту (localhost). Хорошей новостью является то, что существует несколько обходных путей, которыми вы можете воспользоваться чтобы заставить Fiddler начать исследовать HTTP-запроcы (HTTP request) к локальному хосту (localhost). Цитата из часто задаваемых вопросов по Fiddler:

Почему я не вижу трафик, посланный к http://localhost или http://127.0.0.1?

IE7 и .NET Framework жестко-запрограммированы таким образом, что они не посылают запросов к Localhost посредством каких-либо прокси, а поскольку Fiddler как раз является прокси, то он не получит данный трафик.

Этот факт можно обойти используя название вашей локальной станции в качестве имени хоста вместо Localhost или 127.0.0.1. Поэтому, вместо ввода http://localhost:8081/mytestpage.aspx введите http://machinename:8081/mytestpage.aspx.

Также существуют и другие пути принуждения Fiddler к работе с localhost, и об этом вам стоит прочесть соответствующую литературу.

Исследуйте Fiddler для оценки производительности вашего веб-сайта

В дополнение к исследованию необработанного HTTP-трафика, Fiddler также пригоден для анализа производительности вашего веб-сайта. Если вы беспокоитесь о том, что какая-либо страница долго загружается, то вам стоит использовать Fiddler , чтобы увидеть, есть какой-нибудь внешний ресурс, являющийся причиной этому. Каждый запрос, перечисленный в левой части, включает размер загружаемого содержимого (в битах), и список запросов может быть отсортирован по данной колонке. Вкратце, вы можете сразу заметить неоправданно большие запросы, такие как большие файлы изображений или JavaScript-файлы, которые можно  подвергнуть  компрессии. Закладка Statistics (Статистика) в правой части демонстрирует общее количество посланных и полученных битов для выбранных запросов в левой части. Закладка Statistics (Статистика) в правой части демонстрирует общее количество посланных и полученных бит для выбраннызх запросов в левой части. В дополнение к общему числу битов в закладке Statistics вы также найдете реальные данные о времени, которое необходимо было потратить на выполнение выбранных запросов, биты разделены типом содержимого и примерное время загрузки в различных географических местах с различной скоростью (DSL или modem). Закладка "Session Inspector" (Инспектор сессии) отображает информацию о том, был ли запрос сжат компрессией на сервере до того, как он был отослан клиенту. Если не была применена HTTP-компрессия (HTTP compression) , то вы можете выбрать одну из стандартных техник HTTP-компрессии (GZIP или DEFLATE) и увидеть сколько битов будут сэкономлены при реализации компрессии.

Использование Fiddler для анализа HTTP-трафика клиентских приложений

Если у вас есть клиентские приложения, которые выполняют запросы Web-Service, очищают экран или выполняют какие-либо другие виды HTTP-запроcов, то вы можете использовать Fiddler во время отладки для того, чтобы исследовать данные запросы и ответы. Вкратце, вам необходимо запустить Fiddler и затем обновить код вашего клиентского приложения таким образом, чтобы оно использовало Fiddler в качестве прокси. Следующий код выполняет все это:

' Создайте класс, который вызывает веб-сервис
Dim service As New MyWebServiceProxyClass()

' Используйте Fiddler в качестве прокси
service.Proxy = New WebProxy("127.0.0.1", 8888)

' Выполните HTTP-запроc
service.MethodToInvoke(...) 

И это все! Включив данный код ваш запрос веб-сервиса будет перенаправлен через Fiddler и вы увидите запрос и ответ в Fiddler. Удобно, не правда ли? Для получения более подробной информации о данной технике, а также инструкции по настройке Fiddler на работу с обозревателями типа Firefox, вам стоит ознакомиться со статьями на данную тему.

Вывод

Многие проблемы веб-сайтов легче всего решить, используя отладчик Visual Studio. Тем не менее, существует множество неисправностей, которые невозможно распознать из-за ошибок кода серверной стороны, но вместо этого вам необходимо работать с информацией, обмениваемой между клиентом и сервером. Для таких неисправностей исследование трафика между клиентом и сервером является ключом к разгадке проблемы. Хорошей новостью является то, что существует Fiddler - отличный бесплатный инструмент для исследования HTTP-трафика.

Веселого программирования!

Scott Mitchell