Kaip naudoti „Firefox“ žiniatinklio kūrimo įrankius, kad peržiūrėtumėte svetainių struktūras 3D

„Firefox 11“ į „Firefox“ jau įspūdingą arsenalą pridėjo du naujus žiniatinklio kūrėjo įrankius. „Tilt“ funkcija vizualizuoja svetainės struktūras 3D, o stiliaus redaktorius gali redaguoti CSS stilių lenteles.

3D funkcija, žinoma kaip „Tilt“, yra svetainės DOM vizualizavimo būdas. Jis integruojasi su esamu dokumentų inspektoriumi ir naudoja WebGL, kad naršyklėje būtų rodoma turtinga 3D grafika.

„Tilt“ - 3D svetainės vizualizavimas

Galite pasiekti „Tilt“ iš „Firefox“ puslapio inspektoriaus. Norėdami pradėti, atidarykite puslapio inspektorių, pasirinkdami „Inspect“ iš „Web Developer“ meniu. Taip pat galite dešiniuoju pelės mygtuku spustelėti dabartinį puslapį ir pasirinkti „Apžiūrėti elementą“, kad paleistumėte inspektorių konkrečiame elemente.

Paspauskite „3D“ mygtuką inspektoriaus įrankių juostoje.

Suaktyvinus 3D režimą, pamatysite puslapio struktūrą, tačiau ji bus tolygi, kol ją sukate.

Pasukite modelį kairiuoju pelės klavišu, perkelkite vaizdą aplink paspaudę dešiniuoju pelės klavišu ir padidinkite ir sumažinkite naudodami pelės ratuką.

Šis vaizdas yra integruotas su kitais inspektoriaus įrankiais. Jei turite atidarytus HTML ar stiliaus skydus, galite spustelėti elementą „hte“ puslapyje, kad galėtumėte peržiūrėti šio elemento HTML kodą arba CSS savybes.

Daugiau 3D funkcijų

3D vizualizavimo funkcija buvo pagrįsta „Tilt“ plėtiniu, tačiau ji neturi visų „Tilt“ plėtinio funkcijų. jei norite pritaikyti spalvas arba netgi eksportuoti vizualizaciją kaip 3D modelio failą, skirtą naudoti su 3D redagavimo programa, turėsite įdiegti „Tilt 3D“ priedą. Kai turėsite, „Web Developer“ meniu gausite naują „Tilt“ parinktį.

Spustelėkite mygtuką Atšaukti, norėdami naudoti senąją „Tilt“ versiją.

Puslapio viršuje rasite valdiklius, kad būtų galima pritaikyti vizualizaciją kairėje lango pusėje, ir kitas parinktis, įskaitant eksporto funkciją..

CSS stiliaus redaktorius

Jei norite peržiūrėti ir redaguoti puslapio CSS stiliaus lapus, atidarykite Stilių redaktorių iš „Web Developer“ meniu.

Stiliaus redaktorius nurodo dabartinio puslapio stilių lenteles. Įjunkite arba išjunkite stilių lentelę spustelėję akių piktogramą kairėje nuo stiliaus lentelės pavadinimo. Redaguokite stilių lentelę, pasirinkdami ją ir pakeisdami kodą.

Pakeitimai iškart atsispindi puslapyje. Jei išjungsite stilių lentelę, puslapis praranda savo stiliaus informaciją. Jei redaguosite stilių lentelę, pamatysite, kad redagavimai būtų rodomi puslapyje, kol įvedate.

Galite įrašyti vienos iš stilių lentelių kopiją į savo kompiuterį, importuoti esamą stilių lentelę iš savo kompiuterio arba pridėti naują tuščią stilių lentelę „Išsaugoti“, „Importuoti“ arba „Naujos“ nuorodos „Stilių redaktoriaus“ lange.

3D vizualizavimo funkcija stebi pakeitimus dabartiniame puslapyje ir pranešimus apie pokyčius. Kai naudojate „Stiliaus redaktorių“, kai atidarytas 3D inspektorius, pakeitimai bus nedelsiant atsispindėti trimatėje vaizde. Tai taip pat veikia su trečiosios šalies plėtiniais, kurie keičia tinklalapius, pvz., „Firebug“.