Инструменты веб-разработки
Инструменты веб-разработки (часто называемые инструментами разработки ) позволяют веб-разработчикам тестировать, изменять и отлаживать свои веб-сайты . Они отличаются от конструкторов веб-сайтов и интегрированных сред разработки (IDE) тем, что не помогают непосредственно создавать веб-страницы , а представляют собой инструменты, используемые для тестирования пользовательского интерфейса веб-сайта или веб-приложения .
Инструменты веб-разработки представляют собой дополнения к браузеру или встроенные функции современных веб-браузеров. Такие браузеры, как Google Chrome, Firefox , Safari , Microsoft Edge и Opera , имеют встроенные инструменты, помогающие веб-разработчикам, а множество дополнительных надстроек можно найти в соответствующих центрах загрузки плагинов.
Инструменты веб-разработки позволяют разработчикам работать с различными веб-технологиями, включая HTML , CSS , DOM , JavaScript и другими компонентами, которые обрабатываются веб-браузером.
История и поддержка
[ редактировать ]Ранние веб-разработчики вручную отлаживали свои веб-сайты, комментируя код и используя JavaScript функции . Одним из первых инструментов отладки браузера было Mozilla от расширение Firebug , которое обладало многими из текущих основных функций современных инструментов разработчика, что привело к тому, что Firefox стал популярным среди разработчиков в то время. Примерно в тот же период движок Safari WebKit также представил интегрированные инструменты разработчика, которые в конечном итоге стали основой для текущих инструментов Safari и Chrome. [1] [2] [3] Microsoft выпустила панель инструментов разработчика для Internet Explorer 6 и 7; а затем интегрировали их в браузер, начиная с версии 8. [4] [5] В 2017 году Mozilla отказалась от Firebug в пользу интегрированных инструментов разработчика. [6]
В настоящее время все современные веб-браузеры поддерживают инструменты веб-разработчиков, которые позволяют веб-дизайнерам и разработчикам просматривать структуру своих страниц. Это все инструменты, встроенные в браузер и не требующие дополнительных модулей или настройки. [7]
- Фаерфокс – F12 открывает Firefox DevTools. [8]
- Google Chrome и Opera – инструменты разработчика (DevTools) [9] [10]
- Microsoft Край – F12 открывает Инструменты веб-разработчика. [11] [12] Microsoft включает дополнительные функции, которые не включены в основную версию Chromium . [13]
- Safari . Веб-инспектор Safari необходимо включить на панели настроек. [14] [15] [3]
Функции
[ редактировать ]Доступ к встроенным инструментам веб-разработчика в браузере обычно осуществляется путем наведения указателя мыши на элемент на веб-странице и выбора «Проверить элемент» или аналогичного параметра в контекстном меню . В качестве альтернативы F12 key, как правило, является еще одним распространенным ярлыком. [7]
HTML и DOM
[ редактировать ]Средство просмотра и редактор HTML и DOM обычно входит в состав встроенных инструментов веб-разработки. Разница между средством просмотра HTML и DOM и функцией просмотра источника в веб-браузерах заключается в том, что средство просмотра HTML и DOM позволяет вам видеть DOM в том виде, в котором он был отображен, а также позволяет вносить изменения в HTML и DOM и просматривать изменение отражается на странице после внесения изменения. [16] [3] [7]
Помимо выбора и редактирования, панели элементов HTML обычно также отображают свойства объекта DOM, такие как размер отображения и свойства CSS. [17]
Firefox, Safari, Chrome и Edge позволяют пользователям моделировать документ на мобильном устройстве, изменяя размеры области просмотра и плотность пикселей . [18] Кроме того, Firefox и Chrome имеют возможность имитировать цветовую слепоту для страницы. [19]
Ресурсы, ресурсы и сетевая информация веб-страницы
[ редактировать ]Веб-страницы обычно загружаются и требуют дополнительного контента в виде изображений, сценариев, шрифтов и других внешних файлов. Инструменты веб-разработки также позволяют разработчикам проверять ресурсы, которые загружены и доступны на веб-странице, в виде древовидной структуры, а внешний вид таблиц стилей можно тестировать в реальном времени. [20] [21] [7]
Инструменты веб-разработки также позволяют разработчикам просматривать информацию об использовании сети, например время загрузки и использование полосы пропускания, а также какие HTTP-заголовки отправляются и принимаются. [22] Разработчики могут манипулировать и повторно отправлять сетевые запросы. [23] [18]
Профилирование и аудит
[ редактировать ]Профилирование позволяет разработчикам собирать информацию о производительности веб-страницы или веб-приложения. С помощью этой информации разработчики могут улучшить производительность своих скриптов. Функции аудита могут предоставлять разработчикам предложения после анализа страницы по оптимизации, чтобы уменьшить время загрузки страницы и повысить скорость реагирования. Инструменты веб-разработки обычно также фиксируют время, необходимое для рендеринга страницы, использование памяти и типы происходящих событий. [24] [25] [3]
Эти функции позволяют разработчикам оптимизировать свою веб-страницу или веб-приложение. [26]
Отладка JavaScript
[ редактировать ]JavaScript обычно используется в веб-браузерах. [16] Инструменты веб-разработки обычно включают в себя панель отладчика для сценариев, позволяющую разработчикам добавлять выражения наблюдения, точки останова, просматривать стек вызовов, а также приостанавливать, продолжать и пошагово выполнять отладку JavaScript. [7] [3]
Также часто включается консоль, которая позволяет разработчикам вводить команды JavaScript и вызывать функции или просматривать ошибки, которые могли возникнуть во время выполнения сценария. [7] [3] [16]
Расширения
[ редактировать ]The devtools API позволяет расширениям браузера добавлять свои собственные функции в инструменты разработчика. [27] [28]
См. также
[ редактировать ]Ссылки
[ редактировать ]- ^ Хэтчер, Тимоти (16 января 2016 г.). «10 лет Веб-Инспектору» . Вебкит . Проверено 13 февраля 2024 г.
- ^ «10 лет Chrome DevTools» . Блог Хрома . Проверено 13 февраля 2024 г.
- ^ Jump up to: а б с д и ж Оделл, Ден (2014). «Инструменты разработчика браузера». Профессиональная разработка на JavaScript: кодирование, возможности и инструменты . Нью-Йорк, штат Нью-Йорк: Apress / Springer. стр. 423–437. ISBN 978-1-4302-6269-5 .
- ^ Маккормик, Либби (3 ноября 2017 г.). «Инструменты разработчика F12 (Windows)» . msdn.microsoft.com . Проверено 6 сентября 2018 г.
- ^ «Microsoft выпускает панель инструментов разработчика IE» . 10 мая 2007 года . Проверено 11 мая 2007 г.
- ^ «Прощаемся с Firebug – Mozilla Hacks – блог веб-разработчиков» . Mozilla Hacks — блог веб-разработчиков . Проверено 13 февраля 2024 г.
- ^ Jump up to: а б с д и ж «Что такое инструменты разработчика браузера?» . МДН . Корпорация Мозилла . Проверено 5 июля 2023 г.
- ^ «Документация пользователя Firefox DevTools» . Исходная документация Firefox . Проверено 5 июля 2023 г.
- ^ «Инструменты разработчика Chrome» . Разработчики Chrome . Проверено 5 июля 2023 г.
- ^ «Изучите расширенные возможности: оптимизируйте разработку с помощью инструментов разработчика» . Опера в помощь . Проверено 5 июля 2023 г.
- ^ «Документация по Microsoft Edge DevTools» . Microsoft Learn . Проверено 5 июля 2023 г.
- ^ «Обзор DevTools — разработка Microsoft Edge» . Microsoft Learn . 7 декабря 2023 г. Проверено 13 февраля 2024 г.
- ^ Броссе, Патрик (7 сентября 2021 г.). «Что нового в DevTools: кросс-браузерная версия» . Разрушительный журнал . Проверено 13 февраля 2024 г.
- ^ «Веб-инспектор» . Документация разработчика Apple . Проверено 13 февраля 2024 г.
- ^ «Включение функций для веб-разработчиков» . Документация разработчика Apple . Проверено 13 февраля 2024 г.
- ^ Jump up to: а б с Чиннатамби, Кирупа (6 июля 2016 г.). Абсолютное руководство по JavaScript для начинающих . Пирсон Образование. ISBN 978-0-134-49862-1 .
- ^ «Проверка и редактирование страниц и стилей | Инструменты для веб-разработчиков» . Разработчики Google . Проверено 6 сентября 2018 г.
- ^ Jump up to: а б Броссе, Патрик (27 июня 2023 г.). «Полезные советы и рекомендации по инструментам разработчика» . Разрушительный журнал .
- ^ Лайлс, Тейлор (11 марта 2020 г.). «Теперь Google позволяет разработчикам просматривать визуальные ограничения в инструментах разработки Chrome» . Грань . Проверено 13 февраля 2024 г.
- ^ «Панель ресурсов — Google Chrome» . Разработчики Chrome . Проверено 6 сентября 2018 г.
- ^ «Firefox представляет новую панель инструментов разработчика» . Блог Mozilla . Проверено 6 сентября 2018 г.
- ^ «Измерение времени загрузки ресурсов | Инструменты для веб-разработчиков» . Разработчики Google . Проверено 6 сентября 2018 г.
- ^ Клэберн, Томас. «Google добавляет 16 функций в инструменты разработчика Chrome 117» . Регистр . Проверено 13 февраля 2024 г.
- ^ «Панель профилей — Google Chrome» . Developers.google.com . Проверено 6 сентября 2018 г.
- ^ Маккормик, Либби (3 марта 2016 г.). «Сообщения об ошибках консоли инструментов разработчика F12 (Windows)» . msdn.microsoft.com . Проверено 6 сентября 2018 г.
- ^ Маккормик, Либби (3 марта 2016 г.). «Использование инструмента профилировщика для анализа производительности вашего кода (Windows)» . msdn.microsoft.com . Проверено 6 сентября 2018 г.
- ^ Биссон, Саймон (11 февраля 2020 г.). «Инструменты разработчика в новом Microsoft Edge» . Инфомир . Проверено 13 февраля 2024 г.
- ^ «Инструменты разработчика — Mozilla | MDN » http://developer.mozilla.org . августа 10 Получено 13 февраля.
