Заметка для тех, кто не знает, где ему редактировать исходный код. Обучаясь, можно редактировать исходник хоть в «Блокноте». Но когда время становится дорого, обнаруживается, что в таком подходе множество недостатков. И в то же время, эти все недостатки переходят в достоинства, если использовать более мощный редактор.

Хочу заметить, это не рекламный пост. Я собираюсь написать про редактор Notepad++, так как сам использую его уже 2 года и доволен по уши. А в новых обновлениях он становится все лучше и лучше.

Сразу оговорюсь. Это бесплатный редактор, что очень меня радует. До него я пользовался EditPlus, но он был платным.

Итак. Для начала хочу сказать, что он поддерживает синтаксическую подсветку множества языков. В нашем деле обычно «множество языков» не требуется, а то, что требуется, он поддерживает. Это PHP, JavaScript, HTML, ASP.

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

Второе очень важное, что сильно сокращает время работы – закладки. Notepad++ поддерживает одновременное открывание большого количества файлов. Переключаться между ними можно двумя способами (настраивается в настройках) – «с текущей на предыдущую» и «последовательно». Первый метод будет знаком программистам, работающим в Microsoft Visual Studio, второй более традиционный, как в браузерах. Сочетание горячих клавиш для закрытия вкладки настраивается тоже.

Плюс три. Редактор выделяет текущую строку. Это важно, сразу ясно, где и как расположен курсор.

Плюс 4. Редактор подсвечивает закрывающие скобки и блоки. То есть, если мы в выражении if (a + b) { … } наведем курсор на {, то закрывающая } тоже подсветится. Аналогично для тегов и других скобок. Это очень облегчает задачу, если нужно быстро понять – правильно ли составлено много вложенных if’ов или много вложенных таблиц.

Плюс 5. Редактор маленький (действительно маленький), быстро открывается, при этом имеет большие возможности.
Скачать редактор можно здесь.

Постовой: отличные компьютерные курсы веб дизайна в москве, помогут освоить компьютер от новичка до профи

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Запросы можно группировать (кнопки сверху, после закладок), чтобы долго не искать то, что нужно.

Короче, развлекуха! Я час убил – разные сайты «щупал».