Повечето хора не знаят, че на тяхно разположение има съкровищница от инструменти за разработчици и че е скрита в любимия им браузър.

Всеки уеб браузър предлага инструменти за разработчици за проверка на кодирането на уебсайт, но той е чужд обект за обикновения потребител на интернет. В крайна сметка, кой иска да разгледа кодирането на уебсайт, нали?

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

Как да използвате Inspect Element в конкретен браузър

Повечето браузъри имат инструменти за проверка на елементи на уебсайт, но всички те обикновено работят по същия начин.

Използване на Inspect Element в Google Chrome

  1. Отворете уебсайта, който искате да проверите.

  2. Щракнете с десния бутон навсякъде на страницата и изберете Inspect.

    ИЛИ

  3. Кликнете върху трите вертикални точки в десния ъгъл на лентата с инструменти.

  4. Отидете на More Tools.

  5. Изберете Developer Tools.

    ИЛИ

  6. Натисни F12 на компютър (или CMD + Options + I на Mac.)

Използване на Inspect Element в Microsoft Edge

  1. Отворете уебсайт.

  2. Кликнете върху трите вертикални точки в горния десен ъгъл на лентата с инструменти на браузъра.

  3. Превъртете надолу и кликнете върху More Tools.

  4. Кликнете върху Developer Tools.

    ИЛИ

  5. Щракнете с десния бутон навсякъде в уебсайта и кликнете върху Inspect.

    ИЛИ

  6. Натиснете Ctrl + Shift + I.

Всеки от тези три метода ще ви даде същия резултат.

Ако сте направили това правилно, ще видите нов прозорец, който се отваря в долната част на вашия браузър. Това са инструментите за разработчици и включват раздела Елементи. Това е инструментът, от който се нуждаете, за да проверите елемента.

Панелът ще се отвори в долната част на екрана ви по подразбиране, но винаги можете да промените как изглежда. Следвайте тези прости стъпки, за да преместите панела с инструменти за разработчици:

  1. Кликнете върху трите вертикални точки в горния ъгъл на панела с инструменти за разработчици.

  2. Изберете страна за докинг (отляво, отдолу или отдясно) или откачете до отделен прозорец.

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

Използване на елемент за проверка (специфичен за OS)

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

Как да използвате Inspect Element на Chromebook

Браузърът по подразбиране на Chromebook е Google, така че следвайте инструкциите на браузъра Chrome за достъп Inspect Element. Ето малък опреснителен курс за вас:

  1. Отворете уебсайт.

  2. Кликнете върху трите вертикални линии в горния десен ъгъл на лентата с инструменти.

  3. Изберете More Tools.

  4. Кликнете върху Developer Tools.

Можете също да използвате метода на щракване с десния бутон или F12 за да стигнете по-бързо до инструментите за разработчици.

Как да използвате Inspect Element на устройство с Android

Изпълнението на Inspect Element на устройство с Android е малко по-различно. Вижте как да стигнете до панела Inspect Element на Android:

  1. Натисни F12.

  2. Избирам Toggle Device Bar.

  3. Изберете устройството с Android от падащото меню.

Когато изберете конкретно устройство с Android, ще забележите, че се зарежда мобилна версия на уебсайта. От тук можете да използвате функцията Inspect Element на вашето устройство с Android от комфорта на вашия работен плот.

Този метод работи както за браузърите Chrome, така и за Firefox, тъй като те имат функция в своите инструменти за разработчици, наречена симулация на устройство.

Работи по същия начин и за iPhone устройства. Просто трябва да изберете правилния от падащото меню.

Как да използвате Inspect Element в Windows

Инструментът Inspect Element не е непременно специфичен за ОС, но е специфичен за браузъра. Това означава, че инструментите за разработчици са функция на браузъра, който използвате, а не непременно Windows. Можете обаче да стигнете до панела Inspect Element, независимо кой браузър предпочитате.

Ако използвате ОС Windows, вероятно ще използвате и браузъра Microsoft Edge. Вижте как да получите достъп до Inspect Element в MS Edge:

  1. Отворете уебсайта, който искате да проверите.

  2. Докоснете трите вертикални точки в ъгъла на прозореца на браузъра.

  3. Превъртете надолу и изберете More Tools.

  4. Кликнете върху Developer Tools.

Можете също да използвате F12 ако искате да получите достъп до Inspect Element по-бързо. Също така, щракването с десния бутон върху уеб страницата и изборът на Inspect също работи.

Как да използвате Inspect Element на Mac

Ако използвате Mac, избраният от вас браузър вероятно е Safari. Отварянето на Inspect Elements в Safari е малко по-различно от това в Chrome и Firefox. Но е също толкова просто с тези стъпки:

  1. Отворете браузъра Safari.

  2. Кликнете върху Safari в раздела на заглавката и изберете Preferences от падащото меню.

  3. Кликнете върху Advanced икона на зъбно колело, разположена в горната част на екрана.

  4. Поставете отметка в квадратчето, което казва Show Develop menu in menu bar.

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

След като завършите тази стъпка, просто щракнете с десния бутон върху която и да е отворена уеб страница и изберете Проверка. Можете също да използвате командата за бързи клавиши: CMD + Option + I (инспектира).

Как да използвате Inspect Element на iPhone

Искате ли да използвате функцията Inspect Elements, за да видите как се появява мобилна версия на уеб страница на iPhone? Можете да направите това и повече само с няколко прости стъпки. Но преди да разгледате елемент, трябва да го активирате Web Inspector за вашето iOS устройство:

  1. Отидете на Settings.

  2. Сега изберете Safari.

  3. Превъртете до дъното и докоснете Advanced Menu.

  4. Сега докоснете превключвателя, за да го включите Web Inspector.

Освен това трябва да се уверите, че менюто за разработка е активирано на вашия Mac, като следвате стъпките в раздела по-горе.

След като активирате както мобилното устройство с iOS, така и Mac, ще видите менюто за разработка в горната лента на вашия Mac. Кликнете върху него, за да видите свързания iPhone и уеб страницата, активна на устройството. Избирането на уеб страницата също отваря прозорец на уеб инспектор за същата страница на вашия Mac екран.

Имайте предвид обаче, че тези указания работят само за Safari с Mac, а не за Safari под Windows.

Как да използвате Inspect Element, когато е блокиран

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

Method 1 – Изключете Javascript

  1. Влизам в Settings.

  2. Търсене JavaScript.

  3. Изключвам JavaScript.

Method 2 – Access Developer Tools the Long Way

Вместо да щракнете с десния бутон на мишката, за да проверите, направете това:

  1. Отидете на Settings във вашия браузър.

  2. Изберете More Tools.

  3. Превъртете надолу и кликнете върху Developer tools.

Method 3 – Using the Function Key

Можете също да опитате да използвате F12 на уеб страници, които блокират щракването с десния бутон за проверка.

Може да се наложи да опитате всички тези методи, преди да срещнете такъв, който работи за вас. В краен случай можете също да опитате да прегледате изходния код, като въведете view-source: [enter full url].

Страница с източник на преглед на Wikipedia

Как да използвате Inspect Element в Discord

Проверката на вашето кодиране в Discord е лесен процес. Просто използвайте Ctrl + Shift + I или F12 на страница на Discord.

Как да използвате Inspect Element на училищен Chromebook

Ако вашият Chromebook е издаден от училище, използването на функцията Inspect Element включва няколко прости стъпки:

  1. Щракнете с десния бутон или докоснете с два пръста върху уеб страницата и изберете Inspect.

  2. Натиснете Ctrl + Shift + I.

  3. Опитайте и използвайте изходния източник:[url] метод, като напр view-source:https://www.wikipedia.com, without the quotes.

Някои училища и организации обаче блокират тази функция. Така че, ако не работи за вас, може да се наложи да се свържете с вашата организация или училищен администратор.

Как да използвате Inspect Element за намиране на отговори

Можете да използвате Inspect Element, за да намерите отговори на различни неща като:

  • Предварителен преглед на дизайна на сайта на мобилни устройства.
  • Разберете ключови думи, които използват конкурентите.
  • Тестове за скорост.
  • Промяна на текст на уеб страница.
  • Намерете бързи примери, за да покажете на разработчиците от какво имате нужда.

Когато стартирате панела Inspect Element, ще видите цялото кодиране за уебсайта. Това включва цялото вградено в него JavaScript, CSS и HTML кодиране. Това е като да видите изходното кодиране на уеб страница, с изключение на това, че можете да правите промени в кода. Освен това можете да видите всички промени, приложени в реално време.

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

Допълнителни ЧЗВ

Как да използвам командата Inspect Element за намиране на отговори?

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

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

Незаконен ли е елементът за проверка?

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

Възможно ли е да деактивирате елемента за проверка в браузъра?

Краткият отговор е не.

Не можете да деактивирате Inspect Element в браузър. Но можете да зададете параметри, които не позволяват на потребителите да извършват определени действия, като щракване с десния бутон върху уеб страница. Има много уроци онлайн за задаване на правилните скриптове за деактивиране на определени събития. Въпреки това, всъщност не можете да деактивирате функцията Inspect Element в нейната цялост.

Запознайте се с вътрешностите на уеб страница

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

За какво използвате Inspect Element? Разкажете ни за това в секцията за коментари по-долу.

Previous articleКак да предавате на живо в YouTube
Next articleКак да активирате бисквитките на Mac