YouTube замедляют, а ваши автовебинары там? Перенести их на GetCourse, чтобы не просесть в продажах
ИНСТРУКЦИЯ
ИИ-бот GetCourse
ИИ-бот
Добрый день!
Я - бот-помощник по документации платформы Getcourse, помогу вам найти ответ на справочный вопрос по работе системы. Пожалуйста, сформулируйте свой вопрос одним сообщением.
Статья была полезной?
Важно
Статья предназначена для продвинутых пользователей, имеющих базовые знания верстки (HTML, CSS и JavaScript). Статья носит ознакомительный характер и не является исчерпывающим руководством по написанию кода. Сотрудники технической поддержки не оказывают консультаций по написанию кода или по внесению изменений в написанный вами код.
Если информации из данной статьи недостаточно для решения вашего вопроса, рекомендуем воспользоваться услугой платной верстки от специалистов GetCourse.
Инструменты разработчика (DevTools) — это специальный режим браузера, в котором вы можете:
- быстро оценить внешний вид страницы на устройствах с разным размером экрана;
- найти ошибки в коде;
- проверить, как смотрятся разные варианты оформления элементов страницы;
- поправить некорректное отображение верстки и т.д.
В статье рассмотрим, как использовать инструменты разработчика в браузере Google Chrome*, чтобы решить описанные выше задачи во время верстки страниц на GetCourse.
*в других браузерах внешний вид и количество возможностей может отличаться
Как перейти в режим разработчика
Вы можете перейти к инструментам разработчика несколькими способами, например:
- С помощью горячих клавиш:
- F12 для Windows,
- Cmd+Shift+I для Mac.
- Кликните правой кнопкой мыши на странице и нажмите «Просмотреть код».
![Переход к DevTools Переход к DevTools](https://fs02.getcourse.ru/fileservice/file/download/a/116/sc/421/h/10b3d712765d1371577808771eeb7136.gif)
- Нажмите кнопку «Настройки и управление Google Chrome» — вкладка «Дополнительные инструменты» — «Инструменты разработчика».
![Вкладка «Инструменты разработчика» Вкладка «Инструменты разработчика»](http://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/5f8c07eecd4aa267e051191f1cfe64d9.jpg/s/s1200x/a/116/sc/293)
Режимы работы с DevTools
При переходе в режим разработчика вы увидите два рабочих поля:
- HTML-код страницы,
- CSS-код страницы.
![HTML и CSS HTML и CSS](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/277ac03d2f42f3a9196fe705bd12f067.jpg/s/s1200x/a/116/sc/143)
Работу с ними мы рассмотрим в разделах статьи ниже. Кроме них вам также доступно два режима работы:
- выбор элемента на странице — помогает быстро выбрать нужный элемент на странице и получить о нем информацию;
- панель инструментов устройств (или эмулятор устройств) — с его помощью вы можете оценить внешний вид страницы на устройствах с разным экраном.
Как выбрать элемент на странице
Для этого:
- Нажмите на маленькую иконку стрелки.
![Переход в режим выбора элемента Переход в режим выбора элемента](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/2873ab952fab2dc7ea6fb279b187ee7a.jpg/s/s1200x/a/116/sc/346)
- Наведите курсор на интересующий вас элемент. Вам отобразится окошко с краткой информацией по элементу, например, сколько места в пикселях он занимает, какой у текста шрифт, цвет и т.д.
![Окошко с краткой информацией по элементу Окошко с краткой информацией по элементу](http://fs-thb01.getcourse.ru/fileservice/file/thumbnail/h/8fb632482a842717f3fd769451e079c5.jpg/s/s1200x/a/116/sc/23)
- Нажмите на элемент мышкой — вы сразу перейдете к нему в окне с HTML-кодом.
![Переход к элементу в окне с HTML Переход к элементу в окне с HTML](http://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/d2092afebeb3c71f864016fc2e4c8310.jpg/s/s1200x/a/116/sc/230)
Аналогичный способ перехода к элементу в HTML-окне — нажать правой кнопкой мыши на интересующем элементе и выбрать «Просмотреть код».
![Просмотреть код элемента Просмотреть код элемента](https://fs01.getcourse.ru/fileservice/file/download/a/116/sc/2/h/55e03254874e0b3477c325a600b9fd67.gif)
Эмулятор мобильных устройств
С помощью этого режима вы можете оценить, как страница будет смотреться на устройствах с разным размером экрана (на смартфонах или планшетах).
Важно
Режим не заменяет полностью тестирование страницы непосредственно на каком-либо устройстве, т.к. не учитывает всех тонкостей браузера выбранного устройства (например, браузера Safari при выборе iPhone).
Для перехода в режим нажмите на иконку мобильных устройств.
![Переход к эмулятору устройств Переход к эмулятору устройств](http://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/7a89c8f9c62ef8d049083af58ec81d9b.jpg/s/s1200x/a/116/sc/273)
Вы попадете в эмулятор мобильных устройств. Здесь вы можете:
- в выпадающем меню выбрать одно из устройств из списка,
![Выпадающее меню со списком устройств Выпадающее меню со списком устройств](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/e417484da605d70075d42d42485ea2ed.jpg/s/s1200x/a/116/sc/94)
- добавить устройство в список и затем выбрать его,
![Переход к списку всех устройств Переход к списку всех устройств](http://fs-thb01.getcourse.ru/fileservice/file/thumbnail/h/dee88bd034665818fdbe7a664a495ae1.jpg/s/s1200x/a/116/sc/256)
![Добавление устройств в список Добавление устройств в список](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/312f22dd3d533a0559d870df6e95a4f9.jpg/s/s1200x/a/116/sc/152)
- выбрать в выпадающем списке «Отзывчивое устройство» и задать собственные значения размера экрана устройства,
- задать масштаб отображения экрана устройства.
![Собственные значения и масштаб экрана устройства Собственные значения и масштаб экрана устройства](http://fs-thb01.getcourse.ru/fileservice/file/thumbnail/h/ae674a36aa9c698e2e8a471302873de0.jpg/s/s1200x/a/116/sc/151)
Обратите внимание
В режиме эмулятора устройств изменится поведение курсора, т.к. на мобильных устройствах курсора как такового нет, взаимодействие происходит путем нажатия или скролла пальцем/стилусом.
Поэтому если в десктопной версии страницы были, например, реализованы эффекты при наведении курсора, то в мобильной версии вы их не увидите.
![Эффекты при наведении курсора Эффекты при наведении курсора](https://fs02.getcourse.ru/fileservice/file/download/a/116/sc/238/h/01e2458e1ee7f1006dfb77cdc7d7154a.gif)
![Эффекты отсутствуют, т.к. нет курсора Эффекты отсутствуют, т.к. нет курсора](https://fs22.getcourse.ru/fileservice/file/download/a/116/sc/31/h/7441ae3546696c402f6496967dab95f9.gif)
Работа с кодом на вкладке «Элементы»
Всю основную работу с версткой вы можете вести на вкладке «Элементы», например:
- изменить содержимое HTML-элемента,
- скопировать или удалить элемент,
- изменить CSS-свойство элемента (шрифт, цвет и т.д.),
- протестировать оформление разных состояний элемента (например, при наведении курсора).
Рассмотрим данные возможности ниже ↓
![Вкладка «Элементы» Вкладка «Элементы»](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/90e055a72c76f75ffff85657b0c68761.jpg/s/s1200x/a/116/sc/124)
Как поменять содержимое HTML-элемента
Вы можете изменить содержимое HTML-элемента, чтобы быстро оценить, как будут смотреться разные варианты выбранного блока. Рассмотрим на примере кнопки. Для этого:
- В режиме выбора элемента нажмите на кнопку — таким образом вы сразу перейдете к ней в блоке с HTML-кодом.
![Выбор элемента Выбор элемента](https://fs01.getcourse.ru/fileservice/file/download/a/116/sc/144/h/fb09215a4a63582ec036547f7f3ca17f.gif)
- Нажмите клавишу F2 — вы перейдете в режим изменения блока.
- Внесите изменения и нажмите на любую строчку в HTML-коде, чтобы они отобразились.
В нашем примере мы добавили больше текста в кнопку, чтобы посмотреть, как она себя поведет и как будет выглядеть.
![Результат изменений Результат изменений](http://fs-thb01.getcourse.ru/fileservice/file/thumbnail/h/204fe37a9194eba50aa6f8950feb4bac.jpg/s/s1200x/a/116/sc/331)
Важно
Примененные изменения не сохранятся, не будут видны другим пользователям и будут сброшены, когда вы обновите страницу. Их сохранение описали в разделе → [Применение изменений к коду].
Как скопировать или удалить элемент
Чтобы скопировать элемент:
- Выберите его в режиме выбора элементов.
- Нажмите на него правой клавишей мыши — «Повторяющийся элемент».
Элемент скопируется рядом с оригиналом.
![Копирование элемента Копирование элемента](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/4b72c9be02efaee0ed4d530721aaa998.jpg/s/s1200x/a/116/sc/330)
![Элемент скопировался рядом с оригиналом Элемент скопировался рядом с оригиналом](http://fs-thb01.getcourse.ru/fileservice/file/thumbnail/h/88ccfe9adea90e5a802f95676b57b85b.jpg/s/s1200x/a/116/sc/313)
Чтобы удалить элемент:
- Выберите его в режиме выбора элементов.
- Нажмите на него правой клавишей мыши — «Удалить элемент» или клавиша Delete на клавиатуре.
![Удаление элемента Удаление элемента](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/f382f6867261e379f0a8dcb091e033e0.jpg/s/s1200x/a/116/sc/103)
Важно
Примененные изменения не сохранятся, не будут видны другим пользователям и будут сброшены, когда вы обновите страницу. Их сохранение описали в разделе → [Применение изменений к коду].
CSS-свойства элемента: как изменить размер шрифта, добавить подчеркивание и т.д.
С помощью инструментов разработчика вы можете:
- быстро изменить свойства элемента, чтобы оценить, как он будет смотреться в другом оформлении;
- добавить новое свойство с той же целью.
Чтобы изменить свойство:
- Выберите элемент — в отдельном окне на вкладке «Стили» вы увидите все его свойства, например, цвет, размер, шрифт и т.д.
![Свойства элемента Свойства элемента](http://fs-thb01.getcourse.ru/fileservice/file/thumbnail/h/e8a5740192a008e196e0e102ae9cacf8.jpg/s/s1200x/a/116/sc/185)
- Измените интересующий вас параметр. Например, для заголовка можно изменить размер шрифта, прописав его значение или увеличив/уменьшив до нужного размера с помощью стрелок на клавиатуре.
![Увеличение размера шрифта Увеличение размера шрифта](https://fs02.getcourse.ru/fileservice/file/download/a/116/sc/399/h/5b9d4cd66ef2369e7c2a5dad01fee99b.gif)
Также вы можете добавить новое свойство элементу. Для этого:
- Выберите элемент.
- Нажмите на блок CSS с свойствами нужного блока.
- Пропишите новое свойство.
![Добавление нового свойства Добавление нового свойства](https://fs18.getcourse.ru/fileservice/file/download/a/116/sc/310/h/54d39997fe0a878a8eee2aee3e92d0e0.gif)
Важно
Примененные изменения не сохранятся, не будут видны другим пользователям и будут сброшены, когда вы обновите страницу. Их сохранение описали в разделе → [Применение изменений к коду].
Как протестировать разные состояния элемента (при наведении курсора и т.д.)
Если вы используете на странице эффекты для разных состояний элементов (например, при наведении курсора, при нажатии и т.д.), то оформление этих состояний также можно протестировать с помощью инструментов разработчика.
Например, у нас есть кнопки, при наведении на которые меняется их цвет. Мы хотим посмотреть, как будет смотреться другой цвет. Для этого:
- Выберите элемент.
- Нажмите на вкладку «: hov» и выберите нужное состояние элемента. В нашем примере нужно состояние при наведении курсора — «hover».
![Выбор состояния при наведении курсора Выбор состояния при наведении курсора](https://fs24.getcourse.ru/fileservice/file/download/a/116/sc/278/h/4bddb4b222fe3db6a36e56ef0639c303.gif)
- Найдите строку с цветом. Если кода на вкладке «Стили» много, можно перейти на вкладку «Вычисленные» — здесь будет отображаться только тот код, который применен непосредственно к данному объекту.
![Цвет на вкладке «Стили» Цвет на вкладке «Стили»](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/89f43277a685bb9115f822e20fe6e764.jpg/s/s1200x/a/116/sc/70)
![Цвет на вкладке «Вычисленные» Цвет на вкладке «Вычисленные»](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/3d9f48780a8f41c98fdf61c637e8cfba.jpg/s/s1200x/a/116/sc/316)
- Измените цвет с помощью палитры. На вкладке «Вычисленные» для этого нужно предварительно нажать на стрелку, которая перебросит вас на нужное место кода на вкладке «Стили».
![Изменение цвета Изменение цвета](https://fs22.getcourse.ru/fileservice/file/download/a/116/sc/507/h/82433d756eb3fc406092f1401c421c79.gif)
Важно
Примененные изменения не сохранятся, не будут видны другим пользователям и будут сброшены, когда вы обновите страницу. Их сохранение описали в разделе → [Применение изменений к коду].
Как найти ошибки в коде
В режиме разработчика вы можете увидеть ошибки, допущенные в коде. Если какой-то элемент отображается не так, как должен, перейдите к нему и обратите внимание на строки со знаком восклицания в желтом треугольнике — так отмечаются ошибки:
![Ошибки отмечены знаком восклицания Ошибки отмечены знаком восклицания](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/aa9b69d97e93f4890a8ab4fe73a671c6.jpg/s/s1200x/a/116/sc/265)
Не для всех ошибок можно посмотреть вариант исправления сразу на вкладке «Стили». Иногда придется сразу применить исправление к коду, чтобы увидеть результат. Как применить изменения к коду, рассмотрим в следующем разделе ↓
Применение изменений к коду
Если на вашей странице добавлено множество блоков с кодом, с помощью инструментов разработчика вы можете быстро найти нужную строчку кода и изменить ее, не пересматривая все блоки.
Внести изменения могут:
- владелец аккаунта,
- администратор,
- сотрудник с правом «Может управлять CMS».
Для этого:
- Выберите элемент.
- Найдите свойства элемента, которые нужно изменить.
- Справа будет отображаться номер строки кода, где прописаны данные свойства — нажмите на него.
![Переход к нужной строке кода Переход к нужной строке кода](https://fs16.getcourse.ru/fileservice/file/download/a/116/sc/66/h/23cee30c9b897992128647b34cd4675a.gif)
- От нужной строки (в нашем примере 414) поднимитесь вверх до HTML-тегов. В них будет указан код блока — «data-code».
- Скопируйте значение кода блока.
![Код блока Код блока](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/179da08a2fd4e8476872fa0c7940b549.jpg/s/s1200x/a/116/sc/112)
- Перейдите в режим редактирования страницы.
- Откройте инструменты разработчика на вкладке «Элементы» и нажмите Ctrl+F для вызова строки поиска.
- Вставьте скопированный ранее код блока в поисковую строку — блок с нужным кодом подсветится на странице.
![Блок с кодом подсветится Блок с кодом подсветится](https://fs18.getcourse.ru/fileservice/file/download/a/116/sc/267/h/ca5f0607d9ab3721f23d4bb80c0ba0e8.gif)
- Откройте настройки и найдите нужный код. Это можно сделать через поисковую строку браузера.
- Вставьте или измените код, нажмите «Сохранить» и опубликуйте изменения.
![Применение и публикация изменений Применение и публикация изменений](https://fs19.getcourse.ru/fileservice/file/download/a/116/sc/318/h/f8ffd1b96e8e47475d2a49be4e62c48f.gif)
Частые вопросы:
В следующей статье разбираемся, что такое прелоадер и как с помощью стороннего кода добавить его на страницу → «Прелоадер: как добавить на страницу экран загрузки».
авторизуйтесь