Како користити алатке за програмере веб претраживача

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

Прошли су дани када су вам једини алати за програмирање и тестирање пронађени у прегледачу омогућавали да видите изворни код странице и ништа више. Данашњи прегледачи вам омогућавају да зароните много дубље радећи ствари као што су извршавање и отклањање грешака ЈаваСцрипт исечке, проверу и уређивање ДОМ елемената, надгледање мрежног саобраћаја у реалном времену док се ваша апликација или страница учитавају на идентификујте уска грла, анализирајући ЦСС перформансе, осигуравајући да ваш код не користи превише меморије или превише многи Процесори циклуси и још много тога.

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

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

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

Тхе Хром алатке за програмере вам омогућавају да уређујете и отклањате грешке кода, ревидирате појединачне компоненте како бисте открили проблеме са перформансама, симулирате различите екране уређаја, укључујући оне који користе Андроид или иОС, и обављају неколико других корисних функција.

1. Изаберите Цхроме главни мени, означен са три хоризонталне линије и налази се у горњем десном углу претраживача.

2. Када се појави падајући мени, пређите курсором миша преко Више алата опција.

   

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

   

4. Интерфејс Цхроме Девелопер Тоолс би сада требало да буде приказан, као што је приказано на овом примеру снимка екрана. У зависности од ваше верзије Цхроме-а, почетни изглед који видите може се мало разликовати од оног представљеног овде. Главно чвориште алата за програмере, које се обично налази на доњој или десној страни екрана, садржи следеће картице.

5. Поред ових одељака, можете приступити и следећим алатима преко >> икона, која се налази десно од Перформансе таб.

   • Меморија: Надгледање и снимање употребе меморије на веб страници. Можете видети колико је тежак ЈаваСцрипт на вашој веб локацији.
   • Безбедност: Истиче проблеме са сертификатом и друге проблеме везане за безбедност са активном страницом или апликацијом.
   • Апликација: Прегледајте ресурсе које користи веб апликација. Добијте потпуни преглед онога што се користи.
   • Ревизије: Нуди начине за оптимизацију времена учитавања странице или апликације и опште перформансе.

   

6. Режим уређаја омогућава вам да видите активну страницу у симулатору који је приказује скоро тачно онако како би се појавила на једном од преко десетак уређаја, укључујући неколико познатих Андроид и иОС модела као што су иПад, иПхоне и Самсунг Галаки. Такође вам је дата могућност да емулирате прилагођене резолуције екрана које одговарају вашим специфичним потребама развоја или тестирања.

   Да искључи Режим уређаја укључите и искључите, изаберите икона мобилног телефона који се налази директно лево од Елементи таб.

   

7. Такође можете прилагодити изглед и осећај алата за програмере тако што ћете прво изабрати дугме менија заступа три вертикално постављене тачке и налази се на крајњој десној страни горе поменутих картица.

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

   

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

Одељак за веб програмере Фирефок-а укључује алате за дизајнере, програмере и тестере, попут уређивача стилова и пикселских капаљки.

1. Изаберите Фирефок главни мени, заступа три хоризонталне линије и налази се у горњем десном углу прозора претраживача.

2. Када се појави падајући мени, изаберите Веб Девелопер.

   

3. Тхе Мени за веб програмере сада би требало да буде приказано, са следећим опцијама. Приметићете да већина ставки менија има пречице на тастатури повезане са њима.

   • Тоггле Тоолс: Приказује или сакрива интерфејс алатки за програмере, који се обично налази на дну прозора прегледача. Пречица на тастатури: Мац ОС Кс (АЛТ(ОПЦИЈА)+КОМАНДА+И), Виндовс (ЦТРЛ+СХИФТ+И)
   • инспекторе: Омогућава вам да прегледате и/или подесите ЦСС и ХТМЛ код на активној страници као и на преносивом уређају путем даљинског отклањања грешака. Пречица на тастатури: Мац ОС Кс (АЛТ(ОПЦИЈА)+ЦОММАНД+Ц), Виндовс (ЦТРЛ+СХИФТ+Ц)
   • Веб Цонсоле: Омогућава вам да извршите ЈаваСцрипт изразе унутар активне странице, као и да прегледате разнолик скуп евидентираних података укључујући безбедносна упозорења, мрежне захтеве, ЦСС поруке и још много тога. Пречица на тастатури: Мац ОС Кс (АЛТ(ОПЦИЈА)+КОМАНДА+К), Виндовс (ЦТРЛ+СХИФТ+К)
   • Дебуггер: Тхе ЈаваСцрипт Дебуггер омогућава вам да прецизно одредите и поправите дефекте постављањем тачака прекида, провером ДОМ чворова, црним боксом спољних извора и још много тога. Као што је случај са инспекторе, ова функција такође подржава удаљено отклањање грешака. Пречица на тастатури: Мац ОС Кс (АЛТ(ОПЦИЈА)+ЦОММАНД+С), Виндовс (ЦТРЛ+СХИФТ+С)
   • Стиле Едитор: Омогућава вам да креирате нове таблице стилова и уградите их у активну веб страницу, или да уређујете постојеће листове и тестирате како се ваше промене приказују у прегледачу само једним кликом. Пречица на тастатури: Мац ОС Кс, Виндовс (СХИФТ+Ф7)
   • Перформансе: Пружа детаљан преглед мрежних перформанси активне странице, податке о брзини кадрова, време и стање извршавања ЈаваСцрипт-а, треперење боје и још много тога. Пречица на тастатури: Мац ОС Кс, Виндовс (СХИФТ+Ф5)
   • Мрежа: Наводи сваки мрежни захтев који је покренуо претраживач заједно са одговарајућим методом, изворним доменом, типом, величином и протеклим временом. Пречица на тастатури: Мац ОС Кс (АЛТ(ОПЦИЈА)+КОМАНДА+К), Виндовс (ЦТРЛ+СХИФТ+К)
   • Инспектор за складиштење:Погледајте кеш меморију и колачиће које чува веб локација. Пречица на тастатури: (СХИФТ+Ф9)
   • Трака са алаткама за програмере: Отвара интерактивни тумач командне линије. Ентер помоћ у интерпретер за листу свих доступних команди и њихову одговарајућу синтаксу. Пречица на тастатури: Мац ОС Кс, Виндовс (СХИФТ+Ф2)
   • ВебИДЕ: Пружа могућност креирања и извршавања веб апликација преко стварног уређаја који користи Фирефок ОС или преко Фирефок ОС Симулатора. Пречица на тастатури: Мац ОС Кс, Виндовс (СХИФТ+Ф8)
   • Конзола претраживача: Пружа исту функционалност као Веб Цонсоле (види горе). Међутим, сви враћени подаци се односе на целу Фирефок апликацију (укључујући проширења и функције на нивоу претраживача) за разлику од само активне веб странице. Пречица на тастатури: Мац ОС Кс (СХИФТ+ЦОММАНД+Ј), Виндовс (ЦТРЛ+СХИФТ+Ј)
   • Респонсиве Десигн Виев: Омогућава вам да тренутно прегледате веб страницу у различитим резолуцијама, изгледима и величинама екрана како бисте имитирали више уређаја укључујући таблете и паметне телефоне. Пречица на тастатури: Мац ОС Кс (АЛТ(ОПЦИЈА)+КОМАНДА+М), Виндовс (ЦТРЛ+СХИФТ+М)
   • Капаљка за очи: Приказује хексадецимални код боја за појединачно изабране пикселе.
   • Сцратцхпад:Сцратцхпад омогућава вам да пишете, уређујете, интегришете и извршавате исечке ЈаваСцрипт кода из искачућег Фирефок прозора. Отворите интерактивни ЈаваСцрипт документ који вам омогућава да пишете у коду и тестирате га на веб локацији. Пречица на тастатури: (СХИФТ+Ф4)
   • Сервице Воркерс: Отклањање грешака у сервисним радницима ваше веб апликације. Добијте детаљне информације о њиховом учинку и грешкама.
   • Извор странице: Оригинална алатка за програмере заснована на претраживачу, ова опција једноставно приказује доступни изворни код за активну страницу. Пречица на тастатури: Мац ОС Кс (ЦОММАНД+У), Виндовс (ЦТРЛ+У)
   • Набавите више алата: Отвара Пакет са алаткама веб програмера колекцију на Мозилла-ином званичном сајту додатака, која садржи десетак популарних екстензија као што су Фиребуг и Механичар.

   

Мицрософт Едге/Интернет Екплорер

Обично се назива Ф12 Девелопер Тоолс, омаж пречици на тастатури која је покренула интерфејс од ранијих верзија Интернет Екплорер-а, скупа алата за програмере у ИЕ11 и Мицрософт Едге је прешао дуг пут од свог оснивања нудећи веома згодну групу монитора, отклањања грешака, емулатора и „он-тхе-фли“ компајлери.

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

   

2. Када се појави падајући мени, изаберите опцију означену Алати за програмере.

   

3. Развојни интерфејс би сада требало да буде приказан, обично на дну прозора претраживача. Доступни су следећи алати, од којих сваком можете приступити кликом на одговарајући наслов картице или коришћењем пратеће пречице на тастатури.

   

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

4. Да бисте приказали Конзола док у оквиру било које друге алатке притисните тастер квадратно дугме са десном заградом унутар њега, који се налази у горњем десном углу интерфејса развојних алата.

   

5. Да бисте поништили интерфејс алата за програмере тако да постане посебан прозор, изаберите два каскадна правоугаоника или користите следећу пречицу на тастатури: ЦТРЛ+П. Можете вратити алате на првобитну локацију притиском на ЦТРЛ+П други пут.

   

Аппле Сафари (само за Мац)

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

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

   

2. Сафари'с Преференцес сада би требало да се прикаже интерфејс који прекрива прозор вашег претраживача. Изаберите Напредна икона, који се налази на крајњој десној страни заглавља.

   

3. Тхе Напредно преференце би сада требале бити видљиве. На дну овог екрана налази се опција означена Прикажи мени за развојна траци менија, уз потврдни оквир. Ако у пољу нема квачице, кликните на њу једном да бисте је поставили тамо.

   

4. Затвори Преференцес приступ.

5. Сада би требало да приметите нову опцију у менију претраживача под називом Развити, који се налази између обележивача и Прозор. Кликните на ову ставку менија. Сада би требало да се прикаже падајући мени који садржи следеће опције.

   • Отворите страницу са: Омогућава вам да отворите активну веб страницу у неком од других претраживача који су тренутно инсталирани на вашем Мац рачунару.
   • Кориснички агент: Омогућава вам да изаберете између више од десет унапред дефинисаних вредности корисничког агента, укључујући неколико верзија Цхроме-а, Фирефок-а и Интернет Екплорер-а, као и да дефинишете сопствени прилагођени стринг.
   • Ентер Режим респонзивног дизајна: Приказује тренутну страницу онако како би изгледала на различитим уређајима и на различитим резолуцијама екрана.
   • Прикажи Веб инспектор: Покреће главни интерфејс за Сафари алатке за развој, обично постављен на дну екрана прегледача и који садржи следеће одељке: Елементи, Мрежа, Ресурси, Временске линије, Дебуггер, Складиште, Конзола.
   • Прикажи конзолу за грешке: Такође покреће интерфејс алата за програмере, директно на Конзола таб који приказује грешке, упозорења и друге податке дневника који се могу претраживати.
   • Прикажи извор странице: Отвара Ресурси таб, који приказује изворни код за активну страницу категорисану документом.
   • Прикажи ресурсе странице: Обавља исту функцију као Прикажи извор странице опција.
   • Прикажи уређивач исечака: Отвара нови прозор у који можете да унесете ЦСС и ХТМЛ код, прегледавајући његов излаз у ходу.
   • Прикажи Буилдер екстензија: Пружа могућност креирања или уређивања Сафари екстензија помоћу ЦСС, ХТМЛ и ЈаваСцрипт-а.
   • Прикажи снимање на временској линији: Отвара Временске линије таб и почиње да приказује мрежне захтеве, распоред и информације о рендеровању, као и извршавање ЈаваСцрипт-а у реалном времену.
   • Празни кешови: Брише цео кеш који је тренутно ускладиштен на вашем чврстом диску.
   • Онемогући кеш меморије: Зауставља Сафари од кеширања тако да се сав садржај преузима са сервера при сваком учитавању странице.
   • Онемогући слике: Спречава приказивање слика на свим веб страницама.
   • Онемогућите стилове: Игнорише ЦСС својства када се страница учита.
   • Онемогући ЈаваСцрипт: Ограничава извршавање ЈаваСцрипт-а на свим страницама.
   • Онемогући екстензије: Забрањује покретање свих инсталираних екстензија у прегледачу.
   • Онемогућите хакове специфичне за сајт: Ако је Сафари измењен да експлицитно решава проблеме специфичне за активну веб страницу, ова опција ће блокирати те промене тако да се страница учита као што би била пре ових измена представио.
   • Онемогућите локална ограничења датотека: Омогућава прегледачу да има приступ датотекама на вашим локалним дисковима, радња која је подразумевано ограничена из безбедносних разлога.
   • Онемогућите вишеструка ограничења: Ова ограничења су подразумевано постављена да би се спречио КССС и друге потенцијалне опасности. Међутим, често их треба привремено онемогућити у сврху развоја.
   • Дозволите ЈаваСцрипт из поља за паметну претрагу: Када је омогућено, пружа могућност уноса УРЛ адреса са јавасцрипт: уграђен директно у адресну траку.
   • Третирајте СХА-1 сертификате као несигурне: ССЛ сертификати који користе СХА-1 алгоритам широко се сматра да су застарели и рањиви.