10 Naudingi „Firefox“ kūrėjų įrankiai, kuriuos turėtumėte žinoti

„Firefox“ yra „kūrėjo naršyklė“ turi daug puikių įrankių, padedančių lengviau dirbti. Daugiau informacijos apie įrankių rinkinį galite rasti „Firefox“ kūrėjų įrankių tinklalapyje ir taip pat galite išbandyti „Developer Edition“ naršyklę, kurioje yra daugiau testuojamų funkcijų ir įrankių.

Šiam įrašui pateikiau sąrašą 10 patogių įrankių galbūt norėsite iš savo kūrėjų įrankių rinkinio. Aš taip pat parodiau, ką šie įrankiai gali daryti su GIF ir kaip juos pasiekti greitai.

1. Peržiūrėkite horizontalius ir vertikalius valdiklius

„Firefox“ turi valdiklio įrankį rodo tiek horizontalius, tiek vertikalius valdiklius su pikselių vienetais puslapyje. Priemonė yra naudinga norint suskirstyti elementus į puslapį.

Norėdami pasiekti valdiklius per meniu, eikite į: ☰> Programuotojas > Kūrėjo įrankių juosta (spartusis klavišas: Shift + F2). Kai įrankių juosta pasirodo puslapio apačioje, įveskite valdovai ir paspauskite Įveskite.

Jei norite, kad jis būtų rodomas kūrėjo įrankių lange, eikite į „Įrankių dėžutės parinktis“. Skiltyje „Galimi įrankių rinkiniai“ pažymėkite „Perjungti puslapio valdiklius" žymimasis langelis.

2. Perkelkite ekrano kopijas naudodami CSS parinkiklius

Nors „Firefox“ įrankių juosta leidžia fotografuoti visą puslapį arba matomas dalis, mano nuomone, CSS selektoriaus metodas yra naudingesnis užfiksuoti atskirų elementų ekrano kopijos taip pat elementai, matomi pelės svirtyje tik (kaip meniu).

Norėdami fotografuoti per meniu, eikite į ☰> Programuotojas > Kūrėjo įrankių juosta (nuorodaShift + F2). Kai įrankių juosta pasirodo puslapio apačioje, įveskite ekrano kopija --selector any_unique_css_selector ir paspauskite įveskite.

Kad tai būtų rodoma kūrėjo įrankių lange: spustelėkite „Įrankių dėžutės parinktys“ ir skiltyje „Galimi įrankių rinkinio mygtukai“, pažymėkite „„Fullpage“ ekrano kopija “ žymimasis langelis.

3. Pasirinkite spalvas iš tinklalapių

„Firefox“ turi įmontuotą spalvų parinkimo įrankį „Eyedropper“ vardu. Norėdami patekti į „Eyedropper“ įrankį per meniu, eikite į ☰> Programuotojas > Akiniai.

Jei norite, kad jis būtų rodomas kūrėjo įrankių lange: spustelėkite „Įrankių dėžutės parinktys“ ir „Galimų įrankių rinkinio mygtukų“ sekcijos patikrinimas „Paimkite spalvą iš puslapio" žymimasis langelis.

4. Peržiūrėkite puslapio išdėstymą trimatėje

Tinklalapių peržiūra 3D pagalba padeda su išdėstymo problemomis. 3D vaizde galėsite matyti įvairius sluoksniuotus elementus daug aiškiau. Jei norite peržiūrėti tinklalapį 3D, spustelėkite įrankio mygtuką „3D vaizdas“.

Jei norite, kad jis būtų rodomas kūrėjo įrankių lange, spustelėkite „Įrankių dėžutės parinktys“ ir skiltyje „Galimi įrankių rinkiniai“ pažymėkite „3D vaizdas" žymimasis langelis.

5. Peržiūrėkite naršyklės stilių

Naršyklės stilius susideda iš dviejų tipų: numatytasis stilius, kurį naršyklė skiria kiekvienam elementui, ir naršyklės stiliai (tie, kurie yra su naršyklės prefiksu). Žiūrėdami į naršyklės stilius, kuriuos galėsite diagnozuoti bet kokias jūsų stiliaus lapo nepaisymo problemas ir taip pat sužinoti apie bet kokius esamus naršyklės stilius .

Jei norite pasiekti meniu „Naršyklės stiliai“, eikite į ☰> Programuotojas > Inspektorius. Tada dešinėje skiltyje spustelėkite skirtuką „Apskaičiuota“ ir pažymėkite žymės langelį „Naršyklės stiliai“.

Taip pat galite atidaryti „Inspektorius"skirtukas per spartųjį klavišą Ctrl + Shift + C ir tada pasiekiamas„ Naršyklės stiliai “.

6. Išjungti „JavaScript“ dabartinei sesijai

Geriausios praktikos ir ekrano skaitytuvo suderinamumo atveju visada rekomenduojama koduoti bet kurią svetainę taip, kad javascript-išjungta aplinka nebūtų trukdoma jos funkcionalumui. Norėdami patikrinti tokią aplinką, galite išjungti JavaScript sesiją, kurioje dirbate.

Jei norite išjungti „JavaScript“ dabartinei sesijai, spustelėkite „Įrankių dėžutės parinktys“ ir skyriuje „Išplėstiniai nustatymai“ patikrinkite „Išjungti „JavaScript“*" žymimasis langelis.

7. Slėpti CSS stilių iš puslapio

Kaip ir „JavaScript“, dėl prieinamumo problemų geriausia sukurti tokias svetaines puslapiai vis tiek turėtų būti skaitomi net ir be jokių stilių. Norėdami pamatyti, kaip puslapis atrodo be jokio stiliaus, galite juos išjungti kūrėjo įrankiuose.

Jei norite pašalinti bet kurį CSS stilių (inline, vidaus ar išorės), taikomą tinklalapyje, tiesiog spustelėkite ant išvardytų stilių lentelių akių simbolio skirtuke „Stilių redaktorius“. Jei norite grįžti į pradinį vaizdą, spustelėkite jį dar kartą.

Norėdami pasiekti „Stiliaus redaktoriaus“ per meniu, eikite į ☰> Programuotojas > Stiliaus redaktorius (spartusis klavišas: Shift + F7.

8. Peržiūrėti HTML turinio atsakymą į užklausą

„Firefox“ kūrėjų įrankiai gali pasirinkti peržiūrėti HTML turinio tipo atsakymus. Tai padeda kūrėjui peržiūrėti bet kokius 302 peradresavimus ir patikrinti, ar atsakyme buvo pateikta slapta informacija.

Norėdami pasiekti „Peržiūra“ per meniu, eikite į ☰> Programuotojas > Tinklas (spartusis klavišas: „Ctrl“ + „Shift“ + Q. Tada atidarykite pasirinktą tinklalapį arba iš naujo įkelkite dabartinį puslapį, spustelėkite „ pageidaujamas prašymas (su HTML atsakymu) iš užklausų sąrašo ir spustelėkite „Peržiūra"skirtuko dešinėje pusėje.

9. Peržiūrėti tinklalapį įvairiais ekrano dydžiais

Jei norite išbandyti tinklalapį, kad būtų reaguojama, naudokite „Atsakingo dizaino vaizdą“, prie kurio galima pasiekti ☰> Programuotojas > Atsakingas dizaino vaizdas arba su nuoroda: Ctrl + Shift + M.

Kad būtų rodomas įrankio mygtukas „Atsakingo dizaino režimas“, spustelėkite „Įrankių dėžutės parinktys“ ir skiltyje „Galimi įrankių rinkiniai“ pažymėkite žymės langelį „Atsakingas dizaino režimas“.

10. Paleiskite „JavaScript“ puslapiuose

Norėdami greitai atlikti „JavaScript“ vykdymą bet kuriame tinklalapyje, tiesiog naudokite „Scratchpad“ įrankį „Firefox“. Norėdami pasiekti „Scratchpad“ per meniu, eikite į; ☰> Programuotojas > Scratchpad arba naudokite spartųjį klavišą „Shift“ + F4.

Jei norite, kad „Scratchpad“ įrankio mygtukas būtų rodomas kūrėjo įrankių lange, kad galėtumėte greitai naudoti: spustelėkite „Įrankių dėžutės parinktys"ir pagal"Galimos įrankių rinkinio mygtukai"skyriuje patikrinkite" Scratchpad " žymimasis langelis.