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