Як прагледзець зыходны код вэб-старонкі ў любым браўзэры

Вэб-старонка, якую вы чытаеце, складаецца з, сярод іншага, зыходнага кода. Гэта інфармацыйныя загрузкі вэб-браўзэра і перакладаецца ў тое, што вы зараз чытаеце.

Большасць вэб-браўзэраў прадастаўляюць магчымасць праглядаць зыходны код вэб-старонкі без дадатковага праграмнага забеспячэння не патрабуецца, незалежна ад таго, які тып прылады вы на.

Некаторыя нават прапануюць пашыраную функцыянальнасць і структуру, што робіць яго лягчэй , каб праглядзець HTML і іншай праграмны код на гэтай старонцы.

Чаму вы хочаце, каб убачыць зыходны код?

Ёсць некалькі прычын, чаму вы можаце захацець, каб убачыць зыходны код старонкі толькі. Калі вы вэб-распрацоўшчык, магчыма, вы хацелі б зірнуць пад коўдрай у пэўным стылі або рэалізацыі іншага праграміста. Можа быць, вы ў забеспячэнні якасці і спрабуюць высветліць, чаму пэўная частка вэб-старонкі рэндэрынгу ці паводзіць сябе так, як яно ёсць.

Вы таксама можаце быць пачаткоўцам, спрабуючы даведацца, як кадаваць свае ўласныя старонкі і шукаюць некаторыя рэальныя прыклады. Вядома, цалкам магчыма, што вы не патрапілі ні ў адну з гэтых катэгорый, і вы хочаце, каб праглядзець крыніца з чыстага цікаўнасці.

Ніжэй прыведзены інструкцыі аб тым, як прагледзець зыходны код у вашым браўзэры выбару.

Google Chrome

Працуе на: Chrome OS, Linux, MacOS, Windows

Настольная версія Chrome прапануе тры розных метаду для прагляду зыходнага кода старонкі толькі першы і самы найпросты, выкарыстоўваючы наступную камбінацыю клавіш: CTRL + U (COMMAND + OPTION + U на MacOS).

Пры націску гэтага ярлык адкрывае новую ўкладку браўзэра, адлюстроўвае HTML і іншы код для актыўнай старонкі. Гэтая крыніца з'яўляецца колерам і структураваны такім чынам, што робіць яго прасцей палічкі і знайсці тое, што вы шукаеце. Вы таксама можаце атрымаць там, увёўшы наступны тэкст у адраснай радку Хрому, які дадаецца да левай частцы вэб - старонкі URL , і націснуць клавішу ўводу: выгляд-крыніца: (гэта значыць, выгляд-крыніца: https: // WWW .).

Трэці метад з дапамогай у Chrome інструменты для распрацоўшчыкаў , якія дазваляюць прыняць больш глыбокае апусканне ў код старонкі, а таксама наладзіць яго на ляту для мэт тэставання і распрацоўкі. Інтэрфейс інструментаў распрацоўніка можа быць адкрыты і закрыты з дапамогай гэтай камбінацыі клавіш: CTRL + SHIFT + I (Command + Option + I на MacOS). Вы таксама можаце запусціць іх, узяўшы на наступны шлях.

  1. Націсніце на галоўным меню кнопкі Chrome, размешчаны ў верхнім правым куце і прадстаўлена трыма вертыкальна выраўнаваных кропак.
  2. Калі з'явіцца выпадальнае меню, навядзіце курсор мышы на Дадатковыя опцыі інструментаў.
  3. Калі з'явіцца падменю, націсніце на інструменты распрацоўніка.

Android
Прагляд крыніцы вэб - старонкі ў Chrome для Android гэтак жа проста , як прыкладаючы наступны тэкст перад яго адрас (або URL) і яго ўяўленні: выгляд-крыніца :. Прыкладам гэтага можа быць выгляд-крыніца: https: // WWW. , HTML і іншы код з дадзенай старонкі будуць маментальна адлюстроўваюцца ў актыўным акне.

IOS
Пакуль няма натыўных метад для прагляду зыходнага кода з дапамогай Chrome на вашым IPAD, iPhone або IPod Touch, самыя просты і найбольш эфектыўным з'яўляецца выкарыстанне рашэння трэціх бакоў, такім, як прыкладанне View Source.

Даступны па цане $ 0,99 у App Store, View Source прапануе ўвесці URL дадзенай старонкі (або скапіяваць / ўставіць яго з адраснай радкі Chrome, які часам самы просты шлях ўзяць) і гэта ўсё. У дадатак да паказу HTML і іншай зыходны код, дадатак таксама мае ўкладкі , якія адлюстроўваюць асобныя актывы старонак, аб'ектнай мадэлі дакумента (DOM), а таксама памер старонкі, печыва і іншыя цікавыя падрабязнасці.

Microsoft Край

Бег на: Вокны

Грані браўзэр дазваляе праглядаць, аналізаваць і нават маніпуляваць зыходны код бягучай старонкі праз сродкі распрацоўніка інтэрфейсу. Каб атрымаць доступ да гэтай зручнай набор інструментаў , вы можаце выкарыстоўваць адзін з гэтых спалучэнняў клавіш: F12 або CTRL + U. Калі вы аддаеце перавагу мыш замест гэтага, націсніце на кнопку меню Эджа (тры кропкі , размешчаныя ў верхнім правым куце) і абярыце опцыю Tools F12 Developer з спісу.

Пасля таго , як сродкі распрацоўкі выконваюцца ў першы раз, краю дадае дзве дадатковыя опцыі ў кантэкстнае меню браўзэра (даступныя пстрыкнуўшы правай кнопкай мышы ў любым месцы вэб - старонкі): Праверце элемент і выгляд крыніцы, апошні , які адкрывае Debugger частка распрацоўніка інструменты інтэрфейс заселены з праграмным кодам.

Mozilla Firefox

Бег на: Linux, MacOS, Windows

Для прагляду зыходнага кода старонкі толькі ў настольнай версіі Firefox вы можаце націснуць CTRL + U (Ctrl + U на MacOS) на клавіятуры, якая будзе адкрываць новую ўкладку , якая змяшчае HTML і іншы код для актыўнага вэб - старонкі.

Typing наступны тэкст у адраснай радку браўзэра Firefox, непасрэдна злева ад URL - старонкі, выкліча той жа крыніца , каб паказаць на бягучай ўкладцы замест: выгляд-крыніца: (гэта значыць, выгляд-крыніца: https :. // WWW) ,

Іншы спосаб доступу зыходны код старонкі толькі праз інструменты распрацоўніка Firefox, даступны, прыняўшы наступныя крокі.

  1. Націсніце на кнопку галоўнага меню, размешчанай у правым верхнім куце акна браўзэра і прадстаўлены трыма гарызантальнымі лініямі.
  2. Калі з'явіцца выпадальнае меню, націсніце на значок гаечны ключ распрацоўніка «».
  3. Web Developer Цяпер кантэкстнае меню павінна быць відаць. Выберыце опцыю Зыходны код старонкі.

Firefox таксама дазваляе праглядаць зыходны код для пэўнай часткі старонкі, што робіць яго лёгка ізаляваць праблемы. Для гэтага спачатку вылучыце вобласць, якую вы зацікаўлены ў з дапамогай мышы. Затым пстрыкніце правай кнопкай мышы і выберыце View Selection Source з кантэкстнага меню браўзэра.

Android
Прагляд зыходнага кода ў Android версіі Firefox дасягальна папярэднічаючы URL вэб - старонкі з тэкстам: выгляд-крыніца :. Напрыклад, каб прагледзець зыходны код HTML для вас бы прадставіць наступны тэкст у адраснай радку браўзэра: Выгляд-крыніца: https: // WWW. ,

IOS
Наш рэкамендуемы метад для прагляду вэб-старонак зыходнага кода на вашым IPAD, iPhone або IPod Touch праз прыкладанне View Source, даступных у App Store за $ 0,99. У той час як не інтэграваныя непасрэдна з Firefox, вы можаце лёгка скапіяваць і ўставіць URL з браўзэра ў дадатак для таго, каб раскрыць HTML і іншыя коды, звязаныя з дадзенай старонкі.

Apple Safari

Бег на прашыўцы і MacOS

IOS
Хоць Safari для прашыўкі не ўключае ў сябе магчымасць прагляду зыходнага кода старонкі па змаўчанні, браўзэр інтэграцыя даволі лёгка з View Source прыкладання навакольлі - Працуе ў App Store за $ 0,99.

Пасля ўстаноўкі гэтай трэцяй бокам прыкладанне вярнуцца ў браўзэр Safari і націсніце на кнопку Адправіць, размешчаную ў ніжняй частцы экрана і прадстаўленага квадрата і стрэлка ўверх. Цяпер IOS Share Sheet павінен быць бачны, накладзеная на ніжнюю палову акна Safari. Вылучыце направа і абярыце кнопку View Source.

З каляровым кодам, структураванае ўяўленне зыходнага кода актыўнай старонкі зараз павінна адлюстроўвацца разам з іншымі укладкамі, якія дазваляюць праглядаць старонкі актываў, скрыпты і многія іншыя.

Macos
Для прагляду зыходнага кода старонкі ў настольнай версіі Safari, спачатку неабходна ўключыць яго ў меню Develop. Крокі ніжэй вас па актывізацыі гэтага схаванае меню і адлюстравання старонкі крыніцы HTML.

  1. Націсніце на сафары ў меню браўзэра, размешчаным у верхняй частцы экрана.
  2. Калі з'явіцца выпадальнае меню, выберыце опцыю Налады.
  3. Цяпер Налады Safari павінны быць бачныя. Націсніце на значок Advanced, размешчанай на далёкай правай частцы верхняй радка.
  4. Да ніжняй часткі пашыранай часткі варыянт маркіраваныя Паказаць Распрацуйце меню ў радку меню, у суправаджэнні пустога сцяжка. Націсніце на гэта поле адзін раз, каб паставіць галачку ў ім, і зачыніце акно налад, націснуўшы на значок «X» ў верхнім левым куце.
  5. Націсніце на меню Develop, размешчаным у верхняй частцы экрана.
  6. Калі з'явіцца выпадальнае меню, абярыце Паказаць старонку Source. Акрамя таго, можна выкарыстоўваць наступную камбінацыю клавіш замест: COMMAND + OPTION + U.

опера

Бег на: Linux, MacOS, Windows

Для прагляду зыходнага кода з актыўнай вэб - старонкі ў браўзэры Opera з дапамогай наступнай камбінацыі клавіш: CTRL + U (COMMAND + OPTION + U на MacOS). Калі вы аддаеце перавагу загрузкі крыніцы ў бягучай ўкладцы замест гэтага, увядзіце наступны тэкст злева ад URL старонкі ў межах адраснага радка і націсніце Enter: выгляд крыніцы (гэта значыць, выгляд крыніца: https: // WWW. ).

Настольная версія Opera таксама дазваляе праглядаць крыніца HTML, CSS і іншыя элементы , з дапамогай сваіх інтэграваных сродкаў распрацоўкі . Для таго, каб запусціць гэты інтэрфейс, які па змаўчанні будзе адлюстроўвацца на правай баку галоўнага акна браўзэра, націсніце наступную камбінацыю клавіш: CTRL + SHIFT + I (Command + Option + I на MacOS).

Распрацоўшчык набор інструментаў Opera, таксама даступныя, прыняўшы наступныя крокі.

  1. Націсніце на лагатып Opera, размешчаны ў левым верхнім куце акна браўзэра.
  2. Калі з'явіцца выпадальнае меню, навядзіце курсор мышы на Дадатковыя опцыі інструментаў.
  3. Націсніце на меню Show распрацоўшчыкаў.
  4. Націсніце на лагатып Opera зноў.
  5. Калі з'явіцца выпадальнае меню, навядзіце курсор на распрацоўшчык.
  6. Калі з'явіцца падменю, націсніце на Інструменты распрацоўніка.

Vivaldi

Ёсць некалькі спосабаў прагляду зыходнага кода старонкі ў браўзэры Вівальдзі. Прасцей за ўсё з дапамогай камбінацыі клавіш CTRL + U, які ўяўляе код з актыўнай старонкі ў новай ўкладцы.

Акрамя таго, можна дадаць наступны тэкст перад URL старонкі, які адлюстроўвае зыходны код на ўкладцы Прысутнічаюць: выгляд-крыніца :. Прыкладам гэтага можа быць выгляд-крыніца: HTTP: // WWW. ,

Іншы метад праз інтэграваныя інструменты распрацоўніка браўзэра, даступны, націснуўшы спалучэнне клавіш CTRL + SHIFT + I камбінацыя або з дапамогай опцыі інструментаў распрацоўніка ў меню Сэрвіс браўзэра - знойдзена, націснуўшы на лагатып "V" у верхнім левым куце. Выкарыстанне сродкі распрацоўкі дазваляе значна больш глыбокі аналіз крыніцы старонкі.