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

редактировать

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

Инструменты веб-разработки поставляются как надстройки браузера или встроенные функции в веб-браузерах. В большинстве популярных веб-браузеров, таких как Google Chrome, Firefox, Internet Explorer, Safari и Opera, есть встроенные инструменты, помогающие веб-разработчикам, а также множество дополнительных надстроек можно найти в соответствующих центрах загрузки подключаемых модулей.

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

Содержание
  • 1 Поддержка инструментов веб-разработчика
  • 2 Наиболее часто используемые функции
    • 2.1 HTML и DOM
    • 2.2 Ресурсы веб-страницы и информация о сети
    • 2.3 Профилирование и аудит
      • 2.3.1 Отладка JavaScript
  • 3 Расширения и плагины
  • 4 См. Также
  • 5 Ссылки
Инструменты веб-разработчика поддержка

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

  • Firefox - F12открывает веб-консоль / консоль браузера (начиная с Firefox 4). Веб-консоль применяется к одной вкладке содержимого; Консоль браузера применяется ко всему браузеру. Также существует множество надстроек, в том числе Firebug.
  • Google Chrome - Инструменты разработчика Chrome (DevTools)
  • Internet Explorer и Microsoft Edge - F12открывает Инструменты веб-разработчика (начиная с версии 8)
  • Opera - Opera Dragonfly
  • Safari - Инструменты веб-разработки Safari (начиная с версии 3)
Наиболее часто используемые функции

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

HTML и DOM

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

Помимо выбора и редактирования, панели элементов HTML обычно также отображают свойства объекта DOM, такие как размер отображения и свойства CSS.

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

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

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

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

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

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

Отладка JavaScript

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

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

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

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

См. Также
Ссылки
Последняя правка сделана 2021-06-20 10:29:27
Содержание доступно по лицензии CC BY-SA 3.0 (если не указано иное).
Обратная связь: support@alphapedia.ru
Соглашение
О проекте