If-Koubou

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

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

Firefox 11 lisäsi kaksi uutta web-kehittäjän työkalua 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 vasenta painiketta, siirrä kuvaa ympärillä napsauttamalla hiiren kakkospainiketta ja suurentamalla 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-laajennuksen ulkopuolelle, 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.

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

CSS Style Editor

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

Style-editori näyttää 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 tietokoneeseen, tuoda olemassa olevan tyyliselosteen tietokoneesta tai lisätä uuden, tyhjän tyylitaulukon tyylitiedostoikkunassa 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.