„Firefox Developer“ įrankiai yra puikus įrankis programuotojams, skirtas analizuoti ir derinti tinklalapius. Šiame vadove aš tau paaiškinsiu, kaip efektyviai naudoti „Firefox Developer“ įrankius. Aš aptarsiu panašumus ir skirtumus tarp „Chrome Developer Tools“, kad parodyčiau, kaip greitai susipažinti su vartotojo sąsaja ir pasinaudoti pagrindinėmis funkcijomis. Nors yra tam tikrų skirtumų, pastebėsi, kad pagrindinis principas yra panašus.
Svarbiausios išvados
- „Firefox Developer“ įrankiai gali būti atidaryti naudojant F12 arba kontekstinį meniu.
- Yra tam tikrų skirtumų vartotojo sąsajoje, ypač skirtumų saugykloje ir taikomosiose srityse.
- „Firefox“ konsolės, derintojo ir tinklo analizės naudojimas yra panašus į „Chrome“.
- Naudojant veiklos analizę, siūlomos įvairios galimybės tirti įkrovimo laikus ir išteklių naudojimą.
Etapinis vadovas
Siekiant palengvinti naudojimąsi „Firefox Developer“ įrankiais, sukūriau etapinį vadovą, kuriame parodyta, kaip galima pasinaudoti svarbiausiomis funkcijomis.
Atidarykite įrankius
„Firefox Developer“ įrankiai gali būti atidaryti naudojant F12 klavišą. Alternatyviai galite naudoti kombinacijas „Command + Option + I“ (Mac) arba „Control + Shift + I“ (Windows). Kitas būdas yra spustelėti dešinį pelės mygtuką ant elemento ir pasirinkti „Tirinti“. Šie įsakymai atidaro langą, kuriame galite naudoti įrankius.
Tyrinėkite vartotojo sąsają
Kai atidaryti „Firefox Developer“ įrankiai, pastebėsite, kad vartotojo sąsaja turi eilę skirtukų, kuriuos galite naudoti skirtingoms funkcijoms. Šie skirtukai yra nuo „Inspektoriaus“ iki „Konsolės“ ir „Derintojo“. Yra nedideliai skirtumai lyginant su „Chrome Developer Tools“, tačiau pagrindinės funkcijos yra panašios.
Naudojate inspektorių
Inspektoriaus skirtukas leidžia jums peržiūrėti ir keisti tinklalapio HTML ir CSS struktūrą. Pelės pagalba galite spustelėti elementus, kad analizuotumėte jų savybes. Po Inspektoriaus rasite konsolę, kurią taip pat galite įjungti arba išjungti paspaudę „Esc“. Čia, pavyzdžiui, su komanda $0 galite gauti pasirinktą elementą.
Derinimas su konsolės pagalba
Konsolė suteikia galimybę vykdyti JavaScript komandas ir peržiūrėti klaidų žurnalus. Galite nustatyti pertraukiklius, kad sustabdytumėte scenarijų vykdymą ir analizuotumėte esamą būseną. Norėdami nustatyti pertraukiklį, tiesiog spustelėkite scenarijaus eilutės numerį. Po pakrovimo, bus stabdoma vietą, kur nustatėte pertraukiklį. Privalumai panašūs į „Chrome“: galite žingsnis po žingsnio sekti vykdymą ir patikrinti kintamųjų vertes.
Atlikite tinklo analizę
„Tinklo“ skirtukas yra esminis, kad stebėtumėte įkrovimo laikus ir užklausas į savo serverį. Čia galite spustelėti įrašus, kad pamatytumėte klaidų, atsakymų ir užklausų antraštės informaciją. Šis rodinys labai panašus į „Chrome“, todėl greitai susipažinsite. Ši informacija svarbi, siekiant patikrinti, ar visi ištekliai įkeliami teisingai ir nustatyti galimus našumo problemas.
Naudojant profiliavimo įrankį atlikti našumo analizę
„Firefox“ našumo analizė taip pat suteikia įvairius įrankius, kad galėtumėte stebėti jūsų tinklalapio greitį. Galite pradėti įrašą ir analizuoti įvairius kvietimus ir jų trukmę. Atminkite, kad profilis atsiranda atskiros peržiūros, kuri suteikia išsamią informaciją apie jūsų tinklalapio našumą. Tai ypač naudinga rasti „suvirškinimo“ vietą ir optimizuoti savo tinklalapį.
Peržiūrėkite interneto saugyklą
„Saugyklos“ skirtuke rasite informaciją, kuri įprastai laikoma „Programoje“ „Chrome Developer Tools“. Čia galite peržiūrėti slapukus, vietinę saugyklą ir IndexedDB. Taip pat galite pridėti naujus įrašus ir peržiūrėti esamus duomenis, valdyti savo duomenis. Tai naudinga kurti tokius tinklalapius, kuriuose duomenys saugomi lokalėje.
Patikrinkite prieinamumą
Naršyklės skirtukas "Prieinamumas" leidžia jums patikrinti, ar jūsų svetainė atitinka atitinkamus standartus. Ši funkcija padeda užtikrinti, kad tinklalapis būtų prieinamas visiems vartotojams. Čia rasite informacijos apie ARIA vaidmenis ir spalvų kontrastus, kurie galėtų rodyti galimus problemas. Svarbu įtraukti šiuos testus į savo kūrimo procesą, norint pagerinti našumą.
Valdykite sąsajos pokyčius
Firefox'o kūrėjo įrankių nustatymai ir išdėstymas yra šiek tiek kitoks. Galite atidaryti įrankius naujame lange arba prikišti juos prie naršyklės briaunų. Be to, galite pritaikyti specifinius kūrėjo įrankių nustatymus, pavyzdžiui, įjungti arba išjungti JavaScript. Verta truputį pabandyti eksperimentuoti, kad rastumėte geriausias darbo sąlygas savo kūrimo projektams.
Santrauka
Šiame vadove sužinojote, kaip optimaliai naudoti Firefox'o kūrėjo įrankius. Nuo sąsajos tyrinėjimo iki specifinių funkcijų, tokių kaip klaidų šalinimas, tinklo analizė ir našumo tikrinimas, jūs susipažinote su svarbiausiais aspektais. Nors yra tam tikrų skirtumų nuo „Chrome“ kūrėjo įrankių, dauguma funkcijų yra panašios ir suteikia jums reikalingus įrankius, norint sėkmingai kurti ir testuoti savo tinklalapius.
Dažnai užduodami klausimai
Kaip atidaryti Firefox'o kūrėjo įrankius?Galite atidaryti kūrėjo įrankius, spustelėdami F12 arba spustelėdami dešiniuoju pelės klavišu ant elemento ir pasirinkdami „Tirti“.
Ar Firefox'o kūrėjo įrankiai tapo “Chrome” įrankių kopija?Jie labai panašūs, tačiau yra kai kurių skirtumų sąsajos ir konkrečiuose skirtukuose.
Kaip įdėti sustojimo tašką į Deriniklėje?Norėdami nustatyti sustojimo tašką, tiesiog spustelėkite deriniklėje eilutės numerį.
Ar galima stebėti tinklo srautą „Firefox“?Taip, skirtuke „Tinklas“ galite peržiūrėti visus tinklo veiksmus ir jų detales.
Ar yra būdas patikrinti mano tinklalapio prieinamumą?Taip, skirtuke „Prieinamumas“ galite patikrinti, ar jūsų puslapis atitinka atitinkamus standartus.
