Firefoxin Web Developer -työkalujen avulla voit tarkastella verkkosivustorakenteita 3D-muodossa

Firefox 11 lisäsi kaksi uutta web-kehittäjätyökalua Firefoxin jo vaikuttavaan arsenaaliin. Tilt-ominaisuus visualisoi verkkosivustorakenteet 3D: ssä, kun taas Style Editor voi muokata CSS-tyylitaulukoita lennolla.

3D-ominaisuus, joka tunnetaan nimellä Tilt, on tapa visualisoida verkkosivuston DOM. Se integroituu olemassa olevaan Document Inspectoriin ja käyttää WebGL: tä näyttämään rikas 3D-grafiikka selaimessasi.

Tilt - 3D-sivuston visualisointi

Voit käyttää Tiltia Firefoxin sivutarkastajasta. Voit aloittaa sivun tarkastajan valitsemalla Web-kehittäjän valikosta ”Tarkasta”. Voit myös napsauttaa hiiren kakkospainikkeella nykyisellä sivulla ja valita "Tarkasta elementti" käynnistääksesi tarkastajan tietyllä elementillä.

Napsauta inspektorin työkalurivin 3D-painiketta.

Näet sivun rakenteen 3D-tilan aktivoinnin jälkeen, mutta se näyttää tasaiselta, kunnes käännät sen.

Kierrä mallia hiiren kakkospainikkeella, siirrä kuvaa hiiren kakkospainikkeella ja lähennä ja loitontaa hiiren pyörällä.

Tämä näkymä on integroitu muihin tarkastajan työkaluihin. Jos HTML- tai Style-paneelit ovat auki, voit tarkastella elementin HTML-koodia tai CSS-ominaisuuksia napsauttamalla hte-sivun elementtiä..

Lisää 3D-ominaisuuksia

3D-visualisointiominaisuus perustuu Tilt-laajennukseen, mutta sillä ei ole kaikkia Tilt-laajennuksen ominaisuuksia. jos haluat muokata värejä tai jopa viedä visualisoinnin 3D-mallitiedostoksi käytettäväksi 3D-muokkausohjelman kanssa, sinun täytyy asentaa Tilt 3D -lisäosa. Kun sinulla on, saat uuden "Tilt" -vaihtoehdon Web Developer -valikosta.

Napsauta Peruuta-painiketta, jos haluat käyttää Tiltin vanhaa versiota kehotettaessa.

Löydät ohjaimia, joilla voit muokata ikkunan vasemmalla puolella olevaa visualisointia ja muita vaihtoehtoja, mukaan lukien viennin ominaisuus, sivun yläreunassa.

CSS-tyylieditori

Jos haluat tarkastella ja muokata sivun CSS-tyylisivuja, avaa Tyylieditori Web-kehittäjän valikosta.

Tyyli-editorissa luetellaan nykyisen sivun tyylitaulukot. Vaihda tyylitaulukko päälle tai pois napsauttamalla tyylitaulukon nimen vasemmalla puolella olevaa silmäkuvaketta. Muokkaa tyylitaulukkoa valitsemalla se ja muuttamalla koodia.

Muutokset näkyvät sivulla välittömästi. Jos vaihdat tyylitaulukon, sivu menettää tyylitietonsa. Jos muokkaat tyylitaulukkoa, näet, että muokkaukset näkyvät sivulla kirjoittamisen aikana.

Voit tallentaa kopion yhdestä tyylitaulukosta tietokoneellesi, tuoda olemassa olevan tyylitaulukon tietokoneeltasi tai lisätä uuden tyhjän tyylitaulukon Tallenna-, Tuo- tai Uusi -linkkejä Tyylin muokkaus -ikkunassa.

3D-visualisointiominaisuus tarkkailee muutoksia nykyisellä sivulla ja ilmoituksia muutosten tapahtuessa. Kun käytät Style Editoria 3D-tarkastajan ollessa auki, muutokset näkyvät välittömästi 3D-näkymässä. Tämä toimii myös kolmannen osapuolen laajennuksilla, jotka muokkaavat verkkosivuja, kuten Firebug.