Инструменты веб-разработки (часто называемые инструментами разработчика ) позволяют веб-разработчикам тестировать и отлаживать свой код. Они отличаются от конструкторов веб-сайтов и интегрированных сред разработки (IDE) тем, что они не помогают в непосредственном создании веб-страницы , а представляют собой инструменты, используемые для тестирования пользовательского интерфейса веб-сайта или веб-приложения .
Инструменты веб-разработки поставляются как надстройки браузера или встроенные функции в веб-браузеры . Самые популярные веб - браузеры, такие как Google Chrome , Firefox , Internet Explorer , Safari , Microsoft Краю и Opera , [1] имеют встроенные инструменты , чтобы помочь веб - разработчиков, а также много дополнительных надстроек можно найти в соответствующих плагинов загрузки центров .
Инструменты веб-разработки позволяют разработчикам работать с различными веб-технологиями, включая HTML , CSS , DOM , JavaScript и другие компоненты, которые обрабатываются веб-браузером. Из-за растущего спроса со стороны веб-браузеров [2] популярные веб-браузеры включают больше функций, предназначенных для разработчиков. [3]
Поддержка инструментов веб-разработчика
Некоторые известные веб-браузеры поддерживают инструменты веб-разработчика, которые позволяют веб-дизайнерам и разработчикам просматривать структуру своих страниц. Все эти инструменты встроены в браузер и не требуют дополнительных модулей или настройки.
- Firefox - F12открывает веб-консоль / консоль браузера (начиная с Firefox 4). [4] [5] Веб-консоль применяется к одной вкладке содержимого; Консоль браузера применяется ко всему браузеру. [6] Также существует множество дополнений, [7] включая Firebug .
- Google Chrome - Инструменты разработчика Chrome (DevTools) [8]
- Internet Explorer и Microsoft Edge - F12открывает Инструменты веб-разработчика (начиная с версии 8) [9] [10]
- Опера - Опера Стрекоза [11]
- Safari - Инструменты веб-разработки Safari [12] (начиная с версии 3) [13]
Наиболее часто используемые функции
Доступ к встроенным инструментам веб-разработчика в браузере обычно осуществляется путем наведения курсора на элемент на веб-странице и выбора «Проверить элемент» или аналогичного параметра в контекстном меню . В качестве альтернативы F12клавиша, как правило, является еще одним распространенным ярлыком. [14]
HTML и DOM
Средство просмотра и редактирования HTML и DOM обычно входит в состав встроенных инструментов веб-разработки. Разница между программой просмотра 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] Существует множество распространенных плагинов, которые могут предоставлять широкий спектр дополнительных функций.
Смотрите также
- Веб-разработчик (программное обеспечение)
- Жизненный цикл веб-разработки
- Всемирная сеть
Рекомендации
- ^ http://www.fraakz.com/top-web-browsers-in-2012.html
- ^ «Растущий спрос на веб-разработчиков» . Яркий хаб . Проверено 6 сентября 2018 .
- ^ «Последние разработки приложений | Разработка мобильных веб-приложений - Разработка приложений, тенденции в области приложений» . devworks.thinkdigit.com . Проверено 6 сентября 2018 .
- ^ «Консоль браузера» . Mozilla Hacks - блог веб-разработчиков . Проверено 6 сентября 2018 .
- ^ «Веб-консоль» . Веб-документы MDN . Проверено 6 сентября 2018 .
- ^ «Консоль браузера» . Сеть разработчиков Mozilla. 13 августа 2016 . Проверено 15 марта 2017 года .
- ^ http://tips.webdesign10.com/web-developer-toolbar.htm
- ^ «Обзор инструментов разработчика Chrome - Google Chrome» . developer.chrome.com . Проверено 6 сентября 2018 .
- ^ Маккормик, Либби. «Инструменты разработчика F12 (Windows)» . msdn.microsoft.com . Проверено 6 сентября 2018 .
- ^ эрикадойл. «Инструменты разработчика Microsoft Edge - Разработка Microsoft Edge» . docs.microsoft.com . Проверено 6 сентября 2018 .
- ^ «Браузер Opera | Более быстрый, безопасный и умный веб-браузер» . www.opera.com . Проверено 6 сентября 2018 .
- ^ Inc., Apple. «Инструменты - Safari - Разработчик Apple» . developer.apple.com . Проверено 6 сентября 2018 .
- ^ История версий Safari
- ^ https://developers.google.com/chrome-developer-tools/docs/overview#access
- ^ Маккормик, Либби. «Введение в инструменты разработчика F12 (Windows)» . msdn.microsoft.com . Проверено 6 сентября 2018 .
- ^ «Проверка и редактирование страниц и стилей | Инструменты для веб-разработчиков» . Разработчики Google . Проверено 6 сентября 2018 .
- ^ «Панель ресурсов - Google Chrome» . developers.google.com . Проверено 6 сентября 2018 .
- ^ «Firefox представляет новую панель инструментов разработчика» . Блог Mozilla . Проверено 6 сентября 2018 .
- ^ «Измерение времени загрузки ресурсов | Инструменты для веб-разработчиков» . Разработчики Google . Проверено 6 сентября 2018 .
- ^ «Панель профилей - Google Chrome» . developers.google.com . Проверено 6 сентября 2018 .
- ^ Маккормик, Либби. «Сообщения об ошибках консоли инструментов разработчика F12 (Windows)» . msdn.microsoft.com . Проверено 6 сентября 2018 .
- ^ Маккормик, Либби. «Использование Profiler Tool для анализа производительности вашего кода (Windows)» . msdn.microsoft.com . Проверено 6 сентября 2018 .
- ^ «Новая командная строка Firefox поможет вам разрабатывать быстрее» . Mozilla Hacks - блог веб-разработчиков . Проверено 6 сентября 2018 .
- ^ «Браузер Opera | Более быстрый, безопасный и умный веб-браузер» . www.opera.com . Проверено 6 сентября 2018 .
- ^ «Использование консоли | Инструменты для веб-разработчиков» . Разработчики Google . Проверено 6 сентября 2018 .
- ^ «Больше функций браузера, меньше обновлений плагинов | Firefox» . Mozilla . Проверено 6 сентября 2018 .