Как да редактирате уеб страници в Safari с помощта на елемент Inspect

Със своя инструмент Inspect Element, Safari ви позволява да бъркате с предния код на всяка уеб страница. Ако искате да тествате как би изглеждала една страница с различен текст или изображения, можете да го направите, като промените кода й с Inspect Element.

Това е просто ръководство, насочено към начинаещи, за да обясни как можете да започнете да експериментирате с Inspect Element в Safari, за да редактирате текст и изображения на уебсайт с минимални познания за кодиране.

Какво е елемент за проверка?

Inspect Element е инструмент за разработчици. Предлага се в Safari, но и в други уеб браузъри като Chrome, Firefox и Edge. С Inspect Element можете да надникнете зад завесата на уебсайт, за да разкриете неговия преден код, като HTML и CSS. Въпреки това, той не ви предоставя видимост на задния край, като неговите бази данни.

Можете не само да видите този код, но и да го настроите. Това означава, че можете да промените външния вид на уебсайт. Можете да замените изображение, да префразирате текст, да използвате различен шрифт, да превключите цветовата му схема и др. Тези редакции обаче са местни. Те няма да се появят на никой друг, освен на вас; те изчезват, след като обновите или се отдалечите от страницата.

Защо трябва да използвате Inspect Element?

Inspect Element е чудесен инструмент, ако сте начинаещ уеб разработчик. Можете буквално да видите кода, който захранва любимия ви уебсайт, като го настройвате както желаете в реална среда. Има много забавни прозрения, които можете да получите от използването на Inspect Element.

Например собствениците на бизнес могат да разгледат ключови думи, включени в уебсайта на конкурент, или дизайнерите могат използвайте Inspect Element, за да идентифицирате шрифт които намират за привлекателни или бързо да тестват различна цветова схема на уебсайта си.

Засега ще се съсредоточим върху редактирането на основите на уеб страница с помощта на Inspect Element.

Как да получите достъп до Inspect Element в Safari

Можете да отворите Inspect Element в Safari, като използвате менюто за програмисти:

1. Отворете Safari.
2. Щракнете върху сафари в горната лента с менюта.
3. От падащото меню изберете Предпочитания.
4. Изберете Разширено опция.
5. Поставете отметка в квадратчето, което казва Показване на меню Разработване в лентата с менюта.

След като изберете тази опция, можете Кликнете с десния бутон на уеб страница и изберете Инспектирай елемента. Като алтернатива можете да изберете Развийте се в лентата с менюта и след това Покажи уеб инспектор.

Как да намерите уеб елементи в Inspect Element

За да започнете да редактирате елемент, Кликнете с десния бутон какво искате да редактирате и щракнете Инспектирай елемента. Това ще отвори прозореца на програмиста, като съответният раздел ще бъде маркиран. Може да откриете, че конкретният елемент, който искате да елементирате (изображението или текстът, да речем) е скрит; за да го намерите, използвайте стрелки отляво, за да разширите вложените секции.

За да стесните избора си, щракнете върху икона на целта от лентата с инструменти Inspect Element. Сега, докато навигирате през кода, той подчертава този раздел на уебсайта. Или можете да използвате курсора си, за да посочите секция на сайта. Това е удобно, когато искате да усъвършенствате нещо конкретно в претъпкана зона на уеб страница.

Как да редактирате текста на уебсайт с помощта на елемент Inspect

За да направите част от текста редактируема, след като го намерите в изходния код на сайта, кликнете два пъти то. Можете да въведете нов текст директно в кода или да изтриете съществуващ текст. Когато редактирането приключи за даден низ от текст, натиснете Въведете, и текстът на уеб страницата ще се промени.

Наистина е толкова просто! Единствените случаи, когато това няма да работи, са когато текстът всъщност е част от изображение, като лого.

Как да редактирате изображения на уебсайт с помощта на елемент Inspect

Докато изображенията се показват визуално за вас в предния край, в кода на уебсайта те се показват като връзки. Можеш Кликнете с десния бутон и изображение и изберете Инспектирай елемента за да прескочите до мястото, където това изображение е в кода. Изображенията на уебсайтове обикновено имат JPG, GIF или PNG файлови разширения, макар и не изключително.

Кликнете два пъти тези низове от изображения и можете да ги редактирате или просто да ги запишете във вашата система, ако желаете. Ако искате да замените изображението, изключете го за URL адрес на заместващо изображение. Или можете да изтриете кодовия низ изцяло, за да премахнете изображението от изглед.

Вникнете в уебсайтове с помощта на Safari

Инструментът Inspect Element на Safari ви позволява лесно да намирате и променяте кода, съответстващ на текст и изображения, което е толкова лесно, колкото превключването на текст или URL низ. След като приключите с редактирането на уебсайт с Inspect Element, просто опреснете страницата и всичко ще се върне към нормалното.

Как да промените потребителския агент на вашия браузър и уебсайтове за хитрост

Прочетете Следващото

За автора