Знакомство с инструментами разработчика в браузере

Пришло время немного углубиться в то как работает браузер и познакомиться с инструментами веб-разработчика.

Панель инструментов разработчика

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

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

Давайте начнем знакомство с этими продвинутыми возможностями и освоим первый полезный инструмент.

После открытия любой страницы в браузере вы можете нажать сочетакние клавиш Ctrl+Shift+i (Cmd+Shift+i для MacOS) и в большинстве браузеров это откроет панель разработчика. Также эту панель можно открыть кликнув правой кнопкой мыши на любом элементе страницы и выбрав пункт меню Исследовать элемент. Внешний вид панели может немного отличаться в зависимости от браузера который вы используете и его настроек, но в целом вы должны увидеть подобную картунку:

В правой части экрана располагается панель инструментов разработчика. Она включает разные инструменты для детального разбора работы браузера, но в данный момент нас интересует вкладка Элементы или Elements в английской версии браущера.

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

Редактирование HTML. Тег <img>

На панели разработчика вы можете редактировать HTML прямо "на лету". Можно добавлять или удалять элементы. Менять текст внутри блока, а также атрибуты HTML элементов.

Попробуйте самостоятеьно поизучать какие-либо страницы в интернете. Найдите какое-либо изображение и найдите соответвующий HTML-элемент в панели разработчика. На самом деле существует несколько различных способов встроить изображение на страницу, но нас интересует тег <img>.

На этой странице на developer.mozilla.org можно почитать подробнее о том как он работает. Если кратко - то этот тег используется обязательно с атрибутом src который содержит ссылку на изображение в сети интернет. Благодаря этому атрибуту мы можем встроить любое доступное изображение на нашей страницы. Кроме src у тега <img> существуют и другие атрибуты, например:

• alt - для альтернативной подписи, которая отображается если изображение не удастся загрузить по ссылке
• width и htight - для указания ширины и высоты изображения.

Попробуйте самостоятельно добавить элемент <img> с какой-нибудь картинкой из интернета на нашу страницу с которой мы работали в прошлом уроке.