Инструменты веб-разработки - Web development tools

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

Инструменты веб-разработки поставляются как надстройки браузера или встроенные функции в веб-браузеры. Самые популярные веб-браузеры, такие как Гугл Хром, Fire Fox, Internet Explorer, Сафари и Опера,[1] имеют встроенные инструменты, помогающие веб-разработчикам, а многие дополнительные надстройки можно найти в соответствующих центрах загрузки подключаемых модулей.

Инструменты веб-разработки позволяют разработчикам работать с различными веб-технологиями, включая HTML, CSS, то ДОМ, JavaScript, и другие компоненты, которые обрабатываются веб-браузером. Из-за растущего спроса со стороны веб-браузеров делать больше,[2] популярные веб-браузеры включают больше функций, предназначенных для разработчиков.[3]

Поддержка инструментов веб-разработчика

Некоторые известные веб-браузеры имеют поддержку инструментов веб-разработчика, которые позволяют веб-дизайнерам и разработчикам просматривать структуру своих страниц. Все эти инструменты встроены в браузер и не требуют дополнительных модулей или настройки.

  • Fire Fox – F12 открывает веб-консоль / консоль браузера (начиная с Firefox 4).[4][5] Веб-консоль применяется к одной вкладке содержимого; Консоль браузера применяется ко всему браузеру.[6] Также существует множество аддонов,[7] включая Firebug.
  • Гугл Хром - Инструменты разработчика Chrome (DevTools)[8]
  • Internet Explorer и Microsoft Edge – F12 открывает Инструменты веб-разработчика (начиная с версии 8)[9][10]
  • Опера – Опера Стрекоза[11]
  • Сафари - Инструменты веб-разработки Safari[12] (начиная с версии 3)[13]

Наиболее часто используемые функции

Доступ к встроенным в браузере инструментам веб-разработчика обычно можно получить, наведя курсор на элемент на веб-странице и выбрав «Проверить элемент» или аналогичный параметр в контекстное меню. В качестве альтернативы F12 клавиша имеет тенденцию быть другим распространенным ярлыком.[14]

HTML и DOM

HTML и ДОМ средство просмотра и редактор обычно включены во встроенные инструменты веб-разработки. Разница между средством просмотра HTML и DOM и функцией просмотра исходного кода в веб-браузерах заключается в том, что средство просмотра HTML и DOM позволяет вам видеть DOM в том виде, в котором он был отрисован, а также позволяет вам вносить изменения в HTML и DOM и видеть изменение отражается на странице после внесения изменения.[15]

В дополнение к выбору и редактированию панели элементов HTML обычно также отображают свойства объекта DOM, такие как размер отображения и свойства таблицы каскадных стилей.[16]

Активы веб-страницы, ресурсы и сетевая информация

Веб-страницы обычно загружаются и требуют дополнительного контента в виде изображений, скриптов, шрифтов и других внешних файлов. Инструменты веб-разработки также позволяют разработчикам проверять загруженные и доступные на веб-странице ресурсы в виде списка с древовидной структурой.[17][18]

Инструменты веб-разработки также позволяют разработчикам просматривать информацию об использовании сети, такую ​​как просмотр времени загрузки и использования полосы пропускания, а также какой Заголовки HTTP отправляются и принимаются.[19]

Профилирование и аудит

Профилирование позволяет разработчикам собирать информацию о производительности веб-страницы или веб-приложения. С помощью этой информации разработчики могут улучшить производительность своих скриптов. После анализа страницы функции аудита могут предоставлять разработчикам предложения по оптимизации, чтобы уменьшить время загрузки страницы и повысить скорость отклика. Инструменты веб-разработки обычно также предоставляют функции временной шкалы, обеспечивающие запись времени, необходимого для отображения страницы, использования памяти и типов происходящих событий.[20][21]

Эти функции позволяют разработчикам оптимизировать свои веб-страницы или веб-приложения.[22]

Отладка JavaScript

JavaScript обычно используется в веб-браузерах. Инструменты веб-разработки обычно включают в себя панель для отладки сценариев, позволяющую разработчикам добавлять выражения наблюдения, точки останова, просматривать стек вызовов и приостанавливать, переходить, переходить и выходить из функций при отладке JavaScript.

Консоль JavaScript обычно включена. Консоли позволяют разработчикам вводить команды JavaScript и вызывать функции или просматривать ошибки, которые могли возникнуть во время выполнения сценария.[23][24][25]

Расширения и плагины

Современные веб-браузеры поддерживают использование плагины или расширения для добавления или расширения функциональности.[26] Есть много распространенных плагинов, которые могут предоставлять широкий спектр дополнительных функций.

Смотрите также

Рекомендации

  1. ^ http://www.fraakz.com/top-web-browsers-in-2012.html
  2. ^ «Растущий спрос на веб-разработчиков». Яркий центр. Получено 2018-09-06.
  3. ^ «Последние разработки приложений | Разработка мобильных веб-приложений - Разработка приложений, тенденции в области приложений». devworks.thinkdigit.com. Получено 2018-09-06.
  4. ^ "Консоль браузера". Mozilla Hacks - блог веб-разработчиков. Получено 2018-09-06.
  5. ^ «Веб-консоль». Веб-документы MDN. Получено 2018-09-06.
  6. ^ «Консоль браузера». Сеть разработчиков Mozilla. 13 августа 2016 г.. Получено 15 марта 2017.
  7. ^ http://tips.webdesign10.com/web-developer-toolbar.htm
  8. ^ «Обзор Chrome DevTools - Google Chrome». developer.chrome.com. Получено 2018-09-06.
  9. ^ Маккормик, Либби. «Инструменты разработчика F12 (Windows)». msdn.microsoft.com. Получено 2018-09-06.
  10. ^ эрикадойл. «Инструменты разработчика Microsoft Edge - Разработка Microsoft Edge». docs.microsoft.com. Получено 2018-09-06.
  11. ^ «Браузер Opera | Более быстрый, безопасный и умный веб-браузер». www.opera.com. Получено 2018-09-06.
  12. ^ Inc., Apple. «Инструменты - Safari - Разработчик Apple». developer.apple.com. Получено 2018-09-06.
  13. ^ История версий Safari
  14. ^ https://developers.google.com/chrome-developer-tools/docs/overview#access
  15. ^ Маккормик, Либби. «Введение в инструменты разработчика F12 (Windows)». msdn.microsoft.com. Получено 2018-09-06.
  16. ^ «Проверка и редактирование страниц и стилей | Инструменты для веб-разработчиков». Разработчики Google. Получено 2018-09-06.
  17. ^ «Панель ресурсов - Google Chrome». developers.google.com. Получено 2018-09-06.
  18. ^ "Firefox представляет новую панель инструментов разработчика". Блог Mozilla. Получено 2018-09-06.
  19. ^ «Измерение времени загрузки ресурсов | Инструменты для веб-разработчиков». Разработчики Google. Получено 2018-09-06.
  20. ^ «Панель профилей - Google Chrome». developers.google.com. Получено 2018-09-06.
  21. ^ Маккормик, Либби. «Сообщения об ошибках консоли инструментов разработчика F12 (Windows)». msdn.microsoft.com. Получено 2018-09-06.
  22. ^ Маккормик, Либби. «Использование Profiler Tool для анализа производительности вашего кода (Windows)». msdn.microsoft.com. Получено 2018-09-06.
  23. ^ «Новая командная строка Firefox поможет вам разрабатывать быстрее». Mozilla Hacks - блог веб-разработчиков. Получено 2018-09-06.
  24. ^ «Браузер Opera | Более быстрый, безопасный и умный веб-браузер». www.opera.com. Получено 2018-09-06.
  25. ^ «Использование консоли | Инструменты для веб-разработчиков». Разработчики Google. Получено 2018-09-06.
  26. ^ «Больше функций браузера, меньше обновлений плагинов | Firefox». Mozilla. Получено 2018-09-06.