Как редактировать страницу в прямом эфире с помощью Firefox Web Developer Tool

Ваш сайт выглядел бы лучше, если бы логотип был перемещен на пять пикселей вправо или имел синий фон? Будет ли добавление границ или теней к фотографиям в популярных сообщениях сделать их более заметными? Современные браузеры, такие как Firefox, оснащены инструментами веб-разработчика, которые позволяют вам проверять внутреннее функционирование сайта и вносить изменения в реальном времени, наблюдая за результатами в режиме реального времени.

Из этого руководства вы узнаете, как использовать инструменты создания веб-сайтов Firefox для редактирования любого сайта в режиме реального времени.

  

Note: Это руководство применимо к большинству браузеров, включая Chrome, Opera и Safari.

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

Инструменты для веб-мастеров Firefox представляют собой полный набор инструментов, от отображения всех элементов DOM до измерения его скорости. Все, что вам нужно, это инструменты «Инспектор» и «Редактор стилей» для этого урока.

Запустите Firefox и посетите любой сайт. В меню гамбургера Firefox (по умолчанию в правом верхнем углу) выберите «Веб-разработчик -> Редактор стилей» или нажмите Shift + F7 на клавиатуре.

Панель разработчика Firefox появится на одной стороне окна, обычно внизу. Вы можете изменить его положение, нажав кнопку с тремя точками в верхнем правом углу панели и выбрав «Док вправо / влево» или «Отдельное окно».

Онлайн редактирование сайта в отдельном окне Firefox

Note: Этот урок не показывает, как кодировать HTML и CSS. Здесь вы можете изучить основы.

Проверка товара

Вы должны быть в состоянии идентифицировать его, чтобы повлиять на внешний вид предмета. Нажмите первую кнопку на панели инструментов или нажмите Ctrl + Shift + C на клавиатуре, чтобы включить режим выбора элемента.

Сайт редактирования в реальном времени с помощью сэмплера Firefox

Наведите курсор на сайт, чтобы выделить различные элементы сайта. Рядом с ними вы увидите их основной идентификатор во всплывающем окне.

Живое редактирование сайта в Firefox Выберите логотип

Если щелкнуть элемент, он будет выбран на вкладке «Инспектор» в Инструментах разработчика.

Живое редактирование сайта с Firefox Inspector

Когда вы найдете элемент, который хотите улучшить, щелкните правой кнопкой мыши на его записи в Инспекторе инструментов разработчика и выберите во всплывающем окне «Копировать -> Селектор CSS».

Живое редактирование сайта с помощью Firefox Copy Selector

Начать редактирование в реальном времени

После копирования селектора элемента CSS в буфер обмена вернитесь на вкладку «Редактор стилей» в окне «Инструменты разработчика». Нажмите кнопку «+» в верхнем левом углу, чтобы «Создать и прикрепить новую таблицу стилей к документу».

Страница редактирования в реальном времени с новой таблицей стилей Firefox

Вставьте CSS-селектор в новую пустую таблицу стилей. Добавьте пробел, затем набор открывающих и закрывающих скобок.

Живое редактирование сайта с помощью Firefox Paste Selector

В CSS внешний вид элемента определяется «наведением на него» с использованием идентификатора, такого как CSS-селектор, а затем добавлением нескольких правил, влияющих на его внешний вид, сгруппированных в фигурные скобки. Все, что находится между открывающей и закрывающей скобками, влияет на «цель».

Например, если вы добавите правило ниже:

Это скроет предмет, в котором он используется. Вероятно, это самый простой способ узнать, что вы нацеливаете нужный элемент на свой сайт. Если оно исчезнет, ​​это действительно то, что вам нужно, и вы можете удалить это правило, чтобы попробовать другие. Если его нет, пришло время вернуться к Инспектору и выбрать что-то еще.

Живое редактирование сайта в Firefox Изменить цвет фона

Мы не будем здесь показывать, как кодировать CSS, но вы можете поиграть с некоторыми популярными правилами, такими как:

граница: 2px solid rgba (255,0,0,0,5); цвет: # 333; Размер шрифта: 20px;

Вы заметите, что элемент сайта изменяется при добавлении правил в таблицу стилей CSS.

Наконец, помните, что ничего не сохраняется. Если вам нравится внешний вид исправлений, скопируйте код в файл TXT или в ваше любимое приложение для создания заметок, чтобы вы или дизайнер / программист могли добавить его в таблицу стилей вашего сайта, чтобы вносить постоянные изменения. Если вы хотите узнать о CSS, посмотрите онлайн-игры, которые помогут вам освоить этот навык.

Читать дальше:

Эта статья полезна?