Inspect Element – как временно да редактираме една уеб страница

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

Какво е Inspect Element?

Първо накратко да си отговорим на други въпроси, за да стигнем до необходимостта да познаваме Inspect Element.

Какво е изходен код на уеб страница?

Това е кодът, написан в HTML, който позволява на браузъра да организира текстовете, връзките и изображенията на документ, както ги виждаме на екрана. Потребителите не виждат този код, а само крайния резултат.

Достъпът до кода обаче е много полезен за тези, които разработват и изграждат уебсайтове, както и за други специалисти.

Как да видим HTML изходния код на уеб страницата?

За да видим изходния код на уеб страница или HTML документ, използваме браузъра си. Почти всички имат функция, която позволява на потребителя да види кода на страницата. Достъпна е по различен начин от всеки браузър.

Необходимост от Inspect Element

Това е много мощен инструмент, от който имат нужда много специалисти от дигиталните професии, например:

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

Уеб дизайнерът прави анализ на изобразяването на определена част от уеб страница.

Маркетинг и SEO специалистът като част от работата си наблюдават ключовите думи на конкурентите. Или пък искат да видят дали зареждането на сайта не е започнало да става твърде бавно.



(adsbygoogle = window.adsbygoogle || []).push({});

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

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

А може би просто от любопитство искаме да разгледаме кода на уеб страницата.

Как да отворим Inspect Element

Има няколко начина за достъп до Google Chrome Inspect Element. Отворяме уеб сайта, който искаме да опитаме да редактираме и отворяме инструментите Inspect Element по един от следните три начина:

• 1-ви начин: Кликваме с десния бутон някъде в уеб страницата и в долната част на менюто в новия прозорец ще видим Inspect Element. Избираме го.
• 2-ри начин: Кликваме върху иконата с 3 подредени точки най-вдясно на лентата с инструменти на Google Chrome, и после  Още инструменти (More tools), избираме Инструменти за разработчици (Developer tools).
• 3-ти начин: Най-бързо става с клавишни комбинации – Ctrl+Shift+C (Windows)

По подразбиране инструментите за разработчици се отварят в панел в десния край на браузъра. Ще се покаже раздела Elements – това е известният инструмент Inspect Element.

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

Можем да направим целия панел Инструменти за разработчици по-широк или по-тесен, като задържим курсора над крайното му ляво очертание и след като се появи знакът↔ да плъзнем панела наляво или надясно. Същото става и с горния панел, където е частта с HTML кода, можем да я разширим, приплъзвайки надолу.

Вече сме в Inspect Element

Това е инструментът, който се отваря най-напред, когато стартираме Developer tools в повечето браузъри.

Вече сме в Inspect Element, разполагаме с полезни инструменти, за да направим всеки сайт да изглежда точно както искаме. Осигуряват ни възможност да проверяваме CSS и HTML кода, както и да редактираме CSS в движение, като виждаме ефектите от промените в реално време.

Front-End разработчиците използват този инструмент, за да променят външния вид на дадена уеб страница и да експериментират с нови идеи. като добавят временни редакции към CSS и HTML файловете на сайта.

Във видеото показвам елементарни промени в CSS в реално време върху една моя публикация. Кликни долу вдясно за субтитрите.

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

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

Как да променим част от текст или как да открием парола скрита зад звездички в Inspect Element, вече обясних в предишна публикация.

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

Същото се отнася за виртуалните промени в текста, за да проверим, как ще изглежда например друг параграф, на мястото на сегашния, или друго изображение на мястото на настоящето и т.н.

Заключение

Съществуват още много други функции, достъпни чрез Инструментите за разработчици. Можем чрез кликване на иконката за мобилно устройство да извършим Емулация, която ни позволява да преглеждаме уеб страница, както би изглеждала на различни устройства, с предварително зададени настройки за популярни такива. Следват още функции, както показвам в оградените с червено правоъгълници.

Интересуваш се как можеш да използваш Developer tools в Android ? Прочети това ръководство за дистанционен debug на съдържание на живо върху устройство Android от твоя компютър Windows, Mac или Linux.

Източник на основното изображение Pixabay.com.