Firefox 11 lisäsi kaksi uutta verkkokehittäjän työkalua Firefoxin jo vaikuttava arsenaali . Tilt-ominaisuus visualisoi verkkosivustorakenteet 3D-muodossa, kun taas Style Editor voi muokata CSS-tyylitaulukoita lennossa.
3D-ominaisuus, joka tunnetaan nimellä Tilt, on tapa visualisoida verkkosivuston DOM. Se integroituu olemassa olevaan Document Inspector -ohjelmaan ja näyttää WebGL: n avulla rikas 3D-grafiikka selaimessasi.
Tilt - 3D-verkkosivuston visualisointi
Pääset Tilt-sovellukseen Firefoxin sivuinspektorista. Aloita avaamalla Page Inspector valitsemalla Web Developer -valikosta “Inspect”. Voit myös napsauttaa hiiren kakkospainikkeella nykyistä sivua ja valita "Tarkasta elementti" aloittaaksesi tarkastajan tietyllä elementillä.
Napsauta tarkastajan työkalurivin 3D-painiketta.
Näet sivun rakenteen 3D-tilan aktivoinnin jälkeen, mutta se näyttää tasaiselta, kunnes käännät sitä.
Kierrä mallia napsauttamalla hiiren vasemmalla painikkeella, siirrä kuvaa ympäri napsauttamalla hiiren kakkospainikkeella ja lähennä ja loitonna hiiren pyörällä.
Tämä näkymä on integroitu tarkastajan muihin työkaluihin. Jos HTML- tai Style-paneelit ovat auki, voit napsauttaa elementtiä hte-sivulla nähdäksesi kyseisen elementin HTML-koodin tai CSS-ominaisuudet.
Lisää 3D-ominaisuuksia
3D-visualisointiominaisuus perustui Tilt-laajennukseen, mutta siinä ei ole kaikkia Tilt-laajennuksen ominaisuuksia. Jos haluat mukauttaa värejä tai jopa viedä visualisoinnin 3D-mallitiedostona käytettäväksi 3D-muokkausohjelman kanssa, sinun on asennettava Kallista 3D-lisäosa . Kun olet saanut, saat uuden Tilt-vaihtoehdon Web-kehittäjävalikossa.
Napsauta Peruuta-painiketta, jos haluat käyttää Tiltin vanhaa versiota pyydettäessä.
Ikkunan vasemmasta reunasta löydät säätimet visualisoinnin mukauttamiseksi ja muut vaihtoehdot, mukaan lukien vientiominaisuus, sivun yläosasta.
CSS-tyylieditori
Jos haluat tarkastella ja muokata sivun CSS-tyylitaulukoita, avaa Tyylieditori Web-kehittäjävalikosta.
Tyylin muokkausohjelma näyttää tyylisivut nykyisellä sivulla. Vaihda tyylitaulukko päälle tai pois napsauttamalla tyylitaulukon nimen vasemmalla puolella olevaa silmäkuvaketta. Muokkaa tyylitaulukkoa valitsemalla se ja muokkaamalla koodia.
Muutokset näkyvät sivulla välittömästi. Jos poistat tyylitaulukon käytöstä, sivu menettää tyylitietonsa. Jos muokkaat tyylitaulukkoa, muokkaukset näkyvät sivulla kirjoittaessasi.
Voit tallentaa kopion tyylitaulukoista tietokoneellesi, tuoda olemassa olevan tyylitaulukon tietokoneeltasi tai lisätä uuden, tyhjän tyylitaulukon Tyylieditori-ikkunan Tallenna-, Tuo- tai Uusi-linkeillä.
3D-visualisointiominaisuus seuraa nykyisen sivun muutoksia ja huomaa muutokset. Kun käytät tyylieditoria 3D-tarkastuksen ollessa auki, muutokset näkyvät heti 3D-näkymässä. Tämä toimii myös kolmansien osapuolten laajennusten kanssa, jotka muokkaavat verkkosivuja, kuten Firebug.
