Современные браузеры, такие как Firefox и Safari, Edge, Chrome и Яндекс имеют встроенную консоль разработчика. Это браузерная панель, которая содержит вкладки с элементами и свойствами сайта. Эти вкладки называют инструментами разработчика, или DevTools.
Для чего используются инструменты разработчика?
Консоль разработчика представляет собой интегрированную среду разработки для создания, отладки и тестирования приложений. Для того, чтобы открыть консоль, нужно перейти в меню браузера, в дополнительные инструменты, затем в инструменты разработчика и перейти во вкладку консоль. В ней будут отображаться все ошибки работы приложения.
Режим разработчика в телефоне и планшете
- служит для доступа к функциям настройки, тестирования, отладки и расширения возможностей устройства. Для активации режима разработки на телефоне нужно перейти в настройки системы, о телефоне, нажать и удерживать несколько секунд номер сборки и затем появится сообщение о том, что Вы теперь разработчик. После этого можно подключить телефон с операционной системой Андроид к компьютеру и работать в программе Android SDK. Эту программу лучше описать в отдельной статье, поэтому не будем пока на ней подробно останавливаться.
Встроенные инструменты разработчика отображают исходный код сайта, позволяют просматривать и отлаживать верстку веб-страниц сайта, HTML и CSS, проверить значения полей, установленные в Javascript, для интерактивных объектов страниц сайта. Инструменты разработчика позволяют также проверить сетевой трафик, потребляемый сайтом, и его быстродействие.
Для того, чтобы посмотреть, как будет выглядеть страница сайта на мобильном устройстве, в десктопной версии панели разработчика нужно выбрать режим эмуляции мобильного устройства.
Структуру HTML страницы можно посмотреть во вкладке Elements. В этой вкладке можно удалить элементы, которые блокируют доступ к содержимому страницы.
Во вкладке Network отображаются сетевые запросы страницы. Они содержат список web-ресурсов, которые загружает страница для отображения своего контента. В этой вкладке можно сортировать картинки по размеру.
Если страница защищена от копирования, с помощью инструментов разработчика можно включить этот режим. Для этого нужно нажать на колесико настроек, найти в списке команду отключить JavaScript.
Это только небольшой набор функций, который обязательно понадобится при тестировании веб форм и при работе с эмулятором для телефона. Как правило, эти умения нужно будет демонстрировать тестировщику с первых дней работы.
Буду рада замечаниям и пожеланиям. Их можно оставить в комментариях.