Разработчиците и дизайнерите на 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
- При използване Google Chrome, Кликнете с десния бутон навсякъде в уебсайт.
- Ще се появи контекстното меню с десен бутон.
- В долната част ще видите Инспектирайте.
- Кликнете Инспектирайте за преглед на HTML и CSS кодовете на a десен панел.
Как да отворя Inspect Element в Chrome без щракване с десен бутон?
Има някои удобни преки пътища за отваряне на инструмента Inspect Element в Google Chrome за Windows. Тези клавишни комбинации са както следва:
- Ctrl + Shift + ° С
- Функционалният ключ F12
Горните клавишни комбинации работят и в браузъра Mozilla за Windows.
Инструмент Mozilla Inspector
В браузъра Mozilla процесът е същият като в Google Chrome. както и да е Инспектор ще се покаже в долната част на браузъра вместо в дясната страна, както в Google Chrome.
Microsoft Edge Inspect Tool
Изненадващо, 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:
- На всеки елемент от уебсайт като текст или изображение, Кликнете с десния бутон.
- Ще се появи контекстно меню. В долната част ще видите Инспектирай елемента.
- Кликнете върху това, за да отворите раздел за отстраняване на грешки под уебсайта, показващ HTML и CSS кодове.
Какви са ключовете за Inspect Element?
Може да търсите преки пътища за Inspect Element на Mac. Можете да използвате следното:
- командване + Shift + ° С
- Натисни контрол и след това изберете произволен елемент.
- Щракнете върху тракпада с два пръста
Как да проверявате елементи на 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 в левия панел за навигация.
- След това превъртете надолу от дясната страна, за да намерите и изберете Разширено.
- Активирайте превключвателя за Уеб инспектор.
- Сега свържете мобилното устройство към Mac, като използвате USB.
- Упълномощавайте iPhone/iPad на Mac.
- Отворете всеки уебсайт на мобилно устройство в Safari.
- Сега стартирайте Safari на Mac и изберете Развивайте се в горната лента с менюта.
- В контекстното меню, което се отваря, потърсете името на вашето мобилно устройство.
- Задръжте курсора върху мобилното устройство, за да видите всички отворени уебсайтове.
- Сега изберете произволен уебсайт, за да видите изходния код на HTML и CSS в браузъра Safari на Mac.
Заключение
Проучихте всички възможни начини за използване на инструмента Inspect Element за временно редактиране на уеб страница. Научихте също как да проверявате елементи за различни устройства като Mac, Windows, Chromebook, iPad и iPhone.
Следващият път, когато трябва да промените уеб страница за забавление или за професионални нужди, опитайте тези методи. Определено ще харесате тези лесни стъпки пред други сложни методи, обяснени другаде.
Не забравяйте да оставите коментари по-долу, ако горните стъпки са ви помогнали, всеки метод, който намирате за предизвикателство, или някакви тайни съвети относно инструмента Inspect Element.
Нуждаете се от уеб страница като печатна справка? Научете как да бързо запишете уеб страница като PDF сега!