- Регистрация
- 17 Июн 2025
- Сообщения
- 305
- Автор темы
- #1
Всем привет, в этом мануале я постараюсь рассказать вам об использования инструментов разработчика.
Благодаря данному мануалу вы сможете брать абсолютно любой необходимый вам элемент, а также сами работать с сайтом в режиме реального времени, подбирая нужные стили/html код.
Перед началом сразу скажу, что здесь не будет уроков по структуре html или css.
Как открыть инструменты разработчика - F12
Как открыть инструменты разработчика с выделением нужного объекта - ctrl + shift + c
Для начала разберем, что из себя в общем представляют инструменты разработчика, пойдем по порядку:
Мы познакомились со всеми вкладками наших инструментов. Теперь можно поговорить о функционале.
Прежде всего, этот мануал нацелен на начинающих веб разработчиков (или просто любопытных), поэтому мы не будем подробно уходить в техническую часть вроде просмотра производительности сайта и выполнения js кода. Разберем именно копирование элементов.
Будем рассматривать всё так, будто мы хотим взять картинку из блока и её css стиль.
Перед нами картинка и текст под ней, мы хотим взять именно картинку.
Нажимаем ctrl + shift + c и у нас открываются инструменты. Мы видим сразу div блок с этой картинкой и её стиль.
Чтобы скопировать html элемент, нужно кликнуть по нужному правой кнопкой мыши (в нашем случае кликнем на строку с img), у нас откроется большое меню выбора, выбираем Copy -> Copy element. Вставляем его к себе на сайт. Чтобы скопировать css элемент, нажимаем ПКМ по классу (.cardimg) и выбираем copy rule, и у нас скопируется сам класс вместе с правилами ( Правилами в css называют параметры, которые мы прописываем внутри фигурных скобок).
Вставляем на страницу и готово, скопировался нужный нам элемент.
Я постарался объяснить максимально понятно для новичка на максимально легком примере. Если вы хотите увидеть полный гайд на весь функционал инструментов, наберите на этом мануале 20 реакций и я подробно распишу все пункты с примерами работы.
Критику конечно приму и буду изменять мануал если допустил где-то ошибку.
Благодаря данному мануалу вы сможете брать абсолютно любой необходимый вам элемент, а также сами работать с сайтом в режиме реального времени, подбирая нужные стили/html код.
Перед началом сразу скажу, что здесь не будет уроков по структуре html или css.
Как открыть инструменты разработчика - F12
Как открыть инструменты разработчика с выделением нужного объекта - ctrl + shift + c
Для начала разберем, что из себя в общем представляют инструменты разработчика, пойдем по порядку:
Кнопка select an element - идентична ctrl + shift + c
Device toolsbar - предоставляет возможность просмотреть сайт с разных устройств (например телефон, планшет).
Elements - Просмотр HTML/CSS кода сайта.
Console - Просмотр ошибок на сайте, выполнение java script кода.
Sources - доступные для просмотра файлы (для большинства там будут необходимы картинки).
Network - Просмотр сетевых операций которые выполняет сайт
Performance - отображает нагрузку, которую создает сайт на ваш пк.
Memory - Инструменты для просмотра нагрузки выполняемого кода
Application - Панель для очистки данных, кеша и просмотра определенных данных.
Security - Получение информации о сайте, данные протокола, сертификаты и другое.
LightHouse - проверка производительности сайта
Device toolsbar - предоставляет возможность просмотреть сайт с разных устройств (например телефон, планшет).
Elements - Просмотр HTML/CSS кода сайта.
Console - Просмотр ошибок на сайте, выполнение java script кода.
Sources - доступные для просмотра файлы (для большинства там будут необходимы картинки).
Network - Просмотр сетевых операций которые выполняет сайт
Performance - отображает нагрузку, которую создает сайт на ваш пк.
Memory - Инструменты для просмотра нагрузки выполняемого кода
Application - Панель для очистки данных, кеша и просмотра определенных данных.
Security - Получение информации о сайте, данные протокола, сертификаты и другое.
LightHouse - проверка производительности сайта
Мы познакомились со всеми вкладками наших инструментов. Теперь можно поговорить о функционале.
Прежде всего, этот мануал нацелен на начинающих веб разработчиков (или просто любопытных), поэтому мы не будем подробно уходить в техническую часть вроде просмотра производительности сайта и выполнения js кода. Разберем именно копирование элементов.
Будем рассматривать всё так, будто мы хотим взять картинку из блока и её css стиль.
Перед нами картинка и текст под ней, мы хотим взять именно картинку.
Нажимаем ctrl + shift + c и у нас открываются инструменты. Мы видим сразу div блок с этой картинкой и её стиль.
Чтобы скопировать html элемент, нужно кликнуть по нужному правой кнопкой мыши (в нашем случае кликнем на строку с img), у нас откроется большое меню выбора, выбираем Copy -> Copy element. Вставляем его к себе на сайт. Чтобы скопировать css элемент, нажимаем ПКМ по классу (.cardimg) и выбираем copy rule, и у нас скопируется сам класс вместе с правилами ( Правилами в css называют параметры, которые мы прописываем внутри фигурных скобок).
Вставляем на страницу и готово, скопировался нужный нам элемент.
Я постарался объяснить максимально понятно для новичка на максимально легком примере. Если вы хотите увидеть полный гайд на весь функционал инструментов, наберите на этом мануале 20 реакций и я подробно распишу все пункты с примерами работы.
Критику конечно приму и буду изменять мануал если допустил где-то ошибку.