Обикновено при редактиране на уеб страница използваме специфичен инструмент за редактиране като Adobe Dreamweaver, CoffeeCup, Bluefish или някой от другите инструменти за разработка. Но какво да кажем, ако ние просто мозъчна атака или искаме да изпробваме нещо на страница на живо? Бихме могли да направим копие на страницата в нашия инструмент за избор и да си поиграем с това. Или бихме могли да го направим в нашия уеб браузър. Този урок ще ви покаже как да редактирате уеб страница във вашия браузър.
Наричан като Инструменти за разработчици, Firefox извиква функцията Inspect Element, докато Chrome я нарича Inspect. Така или иначе, това е начин браузърът да надникне зад блясъка на вашия дизайн и да разгледа кода, който го управлява. Тази функция е доста добре позната и се използва много. Това, което не е толкова добре известно, е възможността да правите промени в този код в движение.
Всяка промяна, която направите, няма да бъде запазена и няма да повлияе на живо. Ако не искате да заредите страницата в инструмента си за програмисти, това е чист начин да експериментирате.
Редактирайте всяка уеб страница в браузъра си
Dreamweaver и инструменти като него имат вграден емулатор на браузър, който симулира какъв дизайн ще изглежда в различни браузъри. Колкото и да са добри, те не винаги са точни и често при стартирането на сайт установявате, че това, което изглеждаше фантастично във вашия инструмент за програмисти, изглежда малко по-различно в самостоятелен браузър.
Обикновено ще стартирате сайта на вътрешен уеб сървър и тествате в браузър, преди да стартирате на живо само по тази причина. Ако една страница вече е на живо или просто искате да опитате нещо, няма нужда да я копирате и зареждате в инструмента си за разработка, можете просто да използвате Инструмента за разработчици на браузъра.
Използвам Firefox, така че ще ви покажа как да го използвате. Chrome обаче е почти същото.
- Отворете уеб страница, с която искате да експериментирате, в браузъра си.
- Щракнете с десния бутон навсякъде на страницата и изберете Инспектиране.
Трябва да видите страницата си разделена на две, като в долната част ще се появи нов прозорец с някакъв код в него. Този код е движещата сила на страницата, която сте избрали. Различните елементи на страницата са достъпни от раздели в горната част на долния раздел. Например в Firefox виждаме Inspector, Console, Debugger, Style Editor и т.н.
Ако прокарате курсора върху редовете в долния прозорец, ще видите различни части от подчертаването на уеб страницата. Редът на кода, на който сте по време на осветяването, е кодът, който влияе върху тази част от страницата.
- Ако искате да си поиграете с това как изглежда страницата, опитайте редактор на стилове.
- Ако искате да си поиграете с това как работи страницата, опитайте конзола или достъпност.
- Ако искате да отстраните грешките или да разрешите проблем, използвайте конзола или отстраняване на грешки
Производителността е полезна за SEO на място, но паметта, мрежата и съхранението не се използват толкова много.
Не забравяйте, че можете да се забърквате в Инструментите за програмисти колкото искате и това няма да повлияе на сайта. Всякакви промени се правят само в начина, по който страницата се показва във вашия отделен браузър, вие не засягате самия уебсайт. След като затворите инструмента, всички промени се губят.
Правяне на промени в страница
Сега знаете, че можете да промените всичко, което харесвате, без да засягате действителния уебсайт, нека да се забавляваме малко. Намерете елемент на страницата, който искате да редактирате. Можете да промените шрифт, цвят на шрифта, фоново изображение или каквото ви хареса. За този пример ще променя цвета на шрифта на заглавието на банера.
- Щракнете с десния бутон върху точния елемент, който искате да промените, и изберете Инспектиране.
- Маркирайте реда с „заглавие“ или „Н1“, така че текстът да бъде подчертан в горния прозорец.
- Навигирайте вляво два панела и намерете цвета на шрифта.
- Променете стойността на нещо различно или изберете цветната точка, за да използвате селектор.
Промяната ви ще се появява динамично, докато завършите промяната. Можете да промените цвят, размер, шрифт, фон и всичко за шрифта. Не можете да запазите работата, но промените ще останат за тази сесия.
Можете да промените всичко за страницата, което е идеално, ако имате идея и искате бързо да я проверите, преди да стартирате всички приложения за разработка. Всичко, което трябва да направите, е да запомните какви промени сте направили и къде, тъй като не можете да ги запазите тук. Ще трябва да направите екранна снимка или да запишете промените и да ги възпроизведете в рамките на инструментите си за разработчици, за да ги залепите.
Редактирането на уеб страница във вашия браузър е чист начин да експериментирате или да играете със страници. Това е и добър начин да научите малко за уеб разработката, без да се налага да купувате скъпи инструменти за разработчици. Сега знаете как, отидете и играйте!
