инструменты веб-разработки (часто называемые devtools ) позволяют веб-разработчикам тестировать и отлаживать свой код. Они отличаются от конструкторов веб-сайтов и интегрированных сред разработки (IDE) тем, что они не помогают в прямом создании веб-страницы, а являются используемыми инструментами. для тестирования пользовательского интерфейса веб-сайта или веб-приложения.
Инструменты веб-разработки поставляются как надстройки браузера или встроенные функции в веб-браузерах. В большинстве популярных веб-браузеров, таких как Google Chrome, Firefox, Internet Explorer, Safari и Opera, есть встроенные инструменты, помогающие веб-разработчикам, а также множество дополнительных надстроек можно найти в соответствующих центрах загрузки подключаемых модулей.
Инструменты веб-разработки позволяют разработчикам работать с различными веб-технологиями, включая HTML, CSS, DOM, JavaScript. и другие компоненты, которые обрабатываются веб-браузером. Из-за растущего спроса со стороны веб-браузеров на дополнительные возможности популярные веб-браузеры включают больше функций, предназначенных для разработчиков.
Некоторые известные веб-браузеры поддерживают инструменты веб-разработчика, которые позволяют веб-дизайнерам и разработчикам просматривать структуру своих страниц. Все эти инструменты встроены в браузер и не требуют дополнительных модулей или настройки.
Доступ к встроенным в браузере инструментам веб-разработчика обычно можно получить, наведя курсор на элемент на веб-странице и выбрав «Проверить элемент» или аналогичный параметр в контекстном меню. В качестве альтернативы клавиша F12, как правило, является еще одним распространенным ярлыком.
HTML и DOM средство просмотра и редактор обычно включены в встроенные инструменты веб-разработки. Разница между средством просмотра HTML и DOM и функцией просмотра исходного кода в веб-браузерах заключается в том, что средство просмотра HTML и DOM позволяет вам видеть DOM в том виде, в котором он был отрисован, а также позволяет вам вносить изменения в HTML и DOM и видеть изменение отражается на странице после внесения изменения.
Помимо выбора и редактирования, панели элементов HTML обычно также отображают свойства объекта DOM, такие как размер отображения и свойства CSS.
Веб-страницы обычно загружаются и требуют дополнительного содержимого в виде изображений, сценариев, шрифтов и других внешних файлов. Инструменты веб-разработки также позволяют разработчикам проверять ресурсы, которые загружены и доступны на веб-странице в виде списка с древовидной структурой.
Инструменты веб-разработки также позволяют разработчикам просматривать информацию об использовании сети, такую как просмотр того, что время загрузки и использование полосы пропускания: и какие заголовки HTTP отправляются и принимаются.
Профилирование позволяет разработчикам собирать информацию о производительности веб-страницы или веб-приложение. С помощью этой информации разработчики могут улучшить производительность своих скриптов. После анализа страницы функции аудита могут предоставлять разработчикам предложения по оптимизации, чтобы уменьшить время загрузки страницы и повысить скорость отклика. Инструменты веб-разработки, как правило, также предоставляют функции временной шкалы, обеспечивающие запись времени, необходимого для отображения страницы, использования памяти и типов происходящих событий.
Эти функции позволяют разработчикам оптимизировать свои веб-страницы или веб-приложение.
JavaScript обычно используется в веб-браузерах. Инструменты веб-разработки обычно включают в себя панель для отладки сценариев, позволяющую разработчикам добавлять выражения наблюдения, точки останова, просматривать стек вызовов, а также приостанавливать, переходить, переходить и выходить из функций при отладке JavaScript.
Обычно в комплект входит консоль JavaScript. Консоли позволяют разработчикам вводить команды JavaScript и вызывать функции или просматривать ошибки, которые могли возникнуть во время выполнения сценария.
Современные веб-браузеры поддерживают использование плагины или расширения для добавления или расширения функциональности. Есть много распространенных плагинов, которые могут предоставлять широкий спектр дополнительных функций.