Погледајте изворни код веб странице у сваком прегледачу

Веб страница коју читате састоји се, између осталог, од изворног кода. То су подаци које ваш веб прегледач преузима и преводи у оно што сада читате.

Већина веб прегледача пружа могућност да видите изворни код веб странице без додатног софтвера, без обзира на тип уређаја на коме се налазите.

Неки чак нуде напредну функционалност и структуру, што олакшава читање ХТМЛ-а и других програмских кодова на страници.

Зашто желите да видите изворни код?

Постоји неколико разлога зашто желите да видите изворни код странице. Ако сте веб програмер, можда желите да покренете поглед испод поклопаца у посебном стилу или имплементацији другог програмера. Можда сте у осигурању квалитета и покушавате да утврдите зашто се одређени део веб странице рендерира или понаша тако како је.

Можете такође бити почетник који покушава да научи како кодирати сопствене странице и тражити неке примере из стварног свијета. Наравно, могуће је да не спадате у неку од ових категорија и само желите да погледате извор из чисте радозналости.

У наставку су наведена упутства о томе како да погледате изворни код у вашем претраживачу.

Гоогле Цхроме

У току: Цхроме ОС, Линук, МацОС, Виндовс

Канцеларијска верзија Цхроме-а нуди три различите методе за преглед изворног кода странице, прву и најједноставнију помоћу следеће пречице на тастатури: ЦТРЛ + У (ЦОММАНД + ОПТИОН + У на мацОС).

Када се притисне, ова пречица отвара нову картицу прегледача која приказује ХТМЛ и други код за активну страницу. Овај извор је кодиран у бојама и структуриран на начин који олакшава раздвајање и проналажење онога што тражите. Такође можете стићи тако што ћете унети сљедећи текст у Цхроме адресар, додан на лијеву страну УРЛ адресе веб странице и одабрати Ентер кључ: виев-соурце: (тј., извор-поглед: хттпс: //ввв.лифевире.цом).

Трећи метод је преко Цхроме-ових алата за развијање, који вам омогућавају да подигнете дубљи ритам у код странице, као и да га поставите на љето у сврху тестирања и развоја. Интерфејс алата за програмера се може отворити и затворити помоћу ове пречице на тастатури: ЦТРЛ + СХИФТ + И (ЦОММАНД + ОПТИОН + И на мацОС). Можете их такође покренути тако што ћете извршити следећу путању.

Изаберите Цхроме дугме за главни мени, налази се у горњем десном углу и представља три вертикално поравнане тачке.
Када се појави падајући мени, померите курсор миша преко њега Још алата опција.
Када се појави подмени, изаберите Алатке за развој.

Андроид

Прегледавање извора веб странице у Цхроме-у за Андроид је једноставно као додавање следећег текста на предњој страни адресе (или УРЛ-а) и подношењем: виев-соурце:. Пример овога би био погледај извор: хттпс: //ввв.лифевире.цом . ХТМЛ и други код са странице у питању биће одмах приказани у активном прозору.

иОС

Иако нема изворних метода за прегледање изворног кода помоћу Цхроме-а на иПад-у, иПхоне-у или иПод тоуцх-у, најједноставнији и најефикаснији је кориштење рјешења треће стране, као што је апликација Виев Соурце.

Доступно за 0,99 долара у Апп Сторе-у, Изворни извор захтева од вас да унесете УРЛ адресу (или копирате / налепите са адресе Цхроме адресе, што је понекад најједноставнији пут) и то је то. Поред приказивања ХТМЛ-а и другог изворног кода, апликација такође садржи картице које приказују појединачна средства странице, Модел предмета документа (ДОМ), као и величину странице, колачиће и друге занимљиве детаље.

Мицрософт ивица

Трчање на: Виндовс

Пречник Едге вам омогућава да прегледате, анализирате и чак манипулирате изворним кодом тренутне странице преко интерфејса за алате за програмере. Да бисте приступили овом практичном сету алатки, можете користити једну од ових пречица на тастатури: Ф12 или ЦТРЛ + У. Ако бисте више волели да користите миш, кликните на дугме менија Едге (три тачке смештене у горњем десном углу) и изаберите Ф12 Девелопер Тоолс опцију са листе.

Након што први пут покреће алат дев, Едге додаје још двије опције у контекстуални мени прегледача (доступно десним кликом било гдје у оквиру веб странице): Прегледати елемент и Погледајте извор, а други који отвара Дебугер део интерфејса дев алата попуњен изворним кодом.

Мозилла Фирефок

Руннинг он: Линук, МацОС, Виндовс

Да бисте видели изворни код странице на десктоп верзији Фирефока, можете притиснути ЦТРЛ + У (ЦОММАНД + У на мацОС) на вашој тастатури, која ће отворити нову картицу која садржи ХТМЛ и други код за активну веб страницу.

Ако упишете следећи текст у адресну траку Фирефока, директно на лијевој страни УРЛ-а странице ће се појавити исти извор на тренутној картици: виев-соурце: ( тј., погледај извор: хттпс: //ввв.дотдасх.цом ).

Још један начин приступа изворном коду странице је преко алатки за развој Фирефока, доступни тако што ћете предузети следеће кораке.

Изаберите дугме главног менија, који се налази у горњем десном углу прозора прегледача и представљају три хоризонталне линије.
Када се појави поп-оут мени, кликните на Девелопер икона "кључа".
Контекстни мени Веб Девелопер сада би требало да буде видљив. Изаберите Извор странице опција.

Фирефок вам такође омогућава приказ изворног кода за одређени део странице, што олакшава изоловање проблема. Да бисте то учинили, прво означите подручје које вас занима помоћу миша. Затим, кликните десним тастером миша и изаберите Погледајте извор извора из контекстног менија прегледача.

Андроид

Преглед изворног кода у Андроид верзији Фирефок-а може се постићи префиксом УРЛ-а веб странице са следећим текстом: виев-соурце:. На пример, да бисте погледали ХТМЛ извор за Дотдасх, у насловној траци прегледача пошаљите следећи текст: погледај извор: хттпс: //ввв.дотдасх.цом .

иОС

Наша препоручена метода за приказивање изворног кода веб странице на вашем иПад-у, иПхоне-у или иПод тоуцх-у је кроз апликацију Виев Соурце, доступна у Апп Сторе за $ 0.99. Иако нису директно интегрисани са Фирефок-ом, лако можете копирати и налепити УРЛ из прегледача у апликацију како бисте открили ХТМЛ и други код који је повезан са датом страном.

Аппле Сафари

Трчање на иОС и МацОС

иОС

Иако Сафари за иОС не укључује могућност приказа извора странице по подразумеваној вредности, претраживач се прилично интегрише у апликацију Виев Соурце, доступан у Апп Сторе за $ 0.99.

Након инсталирања ове апликације треће стране, вратите се у претраживач Сафари и додирните дугме Схаре, налази се на дну екрана и представља квадратом и стрелицом за горе. ИОС Схаре Схеет сада треба да буде видљив, прекривајући доњу половину прозора Сафари. Померите се десно и изаберите Виев Соурце дугме.

Сада би требали бити приказани структурирани прикази изворног кода активне странице, заједно са другим картицама које вам омогућавају да прегледате имовину странице, скрипте и још много тога.

мацОС

Да бисте погледали изворни код странице у десктоп верзији Сафари, прво морате да омогућите његово Развити мени. Следећи кораци шетају кроз активирање овог скривеног менија и приказивање ХТМЛ-а странице странице.

Изаберите Сафари у менију прегледача, налази се на врху екрана.
Када се појави падајући мени, изаберите Преференцес опција.
Сафари'с Преференцес сада би требали бити видљиви. Кликните на Напредна икона, која се налази на крајњој десној страни горњег реда.
Према дну Напредног одељка је означена опција Покажи мени Развиј у менију, уз празно поље за потврду. Изаберите ово поље једном да бисте поставили знак за потврду и затворите прозор "Преференце" тако што ћете кликнути на црвени знак "к" који се налази у горњем левом углу.
Изаберите Развити мени, који се налази на врху екрана.
Када се појави падајући мени, изаберите Прикажи страницу Извор. Уместо тога можете користити и сљедећу пречицу на тастатури: ЦОММАНД + ОПТИОН + У.

Опера

Руннинг он: Линук, МацОС, Виндовс

За преглед изворног кода са активне веб странице у претраживачу Опера користите следећу пречицу на тастатури: ЦТРЛ + У (ЦОММАНД + ОПТИОН + У на мацОС). Ако бисте више волели да учитате извор на тренутној картици, укуцајте следећи текст на лијевој страни УРЛ адресе у адресној траци и притисните Унесите: поглед са извора: ( тј., погледај извор: хттпс: //ввв.лифевире.цом ).

Радна верзија Опера-а такође вам омогућава да прегледате ХТМЛ извор, ЦСС и друге елементе користећи своје интегрисане алате за развој. Да бисте покренули овај интерфејс, који ће се подразумевано појавити на десној страни главног прозора прегледача, притисните следећу пречицу на тастатури: ЦТРЛ + СХИФТ + И (ЦОММАНД + ОПТИОН + И на мацОС).

Опера програмски алат је доступан тако што ћете предузети следеће кораке.

Изаберите логотип Опера који се налази у горњем левом углу прозора прегледача.
Када се појави падајући мени, померите курсор миша преко њега Још алата опција.
Кликните на Покажите мени програмера.
Поново изаберите Оперу лого.
Када се појави падајући мени, померите курсор изнад Девелопер.
Када се појави подмени, изаберите Алатке за развој.

Вивалди

Постоји више начина за приказ извора странице унутар претраживача Вивалди. Најједноставније је преко ЦТРЛ + У тастерска пречица, која представља шифру са активне стране у новом језичку.

Такође можете додати сљедећи текст на предњу страну УРЛ-а, који приказује изворни код на овом картици: виев-соурце:. Пример овога би био погледај извор: хттп: //ввв.дотдасх.цом .

Друга метода је преко интегрисаних алата претраживача, доступних притиском на ЦТРЛ + СХИФТ + И комбинација или кроз Алатке за развој опција у претраживачу Алати мени - пронађен одабиром В лого у горњем левом углу. Коришћење дев алата омогућава много детаљнију анализу извора странице.