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