dimoning.ru
Это блог о сео, деньгах, заработке в сети, разработке своих проектов, программировании
и "жизни программиста", бизнесе, блогосфере, фрилансе и многом другом.

Контакты, Реклама в блоге

FireBug: debug сайта, сетевая активность сайта

Автор DimoninG, написано 16.02.2009

Рубрика Отладка

Тяжела и неказиста жизнь простого веб-программиста. Не в рифму, зато правда. Особенно сложно в плане проверки на защищенность сайта и другие «экстримальные» условия.

В подобных случаях очень помогает плагин FireBug, написанный для FireFox. Здесь я коротко опишу его функционал.

Начну с самого вкусного. Лично я столкнулся с ним тогда, когда надо было узнать – какие post-get запросы отправляет сайт, куда и с какими параметрами (было ощущение, что написанный движок – подстава и на самом деле бекдор на сервер).

Скачайте и установите плагин. Теперь перейдите на сайт, с которым работаете. Нажмите F12 (или Вид->FireBug). А вот и окошко плагина!

Тут мы видим несколько закладок.

Вкладка HTML позволяет сразу просматривать HTML-код сайта в удобном «подсвеченном» состоянии. Мне очень понравилось то, что все элементы «свернуты», а если нажать на тег, то в окошке справа будет показано, какие стили CSS к нему применены. Вот например:

Во вкладке CSS будут показаны вообще все стили сайта. Удобно тем, что собираются все файлы и встроенные стили воедино, а ведь иногда так лень лазить и искать где что прописано.

Во вкладке Scripts аналогично со скриптами. Хотя, честно говоря, работает довольно странно – куски HTML-кода тоже попадаются.

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

А вот теперь самое главное, из-за чего я и пишу все это. Вкладка Net.

Здесь показана вся сетевая активность сайта. Если проще – то какие запросы, куда, когда и с какими параметрами он посылает! Этакий сниффер для сайта. Вот например:

Тут сразу видно, что megaupload.com использует рекламу от Google , загружает половину графики из других мест (и еще всякие интересные штуки, но я их тут не покажу).

Эта информация архи-важная, если нужно протестировать сайт на взлом или спалить какой-нибудь скрипт, который тайком отсылает информацию (к слову говоря – нуленный dle ничего никуда не отсылает, моя паранойя завершилась).

Вторая важная информация – время загрузки разных запросов. Другими словами можно узнать почему сайт тормозит. Например, когда-то давно seoinsoul.ru спрашивал меня, почему у него сайт так долго грузится. Сейчас понятно – хостинг, похоже, хреновый. Дольше всего грузятся картинки самого же сайта.

Кстати, картинки наглядно показаны, если навести мышку на запрос. А если кликнуть на запрос, то наглядно показано ЧТО посылается. Ну просто архи-удобно! Я восхищен!