Как да проверявате елементи на Mac, Windows, iPhone и iPad

Разработчиците и дизайнерите на UI използват функцията Inspect Element, за да модифицират уебсайтове онлайн, без да променят изходния код. Но как да инспектирате елементи, без да предприемете курс за уеб разработка?

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

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

Намерете по-долу кратко ръководство стъпка по стъпка, за да научите как да проверявате елементите без усилие.

Какво е Inspect Element?

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

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

Ето няколко творчески начина да го използвате:

• Трябва да направите екранна снимка от уебсайт и текстовете на изображението ви притесняват. Използвайте инструмента Inspect Element, за да изтриете тези текстове.
• Искате да се пошегувате с приятелите си, като им покажете името си в New York Times или Washington Post. Inspect Element е най-добрият начин да направите това.
• Тествайте кодове за отстраняване на грешки на уебсайтове, като ги прилагате в реално време с помощта на инструмента Inspect Element. Ако работи, можете да промените изходния код на бекенда.
• Като специалист по дигитален маркетинг можете да разкривате ключови думи на конкуренти, SEO заглавия, мета тагове и т.н., като използвате този мощен инструмент за уеб разработка.

Как да проверявате елементи в Windows

Използването на инструмента Inspect Element в Windows е абсурдно лесно. Намерете по-долу поетапно ръководство за проверка на елементи с помощта на различни уеб браузъри в Windows:

Инструмент за проверка на Google Chrome

Как да проверявате елементи в браузъра Windows Chrome

• Когато използвате Google Chrome , щракнете с десния бутон навсякъде в уебсайт.
• Ще се появи контекстното меню с десен бутон.
• В долната част ще видите Инспектиране .
• Щракнете върху Проверка , за да видите HTML и CSS кодовете в панела отдясно .

Как да отворя Inspect Element в Chrome без щракване с десен бутон?

Има някои удобни преки пътища за отваряне на инструмента Inspect Element в Google Chrome за Windows. Тези клавишни комбинации са както следва:

• Ctrl + Shift + C
• Функционалният клавиш F12

Горните клавишни комбинации работят и в браузъра Mozilla за Windows.

Инструмент Mozilla Inspector

Как да проверявате елементи в браузъра Mozilla на Windows

В браузъра Mozilla процесът е същият като в Google Chrome. Прозорецът на инспектора обаче ще се покаже в долната част на браузъра вместо в дясната страна, както в Google Chrome.

Microsoft Edge Inspect Tool

Как да проверявате елементи в браузъра Windows Edge

Изненадващо, Inspect Element на Microsoft Edge работи подобно на браузъра Google Chrome. Инструментът Inspect е достъпен при щракване с десен бутон. Освен това HTML и CSS кодовете се показват от дясната страна, подобно на Google Chrome.

Как да проверявате елементи на Mac

Използвате ли Google Chrome, Mozilla Firefox или Microsoft Edge на Mac компютрите на Apple? Ако да, тогава можете да разположите инструмента Inspect Element, като следвате стъпките, споменати по-горе в раздела Windows.

Но ако използвате уеб браузъра по подразбиране на macOS, Safari, тогава използването на инструмента Inspect Element е трудна игра. По подразбиране Safari не показва Inspect Element на Mac. Ето какво трябва да направите:

Как да отворите Inspect Element на Mac

Първо, трябва да активирате инструментите за разработчици в Safari на Mac. Ето как:

• Стартирайте браузъра Safari .
• Посетете уебсайт, в който искате да инспектирате уеб елементи.
• Изберете Safari от горната лента с менюта на браузъра Safari.
• Щракнете върху Предпочитания от контекстното меню, което се отваря.
• На екрана с предпочитания изберете Разширени .
• Маркирайте менюто Показване на разработката в долната част на екрана с разширени предпочитания .

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

• Щракнете с десен бутон върху който и да е елемент от уебсайт, като текст или изображение .
• Ще се появи контекстно меню. В долната част ще видите Inspect Element .
• Кликнете върху това, за да отворите раздел за отстраняване на грешки под уебсайта, показващ HTML и CSS кодове.

Какви са ключовете за Inspect Element?

Може да търсите преки пътища за Inspect Element на Mac. Можете да използвате следното:

• Command + Shift + C
• Натиснете клавиша Control и след това изберете произволен елемент.
• Щракнете върху тракпада с два пръста

Как да проверявате елементи на Chromebook

Chromebook използва Google Chrome като браузър по подразбиране. Следователно, след като отворите който и да е уебсайт, просто щракнете с десния бутон, за да намерите опцията Inspect Element в контекстното меню, което следва.

Ако използвате Chromebook от работа или от училище, може да задавате този въпрос:

Защо не мога да проверя на своя Chromebook в училище?

Повечето училищни и бизнес администратори деактивират разширени функции на Chromebook, който ви предоставят за работа или учене. Тъй като инструментите за разработчици са разширени функции, има вероятност вашият училищен или работен Chromebook да не показва инструмента Inspect Element.

Как да проверявате елементи на iPad/iPhone

За съжаление не можете да използвате инструмента Inspect Element на iPhone или iPad без Mac.

iOS и iPadOS имат Web Inspector за приложението Safari. Въпреки това работи само ако свържете мобилното устройство към Mac, на който вече сте активирали инструменти за разработчици за Safari. По-долу са стъпките, които можете да опитате:

• Отворете приложението за настройки на iPad/iPhone .
• Щракнете върху Safari в левия панел за навигация.

Отваряне на настройките на Safari на iPad или iPhone

• След това превъртете надолу от дясната страна, за да намерите и изберете Разширени .

Активиране на Web Inspector на iPad и iPhone

• Активирайте превключвателя за Web Inspector .
• Сега свържете мобилното устройство към Mac чрез USB .
• Упълномощавайте iPhone/iPad на Mac.
• Отворете всеки уебсайт на мобилно устройство в Safari.
• Сега стартирайте Safari на Mac и изберете Разработване в горната лента с менюта.
• В контекстното меню, което се отваря, потърсете името на вашето мобилно устройство.
• Задръжте курсора върху мобилното устройство, за да видите всички отворени уебсайтове.
• Сега изберете произволен уебсайт, за да видите изходния код на HTML и CSS в браузъра Safari на Mac.

Заключение

Проучихте всички възможни начини за използване на инструмента Inspect Element за временно редактиране на уеб страница. Научихте също как да проверявате елементи за различни устройства като Mac, Windows, Chromebook, iPad и iPhone.

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

Не забравяйте да оставите коментари по-долу, ако горните стъпки са ви помогнали, всеки метод, който намирате за предизвикателство, или някакви тайни съвети относно инструмента Inspect Element.

Нуждаете се от уеб страница като печатна справка? Научете как бързо да запазите уеб страница като PDF сега!