Turinys
„Firebug“ yra „Firefox“ papildinys arba plėtinys, sukurtas tam, kad būtų galima patikrinti kodą ir atlikti optimizavimą programuojant svetainę. Tai įrankių rinkinys, kuriuo galite analizuoti įvairių elementų, sudarančių žiniatinklį, įkėlimo greitį, žiniatinklio struktūrą. redaguoti, rasti klaidų, derinti šaltinio kodą ir pamatyti, kaip kodas veikia CSS, HTML arba „JavaScript“Taip pat galime redaguoti arba keisti bet kurį aspektą ir jis bus iš karto peržiūrėtas.
„Firebug“ Tai esminis įrankis tiems, kurie programuoja ar optimizuoja svetaines, nesvarbu, ar jie yra dizaineriai, ar žiniatinklio valdytojai. Taigi galime pašalinti programavimo ar dizaino gedimus, žinoti, kaip jie veikia ir kokia yra tinklalapio struktūra, kaip visi jį sudarantys elementai.
Įdiegiame „Firebug“ papildinį
Norėdami įdiegti papildinį, einame į „firebug“ atsisiuntimo svetainę ir ten ieškome naujausios atsisiuntimo įrankio versijos.
Konsolės skirtukas
Konsolė „Firebug“ Čia bus rodomi žinutės apie tai, ką daro žiniatinklis ir kokios klaidos. Mes galime matyti pranešimus apie skambučius į funkcijas ar puslapius, kuriuos daro žiniatinklis, kai mes sąveikaujame, rodydami mums funkcijas, raginimus skambinti atgal arba žiniatinklio paslaugas ir vertes, kuriomis keičiamasi vykdant, kontroliuojant programos srautą.
Pažvelkime į keletą pavyzdžių, einame į svetainę motores.com.ar, dešiniuoju pelės mygtuku spustelėkite ir suaktyvinkite „Firebug“.
Taip pat matome, kaip pridėjus prekę į pirkinių krepšelį jis siunčia šiuos parametrus: funkciją, produkto kiekį ir produkto ID.
„Ajax“ funkcija iškvietė įterpimąIlemento pakreipimas 1 Id 5850326Nors matome, kad ji bus pridėta tik tada, jei būsime prisijungę kaip vartotojai, priešingu atveju ji paprašys mūsų užsiregistruoti.
Taigi galime pamatyti, kaip programa veikia ir kokius parametrus ji siunčia ar gauna, kokius atsakymus ji teikia ir koks buvo atsako laikas, pavyzdžiui, norint pridėti produktą, kuriam prireikė 335 milisekundžių.
HTML skirtukas
leidžia matyti žiniatinklio struktūrą ir redaguoti tinklalapio kodą realiu laiku. Pavyzdžiui, galime pakeisti kodą HTML svetainės ar CSS kodo ir tiesiogiai jį peržiūrėti, nesikeičiant. Pavyzdžiui, jei pasiekiame „Ebay“ svetainę, galime naudoti „Firebug“, kad pakeistume pagrindinio ar žiniatinklio turinio bloko spalvą.
fonas: raudona nėra kartojimo slinkties 0 0;Kai baigsite rašyti, centrinis blokas taps raudonas, jei atnaujinsime puslapį, pakeitimai bus prarasti ir jis grįš į pradinį dizainą.
Taip pat galime pabandyti manipuliuoti html kodu ir css kodu, kad pakeistume „Google“ „Ebay“ logotipą. Tai daroma pakeitus „Ebay“ logotipo vaizdo URL į kitą norimo vaizdo URL.
Ši funkcija veikia ne norint pakeisti visą dizainą, bet atlikti nedidelius bandymus ir vizualizuoti pakeitimus, neprieinant prie redaktoriaus.
CSS skirtukas
Skydelio skirtukas CSS Jame rodomos visos mūsų sukurtos arba analizuojamo žiniatinklio CSS klasės ir identifikatoriai. Šiame skydelyje galime keisti savo klases ir css sakinius, kaip tai darėme anksčiau HTML skydelio skirtuke Stiliai.
Skripto skirtukas
Šis skydelis skirtas kodo derinimui „JavaScript“ arba „jQuery“. Tai rodo mums viską, ką daro scenarijus, jo kintamuosius, funkcijas, derinimą pagal pertraukos taškus, nuoseklų scenarijaus vykdymą, ekraną, skirtą kintamojo kamino valdymui, ir mes taip pat matome funkcijų elgseną.
DOM skirtukas
Skydelis SAULĖ arba Dokumento objekto režimasJis yra tas, kuris gauna informaciją apie visas įvairias DOM savybes ir jų metodus. DOM yra žiniatinklio elementų dalis ir leidžia programuotojams pasiekti XHTML tinklalapius ir jais manipuliuoti.
„JQuery“ siūlo metodus, kaip efektyviai manipuliuoti DOM. Galime pasiekti bet kurį bet kurio elemento atributą arba išgauti HTML kodą iš pastraipos ar bloko. Be to, ji siūlo tokius metodus kaip .attr (), .HTML (), Y .val () Jie veikia kaip informacijos gavėjai ir renka informaciją iš DOM elementų, kad vėliau galėtų juos naudoti.
Pažiūrėkime šiame „jQuery“ ir DOM pavyzdyje, kaip valdyti div ir išgauti tekstą:
Jquery ir DOMIštraukite tekstą iš bloko:
Tai DOM testo tekstas
Žymos HTML Elementas pasiekiamas per „css“ klasę arba ID, o po to - ypatybę, kuri gali būti tekstas arba kita, leidžianti jQuery ir DOM.
Tinklo skirtukas
Tinklo skydo paskirtis yra stebėti žiniatinklio srautą ir kiekvienos HTTP žiniatinklio užklausos įkėlimą bei suvartojimą. Ši ataskaita sudaryta iš įrašų sąrašo, kur kiekvienas iš jų reiškia puslapio pateiktą užklausą / atsakymą.
Tinklo skydelio lange pateikiamas užklausų sąrašas, kai įkeliamas ir naudojamas žiniatinklis. Kiekvienas sąrašo elementas rodo informaciją, kurią sukuria užklausa, ir grafinė laiko juosta rodo sunaudotus baitus, atsakymo laiką, kuris parodo apkrovos fazes laiku. Toliau pateikiamas kiekvienos užklausos informacijos sąrašas:
- HTTP užklausos metodas
- HTTP atsakymo kodas ir aprašymas (200 301 404 ir kt.)
- Įkviečiamas failo pavadinimas
- Domeno vardas, iš kurio gaunamas atsakymas
- Atsakymo dydis baitais
- Laikas milisekundėmis, per kurį reikia atsakyti.
