Дизайнеры, разработчики и гики всегда ищут инструменты для повышения их эффективности и облегчения работы. Одним из таких инструментов является расширение для веб-разработчиков Firefox (также доступно для Chrome). Крис Педерик выпустил это удобное дополнение 10 лет назад в 2003 году.
В Firefox 10.0, выпущенный в январе 2012 года, были добавлены некоторые новые функции, совместно именуемые инструментами разработчика. Эти встроенные инструменты не включали столько функций, сколько расширение Pederick. Однако в Developer Tools был смелый, интуитивно понятный инспектор HTML и CSS, который позволял вам легко выбирать и проверять каждый элемент на веб-странице.
Теперь, более чем через полтора года, Firefox (теперь в версии 22) может похвастаться изысканным, элегантным набором инструментов разработчика. Но этот набор носит новое, но знакомое имя: веб-разработчик. Этот новый веб-разработчик, среди прочих инструментов, включает в себя инспектор, редактор стилей, профилировщик и адаптивный дизайн.
Инспектор
Активируйте инструмент «Инспектор», затем переведите курсор мыши или щелкните элемент на странице. При этом выбирается элемент, и консоль инспектора показывает, где этот элемент вложен в код, а также отображает легко ориентируемый элемент навигации, показывающий, где находится элемент в иерархии страниц. Также есть боковая панель, которая позволяет увидеть, какие правила CSS объявлены для элемента, какие правила вычисляются или игнорируются, и какова позиция объекта в блочной модели.
Редактор стилей
Редактор стилей выводит список всех таблиц стилей CSS, реализованных на веб-странице, в формате списка с возможностью выбора. Щелкните элемент списка, и консоль загрузит эту таблицу стилей и позволит редактировать CSS в режиме реального времени.
Profiler
Запустите Profiler и нажмите «Пуск», чтобы создать профиль JavaScript: посмотрите, где ваш код JavaScript проводит все свое время. Как только вы нажмете «Стоп», консоль сохранит профиль и выведет результаты в виде графика и сетки данных, показывающих каждое выполненное JavaScript-действие и сколько времени потребовалось для его запуска. Вы можете нажать и перетащить, чтобы выбрать конкретную часть графика. Этот выбор отобразится на новой вкладке консоли с увеличенным графиком и уменьшенной, сфокусированной сеткой данных. Вы можете создавать и сохранять столько профилей, сколько вам нужно.
Адаптивный дизайн
Что действительно сияет среди всех возможностей нового веб-разработчика, так это Responsive Design View. Вместо изменения размера окна браузера, чтобы показать, как ваш сайт будет выглядеть на экранах разных размеров или на разных устройствах, как это делает инструмент изменения размера из расширения Pederick Web Developer, просто перетащите размер окна просмотра в окне браузера. Свободно перетащите область просмотра к любому размеру, который вы хотите, или выберите размер из выпадающего списка (вы можете добавить нестандартные размеры в этот список).
Ярлыки
Кроме того, поскольку многие дизайнеры и разработчики являются фанатиками сочетаний клавиш (включая меня), встроенный веб-разработчик позволяет отображать и скрывать все его компоненты с помощью удобного и простого набора сочетаний клавиш:
- Инспектор: Ctrl + Shift + I
- Редактор стилей: Shift + F7
- Профилировщик: Shift + F5
- Адаптивный дизайн: Ctrl + Shift + M
- Скретчпад: Shift + F4
- Отладчик: Ctrl + Shift + S
- Панель инструментов разработчика: Shift + F2
Расширение Pederick для веб-разработчиков представляет собой панель инструментов, поэтому оно всегда видно. Но вы можете добавить в Firefox кнопку «показать / скрыть веб-разработчика». Нажмите 1) кнопку Firefox (вверху слева)> «Параметры»> «Макет панели инструментов…» или 2) «Вид»> «Панели инструментов»> «Настройка …», чтобы открыть всплывающее окно «Настройка панели инструментов». Затем перетащите кнопку «Веб-разработчик» из всплывающего окна туда, где вы хотите, чтобы кнопка появлялась среди ваших панелей инструментов.
Вердикт
Итак, вы можете отказаться от расширения для веб-разработчика и придерживаться веб-разработчика Firefox, верно? Вы могли бы, но вы бы упустили некоторые мощные и удобные функции. Такие функции, как кнопки панели инструментов для проверки ваших CSS, HTML, RSS и гиперссылок через сервисы проверки W3C; быстрые ссылки, которые отключают кэш или куки и очищают поля формы; и отображать параметры, которые скрывают, обрисовывают или маркируют все экземпляры элемента на текущей странице. Расширение также имеет живые возможности редактирования HTML.
Таким образом, выберите, какие функции любого из веб-разработчиков лучше всего подходят для вашего рабочего процесса, и обеспечьте максимальную эффективность кодирования или проектирования. В браузере с открытым исходным кодом в открытой сети вполне уместно, что эти инструменты с одинаковыми именами не борются за превосходство. Расширение веб-разработчика является дополнением, а не противником встроенного веб-разработчика.
http://www.mozilla.org/en-US/firefox/10.0/releasenotes/
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
http://chrispederick.com/
http://www.pcnexus.net/2013/05/mozilla-firefox-21-all-keyboard-shortcuts-2013.html