Уеб страницата, която четете, се състои, наред с други неща, от изходния код. Това е информацията, която вашият уеб браузър изтегля и превежда в това, което четете в момента.
Повечето уеб браузъри предоставят възможността да виждат изходния код на уеб страница без необходимия допълнителен софтуер, без значение какъв тип устройство се намирате.
Някои дори предлагат разширена функционалност и структура, което улеснява разглеждането на HTML и други програмни кодове на страницата.
Защо бихте искали да видите изходния код?
Има няколко причини, поради които може да искате да видите изходния код на страницата. Ако сте уеб програмист, може би бихте искали да погледнете под покрива на друг стил или изпълнение на друг програмист. Може би сте в осигуряването на качество и се опитвате да установите защо определена част от уеб страницата се изобразява или се държи по начина, по който тя е.
Можете също да започнете да се опитвате да научите как да кодирате свои собствени страници и да търсите някои примери от реалния свят. Разбира се, възможно е да не попаднете в нито една от тези категории и просто искате да видите източника от чисто любопитство.
Изброените по-долу са инструкции как да преглеждате изходния код в избрания от Вас браузър.
Google Chrome
Пускани на: Chrome OS, Linux, MacOS, Windows
Настолната версия на Chrome предлага три различни метода за преглеждане на изходния код на страницата, първата и най-простата, като използвате следната клавишна комбинация: CTRL + U (COMMAND + OPTION + U на macOS).
Когато се натисне, тази пряк път отваря нов раздел на браузъра, показващ HTML и друг код за активната страница. Този източник е с цветен код и структуриран по начин, който прави по-лесно разделянето и намирането на това, което търсите. Можете да стигнете и там, като въведете следния текст в адресната лента на Chrome, приложен към лявата страна на URL адреса на уеб страницата, и изберете Въведете ключ: виж източника: (т.е. източник на изгледи: https: //www.Go-Travels.com).
Третият начин е чрез инструментите за разработчици на Chrome, които ви позволяват да се вгледате по-дълбоко в кода на страницата, както и да я нагласите на място за целите на тестването и развитието. Интерфейсът за инструменти за програмисти може да се отвори и затвори, като използвате този клавишен клавиш: CTRL + SHIFT + I (COMMAND + OPTION + I на macOS). Можете също да ги стартирате, като направите следния път.
-
Изберете бутона за главното меню на Chrome, разположен в горния десен ъгъл и представен с три вертикално подравнени точки.
-
Когато се покаже падащото меню, задръжте курсора на мишката над Още инструменти опция.
-
Когато се появи подменюто, изберете Инструменти за разработчици.
андроид
Преглеждането на източника на уеб страница в Chrome за Android е толкова просто, колкото е добавянето на следния текст към предната част на неговия адрес (или URL адрес) и подаването му: виж източника:, Пример за това би бил Предвид-източник: HTTPS: //www.Go-Travels.com , 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 от списъка.
След като dev инструментите се стартират за първи път, Edge добавя две допълнителни опции към контекстното меню на браузъра (достъпно чрез щракване с десния бутон някъде в дадена уеб страница): Инспектирай елемента и Виж източника, който отваря Debugger част от интерфейса на dev инструменти, запълнени с изходния код.
Mozilla Firefox
Пускани на: Linux, MacOS, Windows
За да видите изходния код на страницата в настолната версия на Firefox, можете да натиснете CTRL + U (COMMAND + U на macOS) на клавиатурата, което ще отвори нов раздел, съдържащ HTML и друг код за активната уеб страница.
Въвеждането на следния текст в адресната лента на Firefox директно вляво от URL адреса на страницата ще доведе до появата на същия източник в текущия раздел: виж източника: ( т.е. източник на изглед: https: //www.dotdash.com ).
Друг начин за достъп до изходния код на дадена страница е чрез инструментите за разработчици на Firefox, достъпни чрез следните стъпки.
-
Изберете главния бутон на менюто, намиращ се в горния десен ъгъл на прозореца на браузъра Ви и представен от три хоризонтални линии.
-
Когато се появи изскачащото меню, кликнете върху Разработчик икона "гаечен ключ".
-
Появява се контекстното меню на Web Developer. Изберете Източник на страницата опция.
Firefox също ви позволява да видите изходния код за определена част от страницата, което улеснява изолирането на проблемите. За да направите това, първо маркирайте областта, която ви интересува с мишката. След това кликнете с десния бутон и изберете Преглед на източника за избор от контекстното меню на браузъра.
андроид
Преглеждането на изходния код във версията на Android за Firefox е възможно чрез префиксиране на URL адреса на уеб страницата със следния текст: виж източника:, Например, за да видите HTML източника за Dotdash, ще изпратите следния текст в адресната лента на браузъра: Предвид-източник: HTTPS: //www.dotdash.com .
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 сега трябва да са видими. Кликнете върху напреднал икона, разположена в най-дясната страна на горния ред.
-
В посока към края на секцията "Разширени" има опция, обозначена с етикет Показва се меню Разработване в лентата с менюта, придружено от празно квадратче. Изберете това поле веднъж, за да поставите отметка в него и затворете прозореца "Предпочитания", като кликнете върху червеното "x", намиращо се в горния ляв ъгъл.
-
Изберете Разработване , разположено в горната част на екрана.
-
Когато се появи падащото меню, изберете Показване на източника на страница, Можете също така да използвате следната клавишна комбинация: COMMAND + OPTION + U.
опера
Пускани на: Linux, MacOS, Windows
За да видите изходния код от активната уеб страница в браузъра Opera, използвайте следния клавишен клавиш: CTRL + U (COMMAND + OPTION + U на macOS). Ако предпочитате да заредите източника в текущия раздел, въведете следния текст вляво от URL адреса на страницата в адресната лента и натиснете Въведете: view-source: ( т.е. източник на изгледи: https: //www.Go-Travels.com ).
Настолната версия на Opera също ви позволява да преглеждате HTML източник, CSS и други елементи, като използвате неговите интегрирани инструменти за разработчици. За да стартирате този интерфейс, който по подразбиране ще се появи в дясната страна на основния прозорец на браузъра ви, натиснете следния клавишен клавиш: CTRL + SHIFT + I (COMMAND + OPTION + I на macOS).
Наборът от инструменти за разработчици на Opera е достъпен и чрез следните стъпки.
-
Изберете логото на Opera, разположено в горния ляв ъгъл на прозореца на браузъра ви.
-
Когато се покаже падащото меню, задръжте курсора на мишката над Още инструменти опция.
-
Кликнете върху Показване на менюто за програмисти.
-
Изберете отново логото на Opera.
-
Когато се покаже падащото меню, задръжте курсора на мишката надясно Разработчик.
-
Когато се появи подменюто, изберете Инструменти за разработчици.
Вивалди
Има няколко начина за преглеждане на източника на страници в браузъра Vivaldi. Най - простият е чрез CTRL + U клавишна комбинация, която представя кода от активната страница в нов раздел.
Можете също така да добавите следния текст към URL адреса на предната част на страницата, който показва изходния код в настоящия раздел: виж източника:, Пример за това би бил Предвид-източник: HTTP: //www.dotdash.com .
Друг метод е чрез интегрираните инструменти за разработчици на браузъра, достъпни чрез натискане на CTRL + SHIFT + I комбинация или чрез Инструменти за разработчици в браузъра Инструменти менюто - намерено чрез избиране на V в горния ляв ъгъл. Използването на dev инструментите позволява много по-задълбочен анализ на източника на страницата.
