Какво да знаете
-
В Safari: Щракнете с десния бутон върху уеб страница и изберете Инспектиране на елемент.
- В Chrome можете да щракнете с десния бутон и да щракнете върху Проверка.
- За да активирате функцията в Safari: Safari > Preferences > Advanced > проверете Показване на менюто Разработване в лентата с менюта кутия.
Тази статия ви учи как да проверявате елемент на уебсайт на Mac. Разглежда как да направите това чрез Safari и Google Chrome.
Как използвате функцията Inspect Element на Mac?
Преди да инспектирате елементи на Mac, когато използвате Safari, трябва да активирате менюто за програмисти в браузъра. Ето как да го включите и какво да направите, за да проверите елемент.
Ако можете да видите Разработване между отметки и прозорец, менюто за разработчици вече е активирано и можете да преминете към стъпка 4.
Използване на функцията Inspect Element в Safari
Ето как да използвате Inspect Element в Safari, браузърът по подразбиране на Mac компютри.
-
В Safari щракнете върху Safari > Предпочитания.
Image -
Щракнете върху Разширени.
Image -
Щракнете Показване на менюто за разработка в лентата с менюта, след което затворете прозореца.
Image - Когато разглеждате уебсайт, щракнете с десния бутон върху елемента, който искате да проверите.
-
Щракнете Проверете елемента.
Image -
Вече можете да видите кода зад уебсайта, който сте инспектирали.
Image
Използване на функцията Inspect Element в Chrome на Mac
Ако използвате Chrome вместо Safari на вашия Mac, е още по-лесно да видите елемент, тъй като не е необходимо да активирате функцията. Ето какво да направите.
- В Chrome прегледайте уебсайт.
- Щракнете с десния бутон върху елемента, който искате да проверите.
-
Щракнете Проверка.
Image -
Вече можете да видите кода в страничен прозорец на Chrome.
Image
Защо не мога да проверявам на моя Mac?
Възможно е да не успеете да проверите елемент на вашия Mac, ако не сте активирали менюто за програмисти в Safari. Ето напомняне как да го направите.
-
В Safari щракнете върху Safari > Предпочитания.
Image -
Щракнете върху Разширени.
Image -
Щракнете Показване на менюто за разработка в лентата с менюта, след което затворете прозореца.
Image
Как да направите промени в уебсайта чрез проверка на елемента
Освен че ви позволява да преглеждате кода на уебсайт, също така е възможно временно да промените всеки елемент на уебсайт чрез Inspect Element. Ето как да го направите чрез Safari.
Процесът е много подобен в други браузъри.
- Когато разглеждате уебсайт, щракнете с десния бутон върху елемента, който искате да проверите.
- Щракнете Проверете елемента.
- Щракнете два пъти върху текста в кода, за да го направите редактируем.
- Изтрийте го или въведете нов текстов низ.
- Докоснете Enter.
- Кодът вече е временно променен само за ваша полза.
Защо бихте искали да използвате функцията за проверка на елемент?
Възможността да инспектирате елемент е полезна по много причини.
- За да промените кода в движение. Дизайнерите на уебсайтове могат временно да променят нещата в уебсайта, за да видят как промените се отразяват на нещата.
- За проверка на кода. И дизайнерите, и специалистите по маркетинг могат да проверят кода, за да потвърдят, че неща като подробности от Google Анализ са там.
- За да видите изображения отделно от сайт. Ако даден сайт не ви позволява да отворите изображение в нов раздел или прозорец, преглеждането на елемента го прави възможно.
-
Тинкър. Виждането на кода на уеб страница може да ви помогне да разберете какво виждате, премахвайки мистерията какво и защо се случва със сайта, на който се намирате. Това е като да разглобите уред, за да видите как работи, но в този случай няма винтове за губене.
ЧЗВ
Законно ли е да се проверява уебсайт?
Да. Въпреки това, ако планирате да използвате някакъв код или активи от уебсайт, не забравяйте да се консултирате със собственика и да добавите бележка за авторски права.
Как да копирам HTML от уебсайт с елемент inspect?
В Chrome щракнете с десния бутон върху страницата и изберете Inspect, след това отидете в горната секция и щракнете с десния бутон върху етикета (напр.). Изберете Copy > Copy outerHTML, след което поставете кода в текстов или HTML файл.
Мога ли да копирам CSS от уебсайт с елемент inspect?
Да. Щракнете с десния бутон върху елемента, който искате да копирате, и изберете Inspect. Щракнете с десния бутон върху маркирания код и изберете Копиране > Копиране на стилове.
Как да видя запазените си пароли с помощта на inspect element?
За да разкриете скрити пароли, щракнете с десния бутон върху текстовото поле за парола и изберете Проверка. В маркираната секция потърсете type=”password” и заменете password с text. Има по-лесни начини да покажете всичките си пароли в Chrome.
