Имате въпрос как да видите изходния код на визуалния елемент на вашия Chromebook? За тази цел можете да използвате специалните DevTools в приложението Google Chrome или на всяка страница в браузъра. DevTools е списък със специални инструменти за разработчици, които са вградени в браузъра Google Chrome. Той позволява на потребителите да редактират страници в движение и да следят за евентуални проблеми.
Как да използвате Inspect Element в Chromebook
За Chromebook браузърът по подразбиране е Google, а за да отворите инструментите за разработчици на това устройство, трябва.
- Отворете желаната страница
- Кликнете върху трите точки в горния десен ъгъл на приложението
- Изберете „Още инструменти„
- Кликнете върху „Инструменти за разработчици„.
Алтернативни начини за достъп до тази функция са натискане на бутона F12 или щракване с десния бутон на мишката върху желания елемент.
Това е универсална инструкция, която се прилага за повечето браузъри в Windows или друга система.
Как да използвате Inspect Element на Mac или Iphone
Възможно ли е да направите същото с Mac или дори с iPhone? Просто трябва да следвате няколко прости стъпки по-долу:
Как да го използвате в Mac
Ако имате Mac, най-добрият браузър за вас е Safari. Отварянето на инструментите за разработчици в този браузър е малко по-различно от същия процес в Chrome или Firefox. Ще трябва да:
- Отваряне на браузъра
- Щракнете върху Safari върху името на раздела
- Изберете „Предпочитания„
- След това щракнете върху иконата за разширени зъбни колела, която се намира в горната част на екрана.
- Поставете отметка в квадратчето до Покажи менюто Разработване в лентата с менюта
След като направите това, елементът Inspect ще бъде достъпен на вашите уеб страници. Можете също така да го извикате с CMD + Option + I.
Как да го използвате в iPhone
Ако искате да проверите как изглежда мобилната версия на уебстраницата на вашия iPhone с помощта на функцията Inspect Elements, първо трябва да активирате Web Inspector за вашето iOS устройство:
- Отидете в Настройки
- Изберете приложението Safari
- Превъртете до дъното и щракнете върху „Разширено меню“.
- Сега включете квадратчето за отметка до „Web Inspector“.
Освен това трябва да активирате менюто за разработчици на вашия Mac, както е указано по-горе. След като активирате тези функции на вашето iOS устройство и Mac, трябва да можете да видите менюто за разработчици в горната част на вашия Mac. Трябва да щракнете върху него, за да видите прикачения iPhone и отворената на него уеб страница. Когато превключите на друга страница, превключвате и прозореца Web Inspector за тази страница на вашия Mac
Какво е Elemental Panel
Първото нещо, което трябва да знаете, е какво представлява панелът на елементите. Ако искате да промените дизайна или други външни елементи на страницата, трябва да редактирате CSS или HTML. Можете да направите това с помощта на инструмент за разработчици, наречен панел „Елементи“. Той ще ви позволи да проверявате и променяте страницата си от front-end. Някои от елементите, които можете да видите там, са :
- Информация за изображението, като например неговия размер и източник.
- CSS панел – тази опция се използва за промяна на външния стил на страницата. Тук можете да променяте параметри като шрифтове, размери, цветове
- DOM информация или DOM панел С тази опция можете да контролирате външния вид на страницата. Можете да променяте позицията на елементите и да преминавате изцяло към HTML файловете
- Панелът на конзолата представя новите функции в инструментите за разработчици
- Слушатели на събития на елемента
- HTML коментари
- Обратна връзка
Проверка на визуализираните и естествените размери на дадено изображение
Много често се налага да получите информация за дадена снимка в уеб страница, можете да я „инспектирате“. Това ви дава възможност да разберете например размера на изображението. За да направите това, трябва да поставите показалеца на мишката върху този IMG, докато се намирате в дървото DOM
Проверка на конкретно използвано изображение от набор от източници (srcset)
След това можете да проверите коя версия на изображението е била заредена и какъв е точният източник на srcset. Сърцевината ще помогне на браузъра да поиска версията на изображението с най-малък размер, която е малко по-голяма от истинското изображение. Това се използва за показване на набор от изображения с различни резолюции, от които браузърът може да избира. Първо, изберете елемента IMG, след което проверете информацията $0.currentSrc в конзолата. Имайте предвид, че можете да увеличите характеристиките на изображенията с помощта на srcset, ако трябва да използвате устройства с по-висок DPI.
