Повечето хора не знаят, че има на разположение съкровище от инструменти за разработчици и че е скрито в любимия им браузър.
Всеки уеб браузър предлага инструменти за разработчици, за да провери кодирането на уебсайт, но това е чуждестранно лице за обикновения потребител на интернет. В крайна сметка, кой иска да разгледа кодирането на уебсайт, нали?
Оказа се, че има много неща, които можете да научите, като разгледате кодирането на уебсайт. Прочетете, за да разберете какво предлага функцията за проверка на елемента и как да я използвате.
Как да използвам Inspect Element
Повечето браузъри имат инструменти за проверка на елементи на уебсайт, но като цяло всички те работят по един и същи начин.
Използване на Inspect Element в Google Chrome
- Отворете уебсайта, който искате да проверите.
- Щракнете с десния бутон върху произволно място на страницата и изберете Огледайте .
ИЛИ - Кликнете върху трите вертикални точки в десния ъгъл на лентата с инструменти.
- Отидете на Още инструменти .
- Изберете Инструменти за разработчици .
ИЛИ - Натисни F12 клавишна комбинация от клавиатура на компютър или CMD + Опции + I на Mac.
Използване на Inspect Element в Microsoft Edge
- Отворете уебсайт.
- Кликнете върху трите вертикални точки в горния десен ъгъл на лентата с инструменти на браузъра.
- Превъртете надолу и кликнете върху Още инструменти .
- Кликнете върху Инструменти за разработчици .
ИЛИ - Щракнете с десния бутон на мишката някъде в уебсайта.
- Кликнете върху Огледайте .
ИЛИ - Натиснете Ctrl + Shift + I .
Всеки от тези три метода ще ви даде същия резултат.
Ако сте направили това правилно, ще видите нов прозорец, отворен в долната част на браузъра ви. Това са Инструменти за програмисти и включват раздела Елементи. Това е инструментът, от който се нуждаете, за да проверите елемента.
как да продадете вашите парни игри
Панелът ще се отвори в долната част на екрана по подразбиране, но винаги можете да промените начина, по който се появява. Следвайте тези прости стъпки, за да преместите панела с инструменти за програмисти:
- Кликнете върху трите вертикални точки в горния ъгъл на панела Инструменти за програмисти.
- Изберете страна на дока (ляво, долно или дясно) или откачете до отделен прозорец.
Задържането на курсора до ръба на рамката на панела на Developer Tools и плъзгането ще стесни или разшири работното пространство. Например, ако решите да закачите панела в дясната страна на прозореца на браузъра, опитайте да задържите курсора на мишката върху лявата граница. Можете да плъзнете панела, за да го преоразмерите, когато видите курсора на стрелката.
Как да използвам елемента за проверка за намиране на отговори
Можете да използвате Inspect Element, за да намерите отговори на различни неща като:
- Предварителен преглед на дизайна на сайта на мобилни устройства.
- Разберете ключови думи, които конкурентите използват.
- Тестове за скорост.
- Промяна на текст на уеб страница.
- Намерете бързи примери, за да покажете на разработчиците от какво се нуждаете.
Когато стартирате панела Inspect Element, ще видите цялото кодиране на уебсайта. Това включва всички вградени в него JavaScript, CSS и HTML кодиране. Това е като да видите кода на източника на уеб страница, с изключение на това, че можете да направите промени в кода. Освен това виждате всички промени, приложени в реално време.
Този инструмент прави безценно за търговците, дизайнерите и разработчиците да виждат всички промени в дизайна, преди да ги финализират. Промяната в кодирането с Inspect Element обаче не трае вечно. Когато презаредите страницата, тя ще се върне към състоянието си по подразбиране.
Как да използвам Inspect Element на Chromebook
Браузърът по подразбиране на Chromebook е Google, така че следвайте инструкциите на браузъра Chrome за достъп Инспектирай елемента . Ето малко опреснителен курс за вас:
- Отворете уебсайт.
- Кликнете върху трите вертикални линии в горния десен ъгъл на лентата с инструменти.
- Изберете Още инструменти .
- Кликнете върху Инструменти за разработчици .
Можете също да използвате метода с десен бутон или F12 функционален бутон, за да стигнете по-бързо до Инструменти за програмисти.
Как да използвам Inspect Element на Android
Изпълнението на Inspect Element на устройство с Android е малко по-различно. Вижте как да стигнете до панела Inspect Element на Android:
- Натисни F12 функционален бутон.
- Избирам Превключване на лентата на устройствата .
- Изберете устройството с Android от падащото меню.
Когато изберете конкретно устройство с Android, ще забележите, че се зарежда мобилна версия на уебсайта. Оттук можете да използвате функцията Inspect Element на вашето устройство Android от комфорта на вашия работен плот.
Този метод работи както за браузъри Chrome, така и за Firefox, тъй като те имат функция в своите инструменти за разработчици, наречена Device Simulation.
Той работи по същия начин и за iPhone устройства. Трябва само да изберете правилния от падащото меню.
Как да използвам Inspect Element в Windows
Инструментът Inspect Element не е задължително специфичен за операционната система, но е специфичен за браузъра. Това означава, че инструментите за разработчици са функция на браузъра, който използвате, а не непременно Windows. Можете обаче да стигнете до панела Inspect Element, независимо кой браузър предпочитате.
Ако използвате операционна система Windows, вероятно ще използвате и браузъра Microsoft Edge. Вижте как да получите достъп до Inspect Element на MS Edge:
- Отворете уебсайта, който искате да проверите.
- Докоснете трите вертикални точки в ъгъла на прозореца на браузъра.
- Превъртете надолу и изберете Още инструменти .
- Кликнете върху Инструменти за разработчици .
Можете също да използвате функционалния клавиш F12, ако искате да получите достъп до Inspect Element по-бързо. Също така, щракването с десния бутон на мишката върху уеб страницата и избирането на Inspect също работи.
Как да използвам Inspect Element в Chrome
Има три начина за достъп до Inspect Element в Chrome. Можеш:
как да блокирам subreddits на reddit
- Кликнете върху менюто с настройки или три вертикални точки в браузъра и отидете на Още инструменти> Инструменти за програмисти .
- Щракнете с десния бутон върху уеб страницата и изберете Огледайте .
- Използвайте Ctrl + Shift + I (Огледайте).
Първият начин е по-интуитивен за запомняне от потребителите на Inspect Element. Ако обаче планирате да използвате тази функция често, бързите клавиши могат да ви бъдат полезни.
Как да използвам Inspect Element на Mac
Ако използвате Mac, предпочитаният от вас браузър е Safari. Отварянето на Inspect Elements в Safari е малко по-различно от това в Chrome и Firefox. Но е толкова просто с тези стъпки:
- Отворете браузъра Safari.
- Кликнете върху Сафари в заглавния раздел.
- Изберете Предпочитания от падащото меню.
- Кликнете върху Разширено икона на зъбно колело, разположена в горната част на екрана
- Поставете отметка в квадратчето, което казва Показване на менюто за разработка в лентата с менюта .
Преминаването през тези стъпки активира функцията Inspect Element във вашия браузър. Ако първо не активирате Inspect Element, няма да видите опцията, когато отворите уебсайт.
След като завършите тази стъпка, просто щракнете с десния бутон върху която и да е отворена уеб страница и изберете Проверка. Можете също да използвате командата за бързи клавиши: CMD + Option + I (инспектирайте).
Как да използвам Inspect Element във формулярите на Google
Можете също да използвате инспектиращия елемент на Google Формуляри. Ако обаче търсите отговори на тест, нямате късмет. Няма да намерите отговорите, вградени в кодирането.
Можете да видите отговори само ако сте създател или редактор на формуляра. Ако обаче сте студент, отговарящ на тест в Google Forms, ще видите само собствените си отговори.
Така или иначе, можете да щракнете с десния бутон върху формуляра и да изберете Огледайте за да видите целия код за формуляра.
Как да използвам Inspect Element на iPhone
Искате ли да използвате функцията Inspect Elements, за да видите как се появява мобилна версия на уеб страница на iPhone? Можете да направите това и още повече само с няколко прости стъпки. Но преди да погледнете елемент, трябва да активирате Web Inspector за вашето iOS устройство:
- Отидете на Настройки .
- Изберете Сафари .
- Превъртете до дъното и натиснете Разширено меню .
- Докоснете, за да включите Уеб инспектор .
Също така трябва да се уверите, че менюто за разработка е активирано на вашия Mac:
- Отворете Safari.
- Изберете Сафари от горните заглавия.
- Кликнете върху Предпочитания .
- Кликнете върху Разширено .
- Поставете отметка в квадратчето, което казва Показване на менюто за разработка в лентата с менюта .
След като активирате мобилното устройство с iOS и Mac, ще видите менюто Develop в горната лента на вашия Mac. Кликнете върху него, за да видите свързания iPhone и уеб страницата, активна на устройството. Избирането на уеб страницата също отваря прозорец на Web Inspector за същата страница на екрана на вашия Mac.
Имайте предвид обаче, че тези указания работят само за Safari с Mac, а не за Safari под Windows.
Как да използвам Проверете елемента, когато е блокиран
Понякога ще откриете, че не можете да проверите уеб страница и изборът за проверка е сив, ако се опитате да щракнете с десния бутон върху нея. Може да си мислите, че е блокиран, но има много начини да заобиколите това:
Метод 1 - Изключете Javascript
- Влизам в Настройки .
- ТърсенеJavaScript.
- Изключвам JavaScript .
Метод 2 - Достъп до инструментите за разработчици по дългия път
Вместо да щракнете с десния бутон на мишката, за да проверите, направете това:
- Отидете на Настройки във вашия браузър.
- Изберете Още инструменти .
- Превъртете надолу и кликнете върху Настройки за програмисти .
Метод 3 - Използване на функционалния бутон
как да включа Bluetooth на windows
Можете също да опитате да използвате F12 функционален бутон на уеб страници, които блокират десния бутон на мишката за Проверка.
Може да се наложи да изпробвате всички тези методи, преди да попаднете на такъв, който работи за вас. В краен случай можете също да опитате да прегледате изходния код, като въведете view-source: [въведете пълния url] .
Как да използвам Проверка на елемента на раздора
Проверката на вашето кодиране на Discord е лесен процес. Просто използвайте Ctrl + Shift + I команда или F12 на страницата Discord.
Как да използвам Inspect Element на училищен Chromebook
Ако вашият Chromebook е издаден от училище, използването на функцията Inspect Element включва няколко прости стъпки:
- Щракнете с десния бутон или с два пръста докоснете уеб страницата и изберете Огледайте .
ИЛИ - Натиснете Ctrl + Shift + I
Някои училища и организации обаче блокират тази функция. Така че, ако не работи за вас, може да се наложи да се свържете с администратора на вашата организация или училище.
Допълнителни често задавани въпроси
Как да използвам командата Inspect Element за намиране на отговори?
Единственият начин да намерите отговори с помощта на функцията Inspect Element е, ако уебсайтът незабавно го разкрие след изпращане. В този случай отговорите присъстват в кодирането.
В противен случай просто преглеждате кодирането за теста или теста, когато използвате функцията Inspect Element, както и всички отговори, които изпращате.
Незаконният инспектиране на елемент ли е?
Не, инспектиращият елемент не е незаконен. Преглеждането на изходния код за уебсайт не е незаконно, а става проблем само ако използвате събраната информация за нечисти цели, като опити за експлойти и т.н.
Възможно ли е да деактивирате проверката на елемент в браузъра?
Краткият отговор е отрицателен.
Не можете да деактивирате инспектиращия елемент в браузър. Но можете да зададете параметри, които пречат на потребителите да извършват определени действия, като щракване с десен бутон върху уеб страница. Има множество уроци онлайн, за да зададете правилните скриптове за деактивиране на определени събития. Всъщност обаче не можете да деактивирате функцията Inspect Element изцяло.
Опознайте вътрешностите на уеб страница
Проверката на функцията Inspect Element на уеб страница вероятно е инструмент за разработчици, за който никога не сте знаели, че ви е необходим - дори ако самият вие не сте разработчик. Той разполага с множество приложения за дизайн и маркетинг, които могат да направят уебсайта Ви да работи по-гладко. И може би ще ви даде предимство на конкурента.
За какво използвате Inspect Element? Разкажете ни за това в раздела за коментари по-долу.