Уеб страницата, която четете, се състои, наред с други неща, от изходния код. Това е информацията, която вашият уеб браузър изтегля и превежда в това, което четете в момента.
Повечето уеб браузъри предоставят възможността да виждат изходния код на уеб страница без необходимия допълнителен софтуер, без значение какъв тип устройство се намирате.
Някои дори предлагат разширена функционалност и структура, което улеснява разглеждането на HTML и други програмни кодове на страницата.
Защо бихте искали да видите изходния код?
Има няколко причини, поради които може да искате да видите изходния код на страницата. Ако сте уеб програмист, може би бихте искали да погледнете под покрива на друг стил или изпълнение на друг програмист. Може би сте в осигуряването на качество и се опитвате да установите защо определена част от уеб страницата се изобразява или се държи по начина, по който тя е.
Можете също да започнете да се опитвате да научите как да кодирате свои собствени страници и да търсите някои примери от реалния свят. Разбира се, възможно е да не попаднете в нито една от тези категории и просто искате да видите източника от чисто любопитство.
Изброените по-долу са инструкции как да преглеждате изходния код в избрания от Вас браузър.
Google Chrome
Пускани на: Chrome OS, Linux, MacOS, Windows
Настолната версия на Chrome предлага три различни метода за преглед на изходния код на една страница, първата и най-простата, като използвате клавишната комбинация: CTRL + U ( COMMAND + OPTION + U на macOS).
Когато се натисне, тази пряк път отваря нов раздел на браузъра, показващ HTML и друг код за активната страница. Този източник е с цветен код и структуриран по начин, който прави по-лесно разделянето и намирането на това, което търсите. Можете също така да стигнете до него, като въведете следния текст в адресната лента на Chrome, приложен в лявата част на URL адреса на уеб страницата, и натиснете клавиша Enter : view-source: (източник на изглед: https: // www .).
Третият начин е чрез инструментите за разработчици на Chrome, които ви позволяват да се вгледате по-дълбоко в кода на страницата, както и да я нагласите на място за целите на тестването и развитието. Интерфейсът за инструменти за програмисти може да се отваря и затваря с помощта на тази клавишна комбинация: CTRL + SHIFT + I ( COMMAND + OPTION + I на macOS). Можете също да ги стартирате, като направите следния път.
- Кликнете върху бутона на главното меню на Chrome, разположен в горния десен ъгъл и представен с три вертикално подравнени точки.
- Когато се покаже падащото меню, задръжте курсора на мишката върху опцията Още инструменти .
- Когато се появи подменюто, кликнете върху Инструменти за програмисти .
андроид
Преглеждането на източника на уеб страница в Chrome за Android е толкова просто, колкото прикачването на следния текст към предната част на неговия адрес (или URL адрес) и подаването му: view-source:. Пример за това ще бъде изглед-източник: https: // www. , HTML и другият код от въпросната страница ще се показват незабавно в активния прозорец.
IOS
Въпреки че няма естествени методи за преглеждане на изходния код с помощта на Chrome на iPad, iPhone или iPod touch, най-простият и най-ефективен е да използвате решение от трета страна, като например приложението View Source.
Наличен за $ 0.99 в App Store, View Source ви подканва да въведете URL адреса на страницата (или да я копирате / поставите от адресната лента на Chrome, което понякога е най-простият път, който трябва да предприемете) и това е всичко. В допълнение към показването на HTML и друг изходен код, приложението има и раздели, които показват отделни активи на страницата, Document Object Model (DOM), както и размер на страницата, "бисквитки" и други интересни подробности.
Microsoft Edge
Работещи на: Windows
Браузърът Edge ви позволява да преглеждате, анализирате и дори да манипулирате изходния код на текущата страница чрез интерфейса на Инструменти за програмисти . За достъп до този удобен набор от инструменти можете да използвате една от следните клавишни комбинации: F12 или CTRL + U. Ако предпочитате мишката, кликнете върху бутона на менюто на Edge (три точки в горния десен ъгъл) и изберете опцията F12 Developer Tools от списъка.
След като dev инструментите се стартират за първи път, Edge добавя две допълнителни опции към контекстното меню на браузъра (достъпно чрез щракване с десния бутон някъде в дадена уеб страница): Inspect element и View source , последният, който отваря Debugger частта на dev интерфейс с инструменти, снабден с изходен код.
Mozilla Firefox
Пускани на: Linux, MacOS, Windows
За да видите изходния код на страницата в настолната версия на Firefox, можете да натискате клавиша CTRL + U ( COMMAND + U върху macOS), което ще отвори нов раздел, съдържащ HTML и друг код за активната уеб страница.
Въвеждането на следния текст в адресната лента на Firefox директно вляво от URL адреса на страницата ще доведе до появата на същия източник в текущия раздел вместо: view-source: (т.е. източник на изглед: https: // www.) ,
Друг начин за достъп до изходния код на дадена страница е чрез инструментите за разработчици на Firefox, достъпни чрез следните стъпки.
- Кликнете върху бутона на главното меню, намиращ се в горния десен ъгъл на прозореца на браузъра Ви и представен от три хоризонтални линии.
- Когато се появи изскачащото меню, кликнете върху иконата за програмисти "гаечен ключ".
- Появява се контекстното меню на Web Developer . Изберете опцията Източник на страници .
Firefox също ви позволява да преглеждате изходния код за конкретна част от страницата, което улеснява изолирането на проблемите. За да направите това, първо маркирайте областта, която ви интересува с мишката. След това щракнете с десния бутон и изберете View Source Selection от контекстното меню на браузъра.
андроид
Преглеждането на изходния код във версията за Android на Firefox е възможно чрез префиксиране на URL адреса на уеб страницата със следния текст: view-source:. Например, за да видите HTML източника, ще изпратите следния текст в адресната лента на браузъра: view-source: https: // www. ,
IOS
Препоръчителният ни метод за преглеждане на изходния код на уеб страниците на iPad, iPhone или iPod touch е чрез приложението View Source, което се предлага в App Store за $ 0.99. Независимо от това, че не се интегрира директно с Firefox, можете лесно да копирате и поставите URL адрес от браузъра в приложението, за да разкриете HTML и друг код, свързан с въпросната страница.
Apple Safari
Пуска се на iOS и macOS
IOS
Въпреки че Safari за iOS не включва възможността да виждате източник на страници по подразбиране, браузърът се интегрира доста безпроблемно с приложението View Source - достъпно в App Store за $ 0.99.
След като инсталирате това приложение от трета страна, влезте в браузъра Safari и докоснете бутона Споделяне, разположен в долната част на екрана и представен с квадрат и стрелка нагоре. Споделеният лист за iOS вече трябва да бъде видим, като покрива долната половина на прозореца Safari. Превъртете надясно и изберете бутона Преглед на източника .
Следва да се покаже цветно кодирано структурирано представяне на изходния код на активната страница заедно с други раздели, които ви позволяват да виждате активите на страницата, скриптовете и др.
MacOS
За да видите изходния код на страница в настолната версия на Safari, първо трябва да активирате менюто Разработване . Стъпките по-долу ви превръщат в активиране на това скрито меню и показване на HTML източник на страница.
- Кликнете върху Safari в менюто на браузъра, разположено в горната част на екрана.
- Когато се покаже падащото меню, изберете опцията Предпочитания .
- Предпочитанията на Safari сега трябва да са видими. Кликнете върху иконата Разширени , разположена в най-дясната страна на горния ред.
- Към долната част на раздела "Разширени" има опция, обозначена като Показване на разгънато меню в лентата с менюта , придружена от празно квадратче. Кликнете върху това поле веднъж, за да поставите отметка в него и затворете прозореца "Предпочитания", като кликнете върху червеното "x", намиращо се в горния ляв ъгъл.
- Кликнете върху менюто Развитие , разположено в горната част на екрана.
- Когато се появи падащото меню, изберете Показване на източника на страница . Можете също така да използвате следната клавишна комбинация: COMMAND + OPTION + U.
опера
Пускани на: Linux, MacOS, Windows
За да видите изходния код от активната уеб страница в браузъра Opera, използвайте следната клавишна комбинация: CTRL + U ( COMMAND + OPTION + U на macOS). Ако предпочитате да зареждате източника в текущия раздел, въведете следния текст вляво от URL адреса на страницата в адресната лента и натиснете Enter : view-source: (т.е. източник на изглед: https: // www. ).
Настолната версия на Opera също ви позволява да преглеждате HTML източник, CSS и други елементи, като използвате неговите интегрирани инструменти за програмисти . За да стартирате този интерфейс, който по подразбиране ще се появи в дясната страна на основния ви прозорец на браузъра, натиснете клавишната комбинация: CTRL + SHIFT + I ( COMMAND + OPTION + I на macOS).
Наборът от инструменти за разработчици на Opera е достъпен и чрез следните стъпки.
- Кликнете върху логото на Opera, разположено в горния ляв ъгъл на прозореца на браузъра.
- Когато се покаже падащото меню, задръжте курсора на мишката върху опцията Още инструменти .
- Кликнете върху Показване на менюто за програмисти .
- Кликнете отново върху логото на Opera.
- Когато се покаже падащото меню, задръжте курсора на мишката върху програмиста .
- Когато се появи подменюто, кликнете върху Инструменти за програмисти .
Вивалди
Има няколко начина за преглеждане на източника на страници в браузъра Vivaldi. Най-простият е чрез клавишната комбинация CTRL + U , която представя кода от активната страница в нов раздел.
Можете също така да добавите следния текст към URL адреса на предната част на страницата, който показва изходния код в настоящия раздел: view-source:. Пример за това ще бъде изглед-източник: http: // www. ,
Друг метод е чрез интегрираните инструменти за разработчици на браузъра, достъпни чрез натискане на комбинацията CTRL + SHIFT + I или чрез опцията Инструменти за програмисти в менюто Инструменти на браузъра - чрез натискане на логото "V" в горния ляв ъгъл. Използването на dev инструментите позволява много по-задълбочен анализ на източника на страницата.