Полезные plug-in’ы.
Для Firefox (Mozilla)
Web Developer Toolbar (https://addons.mozilla.org/firefox/60/)
Линейка с разнообразными инструментами для разработчика.
Позволяет: разрешать/запрещать поддержку cookies и JavaScript, смотреть и редактировать CSS, просматривать и менять скрытые элементы форм, проверять сайт на соответствие стандартам, тестировать на различных размерах окна браузера, проверять результирующие свойства блоков.
Firebug (https://addons.mozilla.org/firefox/1843/)
Позволяет контролировать и редактировать Javascript, CSS и HTML (в том числе и динамически сгенерированный), смотреть превью значений в CSS, мониторить сетевую активность и порядок загрузки страницы с отслеживанием задержек, облегчает отладку JavaScript, имеется DOM-инспектор и др.
SplitBrowser (https://addons.mozilla.org/firefox/4287/)
Плагин позволяет разделить область содержимого браузера. Поможет, например, для сравнения ряда страниц.
IE View (https://addons.mozilla.org/ru/firefox/addon/1429) и Opera View (https://addons.mozilla.org/ru/firefox/addon/1190).
Открывают активную страницу в соответствующем браузере.
Chickenfoot (http://groups.csail.mit.edu/uid/chickenfoot/)
Это расширение, которое встраивает минисреду программирования на боковой панели, так что вы сможете писать простенькие скрипты чтобы управлять страницами и автоматизировать процесс веб-браузинга. Скрипты в Chickenfoot это обычные JavaScript с рядом дополнительных функций, заточенных под веб-задачи (открыть урл, ввести строку в input, кликнуть по кнопке и много других).
При нажатии F8 на боковой панели появляется редактор, позволяющий писать простенькие сценарии, как, например, скрипт автоматического заполнения форм, end-to-end тестирование поведения сайта, изменения исходного кода страницы, перехода по ссылкам, все это может быть запрограммировано (можно составить из истории ваших действий).
Для Internet Explorer
Internet Explorer Developer Toolbar (http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en#Overview)
IE-аналогWeb Developer Toolbar для FireFox.
Instant Source
Instant Source – это плагин для Internet Explorer, который позволяет увидеть реальную структуру документа, загруженного в браузер, или конкретного элемента под курсором мыши (в зависимости от настроек). Недостатком данной программы является то, что он отображает не исходный HTML код, а код сгенерированный браузером. Поэтому о форматировании тут речи быть не может, однако можно оценить структуру документа, что само по себе очень полезно во многих случаях, особенно когда документ генерируется динамически. Скачать модуль можно отсюда: http://www.blazingtools.com
Оформление документов – корпоративный стиль
Правила именования папок и файлов
Внутри каждой корпорации существуют некоторые правила оформления и ведения документов а также именования папок. Здесь мы рассмотрим некоторые правила, которые следует соблюдать по умолчанию во избежание беспорядка.
Расширение HTML- или XHTML-файлов должно быть .html.
Имена CSS-файлов должно соответствовать media-области их применения: all.css, screen.css, print.css и т.п.
Список возможных media представлен в 6.2.3
Файлы содержащие команды SSI (см http://ru.wikipedia.org/wiki/SSI_(программирование)) должны иметь расширение .shtml, вне зависимости от того вставляются ли сами эти файлы командой #include или нет, в противном случае SSI-команды, в зависимости от настройки сервера, могут быть сервером обработаны неправильно.
Расширения файлов внедряемых командой #include находящиеся в папке inc могут иметь расширения .inc, .tpl или другие в зависимости от их назначения (с учетом предыдущего абзаца).
Имя корневой папки должно соответствовать имени проекта. Например: MyProject.
Изображения хранятся в папке images. CSS – в css. JavaScript – в js. Flash элементы – в swf.
Имя корневой папки c SSI-версией должно соответствовать имени проекта с добавлением ssi. Например: MyProject-ssi.
Пример структуры папок:
