Како оптимизовати веб локацију помоћу додатка Фиребуг

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

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

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

Када активирамо алат, да видимо најважније функционалности:

Картица Цонсоле

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

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

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

 Ајак функција позвана инсертИтем цант 1 Ид 5850326

Иако можемо видети да ће бити додато само ако смо пријављени као корисници, у супротном ће захтевати да се региструјемо.
Тако можемо видети како апликација ради и који параметар шаље или прима и које одговоре даје и које је време одзива било, на пример да додамо производ који је трајао 335 милисекунди.

ХТМЛ картица

омогућава вам да видите структуру веба и уредите код веб странице у реалном времену. На пример, можемо изменити код ХТМЛ веб локације или цсс кода и прегледајте их директно без да су те промене трајне. На пример, ако приступамо веб локацији Ебаи, можемо користити Фиребуг за промену боје главног или блока веб садржаја.

Да бисмо то урадили, на картици ХТМЛ тражимо линију ХТМЛ кода која изгледа овако:

На десном панелу Стил Показаће нам цсс стил тог елемента, двапут кликнемо на ред који следи иза реченице ширина: 980пк и пишемо следеће:

 позадина: црвено нема понављања помицања 0 0;

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

Тражимо линију кода у ХТМЛ -у и мењамо везу срц = ”урлимаген”, Затим прилагођавамо величине

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

ЦСС картица

Картица панела ЦСС Он приказује све ЦСС класе и идентификаторе које стварамо или које веб који анализирамо има. Са овог панела можемо изменити наше класе и цсс реченице као што смо то радили раније на картици Стилови ХТМЛ панела.

Картица Скрипта

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

ДОМ картица

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

 Јкуери и ДОМ
Издвоји текст из блока:

Ово је ДОМ тест текст

Ознаке ХТМЛ Елементу се приступа путем цсс класе или ид -а, а затим својства које може бити текст или неко друго које дозвољава јКуери и ДОМ.

Картица Мрежа

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

• Метод ХТТП захтева
• Код и опис ХТТП одговора (200.301.404, итд.)
• Име датотеке која се позива
• Име домена одакле је одговор
• Величина одговора у бајтовима
• Време у милисекундама потребно је за одговор.

Такође можемо филтрирати да бисмо видели делове само као слике или само јс или цсс датотеке и на тај начин одредити шта више тежи и како то оптимизовати.Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен