Веб-страницата што ја читате ја сочинуваат, меѓу другото, изворниот код. Тоа е информациите што вашиот веб прелистувач ги презема и преведува во она што го читате токму сега.
Повеќето веб прелистувачи обезбедуваат можност да го видат изворниот код на веб-страница без дополнителен софтвер, без разлика на кој тип на уред сте.
Некои дури нудат и напредна функционалност и структура, што го олеснува проучувањето на HTML и друг програмски код на страницата.
Зошто би сакале да го видите изворен код?
Постојат неколку причини зошто можеби ќе сакате да го видите изворниот код на страницата. Ако сте веб-развивач, можеби би сакале да погледнете под покривките на некој друг стил или имплементација на некој друг програмер. Можеби сте во обезбедување на квалитет и се обидувате да утврдите зошто одреден дел од веб-страница е рендерирање или однесување како што е.
Вие исто така може да биде почетник обидувајќи се да научите како да ги корегирате вашите сопствени страници и да барате примери од реалниот свет. Се разбира, можно е да не паднете во некоја од овие категории и само да го видите изворот од чиста љубопитност.
Наведени подолу се инструкциите како да го видите изворниот код во вашиот прелистувач по избор.
Гугл хром
Работи на: Хром оперативен систем, Linux, MacOS, Windows
Верзијата на Chrome за десктоп нуди три различни методи за гледање на изворниот код на страницата, првиот и наједноставниот со користење на следнава тастатура: CTRL + U ( COMMAND + OPTION + U на macOS).
Кога ќе се притисне, оваа кратенка отвора нов табулатор во прелистувачот кој прикажува HTML и друг код за активната страница. Овој извор е кодиран во боја и структуриран на начин кој го прави поедноставен за да ги поделат и да најдат она што го барате. Исто така, можете да отидете таму со внесување на следниов текст во лентата за адреси на Chrome, додадена на левата страна од URL-то на веб-страницата и притискање на копчето Enter : изглед на изглед: (т.е. изглед на изглед: 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 во продавницата на апликации, Видот за изглед Ви прашува да внесете URL-то на страницата (или да ја копирате / залепите од лентата за адреси на Chrome, што понекогаш е наједноставниот пат за преземање) и тоа е тоа. Во прилог на прикажување на HTML и друг изворен код, апликацијата исто така има јазичиња кои прикажуваат индивидуални средства на страницата, Документ модел на документи (ДОМ), како и големината на страницата, колачињата и други интересни детали.
Мајкрософт Еџ
Вклучување на: Windows
Прелистувачот Еџ ви овозможува да ги гледате, анализирате и дури да манипулирате со изворниот код на тековната страница преку интерфејсот на Инструмент за развивач . За да пристапите до овој корисен алатник можете да користите една од овие кратенки на тастатурата: F12 или CTRL + U. Ако претпочитате глувчето наместо тоа, кликнете на копчето за мени на Еџ (три точки наоѓа во горниот десен агол) и изберете ја опцијата F12 Developer Tools од листата.
Откако алатките dev се стартуваат за прв пат, Edge додава две дополнителни опции во контекстното мени на прелистувачот (достапно со десен клик на кое било место во рамките на веб-страница): Проверете елемент и View source , вториот кој го отвора Дебагерот дел од dev алатки интерфејс населен со изворниот код.
Mozilla Firefox
Работи на: Linux, MacOS, Windows
За да го видите изворниот код на страната во десктоп верзија на Firefox, можете да притиснете CTRL + U ( COMMAND + U на macOS) на вашата тастатура, со што ќе се отвори нов табулатор со HTML и друг код за активната веб-страница.
Напишете го следниов текст во лентата за адреси на Firefox, директно налево од URL-то на страницата, наместо тоа, истиот извор да се појави на тековниот tab: view-source: (т.е. изглед на изглед: https: // www.) .
Друг начин за пристап до изворниот код на страната е преку алатките за развој на Firefox, достапни со преземање на следните чекори.
- Кликнете на копчето за главното мени, кое се наоѓа во горниот десен агол од прозорецот на прелистувачот и е претставено со три хоризонтални линии.
- Кога ќе се појави менито за избршување, кликнете на иконата Developer "key".
- Сега контекстуалното мени на Веб програмер треба да биде видливо. Изберете опција Страница извор .
Firefox исто така ви овозможува да го видите изворниот код за одреден дел од страницата, што го олеснува изолирањето на проблемите. За да го направите тоа, прво нагласете ја областа за која сте заинтересирани со глувчето. Следно, кликнете со десното копче и изберете Изглед за избирање изглед од контекстното мени на прелистувачот.
Андроид
Прегледот на изворниот код во Андроид верзија на 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 и допрете го копчето Share, се наоѓа на дното на екранот и претставува квадрат и стрелка нагоре. IOS Share Sheet сега треба да биде видлив, покривајќи ја долната половина на вашиот Safari прозорец. Скролувајте надесно и изберете го копчето View Source .
Сега треба да бидат прикажани кодирани структурирана застапеност на изворниот код на активната страница, заедно со други јазичиња кои ви дозволуваат да ги видите средствата на страницата, скриптите и друго.
macOS
За да го видите изворниот код на страницата во десктоп верзија на Safari, прво треба да го овозможите менито Develop . Чекорите подолу ве одведат преку активирање на ова скриено мени и прикажување на HTML извор на страница.
- Кликнете на Safari во менито на пребарувачот, кој се наоѓа на врвот на екранот.
- Кога се појавува опаѓачкото мени, изберете ја опцијата Опции .
- Преференците на Safari треба да бидат видливи сега. Кликнете на напредната икона, која се наоѓа на крајната десна страна од горниот ред.
- Кон дното на делот Advanced е опција етикетирана како Show Show мени во лентата со мени , придружена со празно поле. Кликнете еднаш на ова поле за да поставите знак за проверка и затворете го прозорецот Preferences со кликнување на црвениот 'x' во горниот лев агол.
- Кликнете на менито за развој , лоцирано на врвот од екранот.
- Кога ќе се појави опаѓачкото мени, изберете Show Source Page . Наместо тоа, можете да ја користите следнава тастатура: COMMAND + OPTION + U.
Opera
Работи на: 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, лоцирано во горниот лев агол од прозорецот на вашиот интернет пребарувач.
- Кога ќе се појави опаѓачкото мени, поставете го курсорот на глувчето над опцијата Повеќе алатки .
- Кликнете на менито Прикажи го програмер .
- Кликнете на логото на операта повторно.
- Кога ќе се појави опаѓачкото мени, поставете го курсорот над програмер .
- Кога се појавува под-менито, кликнете на алатки за програмери .
Вивалди
Постојат неколку начини за да го видите изворот на страницата во прелистувачот Вивалди. Наједноставниот е преку кратенка на тастатурата CTRL + U , што претставува код од активната страница во нов таб.
Исто така, можете да го додадете следниов текст на предната страна на URL-то на страницата, која го прикажува изворниот код во овој лист: view-source:. Пример за ова би бил изворот на изглед: http: // www. .
Друг метод е преку интегрираните алатки за програмери на прелистувачот, достапни со притискање на комбинацијата CTRL + SHIFT + I или преку алатката Developer Tools во менито со алатки на прелистувачот - пронајдени со кликање на логото "V" во горниот лев агол. Користењето на dev алатките овозможува многу повеќе длабинска анализа на изворот на страницата.