Инструменты разработчика
Инструменты разработчика Google Chrome – это специальные средства разработки, позволяющие модифицировать и просматривать html и css элементы веб-сайта в режиме реального времени. Данные расширения существуют во всех современных браузерах, поскольку с недавнего времени это стало необходимым стандартом W3C (Консорциум Всемирной паутины). Даже Internet Explorer имеет собственный набор «Developer Tools», который, правда, не так удобен по сравнению с большинством других браузеров.
Internet Explorer Developer Tools
Firefox Developer Tools (Firebug)
Safari Developer Tools
Google Chrome Developer Tools
Уровень юзабилити прежде всего определяется количеством времени, который разработчик тратит на работу с конкретным браузером. Кто-то находит более удобным интейрфейс Safari, кто-то предпочитает Firebug от Firefox. Базовый функционал данных дополнений практически одинаковый. В данной статье мы кратко поговорим о расширении Developer Tools от Google Chrome, который подходит для понимания работы CSS-стилей и позволяет в режиме реального времени проверить работу внесённых изменений без перезагрузки страницы.
Что можно сделать при помощи инструментов веб-разработчика:
1) Определить все элементы, привязанные к выбранному коду
2) Модицифировать стили, скрипты, добавлять правила и ресурсы
3) Просмотреть все HTTP-запросы, отправляемые браузером
4) Смотреть уровень производительности и скорость загрузки элементов
5) Проверить «битые ссылки» и недоступное содержимое (404)
6) Просмотреть все неиспользуемые CSS-правила
5) Исполнять любые JavaScript команды в консоли
6) Копирование и вставка CSS-правил «на лету»
При добавлении новых CSS-правил Google Chrome автоматически предлагает наиболее предполагаемые значения с возможностью их быстрого выбора.
На вкладке «Elements» мы видим не только полную структуру документа, их вложенность и порядок, но и можем изменить как текст, так и весь html-код. Есть поддержка удаления элементов дерева с моментальным отображением результатов в браузере, что очень удобно при отладке. При изменении открывающего тега закрывающий тег ставиться автоматически, облегчая многие рутинные действия.
Вообще, инструменты разработчика очень облегчают жизнь верстальщика и дизайнера, т.к. позволяют экспериментировать со стилями и только потом, после окончательного вывода, записывать результаты в итоговый css-файл.