Как использовать дебаггер для сайта | Уроки HTML, CSS

Привет друзья! Сегодня вам расскажу, как анализировать код, какой инструмент для этого нужен. Потому что, используя правильные инструменты, вы сможете посмотреть, например, какие элементы дизайна, скопировать себе этот код или поменять его под себя, изменить цвет, добавить какое-то оформление, и проверить это сразу все на живую. Для этого используется встроенный в браузер дебаггер – отладчик кода, который и позволяет посмотреть код элементов, а также события, которые происходят при нажатии на эти элементы. Это очень удобно! Когда, например, я использую такой инструмент?! Обычно, когда я создаю страницу, добавляю на нее разные элементы – кнопки, области, картинки, менюшки и т.д, то хочу подобрать размер и цвет их или их местоположение - чтобы выровнять или расположить более лучшим образом – и для этой цели – я естественно запускают дебаггер. Для запуска дебаггера/отладчика нужно кликнуть на элементе правой кнопкой мыши и выбрать «исследовать элемент», тогда открывается окошко в котором я могу уже изменять параметры объектов - этих элементов которые находятся на странице и подбирать оптимальных параметры, которые меня устраивают. Но, как я и говорил, естественно, вы можете посмотреть чужой код, посмотреть чужой дизайн и сделать свой дизайн по аналогии или лучше. Также дебаггер очень сильно помогает, когда вы скопировали страницу сайта и не знаете как посмотреть почему на ней отображаются не все элементы - по сути также кликаем правой кнопкой мыши на элементе и берем «исследовать элемент». В данном случае здесь мы берем закладку Network (сети) и смотрим какие из элементов на странице не загрузились. Есть мы видим что имеется ошибка 404 - то именно здесь и нужно подправить путь, например, к нашим стилям либо к javascript скриптам, если ошибка 200 - то это все ОК и элемент отлично загрузился. ******************************** Если Вам понравилась публикация, подписывайтесь на канал! Ставьте лайки, тогда будем еще писать такой контент :) Если есть вопросы или пожелания, то пишите, в комментариях. ******************************** #Debugger #Отладка #код #отладчик #обучение #программирование #программист #образование #технологии #анализ Приходите к нам на сайт: Подписывайтесь на наш канал в YouTube: Вступайте в нашу группу ВК: Задавайте вопросы – постараюсь ответить 😊 Удачи в таких классных начинаниях!