Kuinka käyttää Firefoxin Web-kehittäjätyökaluja Web-sivustorakenteiden näkymiseen 3D: ssä

Firefox 11 lisäsi kaksi uutta web-kehittäjätapaa Firefoxin jo vaikuttavaan arsenaliin. Tilt-ominaisuus visualisoi verkkosivuston rakenteet 3D: ssä, kun Style Editor voi muokata CSS-tyylitiedostoja lennossa.

3D-ominaisuus, joka tunnetaan nimellä Tilt, on tapa visualisoida verkkosivuston DOM.Se integroituu olemassa olevaan Document Inspector -ohjelmaan ja käyttää WebGLia rikkaiden 3D-grafiikan näyttämiseen selaimessasi.

Tilt - 3D-sivuston visualisointi

Voit käyttää Tiltia Firefoxin sivun tarkastajalta. Aloita aloittaessasi sivun tarkastaja valitsemalla "Tarkasta" Web-kehittäjä -valikosta. Voit myös napsauttaa nykyistä sivua hiiren kakkospainikkeella ja aloittaa tarkistus tietyllä elementillä valitsemalla "Tarkasta elementti".

Napsauta "3D" -painiketta tarkastajan työkalupalkissa.

Sivun rakenne näkyy 3D-tilan aktivoinnin jälkeen, mutta se näyttää tasolta, kunnes kääntät sitä.

Kierrä mallia napsauttamalla hiiren kakkospainikkeella, siirrä kuvaa ympärillä napsauttamalla hiiren oikeaa painikkeita ja lähentämällä hiiren rullaa.

Tämä näkymä on integroitu tarkkailijan muiden työkalujen kanssa. Jos HTML- tai Style-paneelit ovat avoinna, voit napsauttaa elementtiä hte-sivulla nähdäksesi kyseisen elementin HTML-koodin tai CSS-ominaisuudet.

Lisää 3D-ominaisuuksia

3D-visualisointitoiminto perustui Tilt-laajennuksesta, mutta sillä ei ole kaikkia Tilt-laajennuksen ominaisuuksia. Jos haluat muokata värejä tai viedä visualisoinnin 3D-mallitiedostona käytettäväksi 3D-muokkausohjelmalla, sinun on asennettava Tilt-3D-lisäosa. Kun olet saanut, saat uuden "Tilt" -vaihtoehdon Web Developer -valikosta.

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

Ohjaukset muokata ikkunan vasemmalla puolella näkyvää visualisointia ja muita vaihtoehtoja, mukaan lukien vientitoiminto, sivun yläosassa.

CSS Style Editor

Voit tarkastella ja muokata sivun CSS-tyyppisivuja avaamalla Style Editor -ohjelman Web Developer -valikosta.

Style-editorissa luetellaan nykyisen sivun tyylitiedostot. Vaihda tyylitaulukko päälle tai pois päältä napsauttamalla silmukuvaketta tyylitaulukon nimen vasemmalla puolella. Muokkaa tyylitaulukkoa valitsemalla sen ja muokkaamalla koodia.

Muutokset näkyvät sivulla heti. Jos vaihdat tyylitiedosto pois käytöstä, sivu menettää tyylitiedot. Jos muokkaat tyylitaulukkoa, näet muokkaukset sivulla kirjoittaessasi.

Voit tallentaa kopion yhdestä tyylitiedostosta tietokoneellesi, tuoda olemassa olevan tyylitaulukon tietokoneelta tai lisätä uuden, tyhjän tyylitaulukon tyylitiedosto-ikkunassa Tallenna, tuonti tai Uusi linkit.

3D-visualisointitoiminto tarkkailee nykyisen sivun muutoksia ja huomaa, kun muutoksia tapahtuu. Kun käytät tyylitiedostoa, kun 3D-tarkastaja on auki, muutokset näkyvät välittömästi 3D-näkymässä.Tämä toimii myös kolmansien osapuolten laajennusten kanssa, jotka muokkaavat verkkosivuja, kuten Firebugia.