Веб страница коју читате састоји се, између осталог, од изворног кода. То су подаци које ваш веб прегледач преузима и преводи у оно што сада читате.
Већина веб прегледача пружа могућност да видите изворни код веб странице без додатног софтвера, без обзира на тип уређаја на коме се налазите.
Неки чак нуде напредну функционалност и структуру, што олакшава читање ХТМЛ- а и других програмских кодова на страници.
Зашто желите да видите изворни код?
Постоји неколико разлога зашто желите да видите изворни код странице. Ако сте веб програмер, можда желите да покренете поглед испод поклопаца у посебном стилу или имплементацији другог програмера. Можда сте у осигурању квалитета и покушавате да утврдите зашто се одређени део веб странице рендерира или понаша тако како је.
Можете такође бити почетник који покушава да научи како кодирати сопствене странице и тражити неке примере из стварног свијета. Наравно, могуће је да не спадате у неку од ових категорија и само желите да погледате извор из чисте радозналости.
У наставку су наведена упутства о томе како да погледате изворни код у вашем претраживачу.
Гоогле Цхроме
У току: Цхроме ОС, Линук, МацОС, Виндовс
Канцеларијска верзија Цхроме-а нуди три различите методе за преглед изворног кода странице, прву и најједноставнију помоћу следеће пречице на тастатури: ЦТРЛ + У ( ЦОММАНД + ОПТИОН + У на мацОС).
Када се притисне, ова пречица отвара нову картицу прегледача која приказује ХТМЛ и други код за активну страницу. Овај извор је кодиран у бојама и структуриран на начин који олакшава раздвајање и проналажење онога што тражите. Такође можете стићи тако што ћете унети сљедећи текст у Цхроме адресар, додато лијевом страном УРЛ адресе веб странице, а притиском на тастер Ентер : погледајте извор: (тј. Поглед извора: хттпс: // ввв .).
Трећи метод је преко Цхроме-ових алата за развијање , који вам омогућавају да подигнете дубљи ритам у код странице, као и да га поставите на љето у сврху тестирања и развоја. Интерфејс алата за програмере се може отворити и затворити помоћу ове пречице на тастатури: ЦТРЛ + СХИФТ + И ( ЦОММАНД + ОПТИОН + И на мацОС). Можете их такође покренути тако што ћете извршити следећу путању.
- Кликните на дугме Цхроме-а у главном менију, који се налази у горњем десном углу и представља три вертикално поравнане тачке.
- Када се појави падајући мени, померите курсор миша преко опције Више алата .
- Када се појави подмени, кликните на алатке за програмере .
Андроид
Прегледавање извора веб странице у Цхроме-у за Андроид је једноставно као додавање следећег текста на предњу адресу (или УРЛ) и подношењем: виев-соурце:. Пример овога би био извор гледања: хттпс: // ввв. . ХТМЛ и други код са странице у питању биће одмах приказани у активном прозору.
иОС
Иако нема изворних метода за прегледање изворног кода помоћу Цхроме-а на иПад-у, иПхоне-у или иПод тоуцх-у, најједноставнији и најефикаснији је кориштење рјешења треће стране, као што је апликација Виев Соурце.
Доступно за 0,99 долара у Апп Сторе-у, Изворни извор захтева од вас да унесете УРЛ адресу (или копирате / налепите са адресе Цхроме адресе, што је понекад најједноставнији пут) и то је то. Поред приказивања ХТМЛ-а и другог изворног кода, апликација такође садржи табулаторе који приказују појединачна средства странице, Модел предмета документа (ДОМ), као и величину странице, колачиће и друге занимљиве детаље.
Мицрософт ивица
Трчање на: Виндовс
Пречник Едге вам омогућава да прегледате, анализирате и чак манипулирате изворним кодом тренутне странице преко интерфејса за алате за програмере . Да бисте приступили овом практичном сету алатки, можете користити једну од ових пречица на тастатури: Ф12 или ЦТРЛ + У. Ако бисте више волели да користите миш, кликните на дугме менија Едге (три тачке смештене у горњем десном углу) и изаберите опцију Ф12 Девелопер Тоолс са листе.
Након првог покретања дев алата, Едге додаје две додатне опције у контекст мени менија претраживача (доступним десним кликом било где унутар веб странице): Инспецт елемент и Виев соурце , а други који отвара део Дебуггер- а дев интерфејс алата попуњен изворним кодом.
Мозилла Фирефок
Руннинг он: Линук, МацОС, Виндовс
Да бисте видели изворни код странице на десктоп верзији Фирефока, можете притиснути ЦТРЛ + У ( ЦОММАНД + У на мацОС) на вашој тастатури, која ће отворити нови табулатор који садржи ХТМЛ и други код за активну веб страницу.
Ако упишете следећи текст у адресну траку Фирефока, директно с леве стране УРЛ-а странице, исти ће се појавити на тренутном картици умјесто: виев-соурце: (тј. Извор-поглед: хттпс: // ввв.) .
Још један начин приступа изворном коду странице је преко алатки за развој Фирефока, доступни тако што ћете предузети следеће кораке.
- Кликните на дугме главног менија, који се налази у горњем десном углу прозора прегледача и представљају три хоризонталне линије.
- Када се појави поп-оут мени, кликните на икону "кључа" за програмере .
- Контекстни мени Веб Девелопер сада би требало да буде видљив. Изаберите опцију Соурце Паге .
Фирефок вам такође омогућава приказ изворног кода за одређени део странице, што олакшава изоловање проблема. Да бисте то учинили, прво означите подручје које вас занима помоћу миша. Затим кликните десним тастером миша и изаберите Виев Селецтион Соурце из контекстног менија прегледача.
Андроид
Преглед изворног кода у Андроид верзији Фирефок-а може се постићи префиксом УРЛ адресе веб странице са следећим текстом: виев-соурце:. На пример, да бисте видели извор ХТМЛ-а за слање следећег текста у адресну линију прегледача: виев-соурце: хттпс: // ввв. .
иОС
Наша препоручена метода за приказивање изворног кода веб странице на вашем иПад-у, иПхоне-у или иПод тоуцх-у је кроз апликацију Виев Соурце, доступна у Апп Сторе за $ 0.99. Иако нису директно интегрисани са Фирефок-ом, лако можете копирати и налепити УРЛ из прегледача у апликацију како бисте открили ХТМЛ и други код који је повезан са датом страном.
Аппле Сафари
Трчање на иОС и МацОС
иОС
Иако Сафари за иОС не укључује могућност приказа извора странице по подразумеваној вредности, претраживач се прилично интегрише у апликацију Виев Соурце - доступан у Апп Сторе за $ 0.99.
Након инсталирања ове апликације треће стране, вратите се у претраживач Сафари и додирните дугме Схаре, налази се на дну екрана и представља квадратом и стрелицом за горе. ИОС Схаре Схеет сада треба да буде видљив, прекривајући доњу половину прозора Сафари. Померите се десно и изаберите дугме Виев Соурце .
Сада би требали бити приказани структурирани прикази изворног кода активне странице, заједно са другим картицама које вам омогућавају да прегледате имовину странице, скрипте и још много тога.
мацОС
Да бисте погледали изворни код странице у десктоп верзији Сафари, прво морате омогућити његов развојни мени. Следећи кораци шетају кроз активирање овог скривеног менија и приказивање ХТМЛ-а странице странице.
- Кликните на Сафари у менију прегледача, који се налази на врху екрана.
- Када се појави падајући мени, изаберите опцију Преференцес .
- Сафари'с Преференцес сада би требали бити видљиви. Кликните на икону Напредна , која се налази на крајњој десној страни горњег реда.
- Према дну Напредног одељка је опција означена као Схов Схов мени на траци са менијима , уз празно поље за потврду. Кликните на ово поље једном да бисте поставили знак за потврду и затворите прозор "Преференцес" кликом на црвени "к" који се налази у горњем левом углу.
- Кликните на мени Развити , који се налази на врху екрана.
- Када се појави падајући мени, изаберите Схов Паге Соурце . Умјесто тога можете користити сљедећу пречицу на тастатури: ЦОММАНД + ОПТИОН + У.
Опера
Руннинг он: Линук, МацОС, Виндовс
За преглед изворног кода са активне веб странице у претраживачу Опера користите следећу пречицу на тастатури: ЦТРЛ + У ( ЦОММАНД + ОПТИОН + У на мацОС). Ако бисте више волели да убаците извор на тренутну картицу, укуцајте следећи текст на лијевој страни УРЛ адресе у адресној траци и притисните Ентер : виев-соурце: (тј. Погледајте извор: хттпс: // ввв. ).
Радна верзија Опера-а такође вам омогућава да прегледате ХТМЛ извор, ЦСС и друге елементе користећи своје интегрисане алате за развој . Да бисте покренули овај интерфејс, који ће се подразумевано појавити на десној страни вашег главног прозора прегледача, притисните следећу пречицу на тастатури: ЦТРЛ + СХИФТ + И ( ЦОММАНД + ОПТИОН + И на мацОС).
Опера програмски алат је доступан тако што ћете предузети следеће кораке.
- Кликните на лого опера, који се налази у горњем левом углу прозора прегледача.
- Када се појави падајући мени, померите курсор миша преко опције Више алата .
- Кликните на мени Прикажи програмер .
- Поново кликните на лого опера.
- Када се појави падајући мени, поставите курсор преко програма Девелопер .
- Када се појави подмени, кликните на Алатке за развој .
Вивалди
Постоји више начина за приказ извора странице унутар претраживача Вивалди. Најједноставније је преко пречице тастера ЦТРЛ + У , која представља шифру са активне странице у новом језичку.
Такођер можете додати сљедећи текст на предњу страницу УРЛ-а, који приказује изворни код на овом картици: виев-соурце:. Пример овога би био извор гледања: хттп: // ввв. .
Друга метода је помоћу интегрисаних алата за претраживаче претраживача, доступним притиском комбинације ЦТРЛ + СХИФТ + И или кроз алатку Девелопер Тоолс у менију Тоолс претраживача - пронађено кликом на лого "В" у горњем левом углу. Коришћење дев алата омогућава много детаљнију анализу извора странице.