30Jun

Cum să utilizați Instrumentele de dezvoltare Web ale Firefox pentru a vizualiza structurile web în 3D

Firefox 11 a adăugat două noi instrumente de dezvoltare web pentru arsenalul deja impresionant al Firefox. Funcția Tilt vizualizează structurile site-urilor web în 3D, în timp ce editorul de stil poate edita foile de stil CSS în zbor.

Caracteristica 3D, cunoscută sub numele de Tilt, este o modalitate de a vizualiza DOM-ul unui site web. Se integrează cu inspectorul documentar existent și utilizează WebGL pentru a afișa grafică 3D bogată în browser.

Tilt - vizualizare 3D a site-ului

Puteți accesa Tilt din Firefox's Page Inspector. Pentru a începe, deschideți Inspectorul de pagini selectând "Inspectați" din meniul Web Developer. De asemenea, puteți să faceți clic dreapta pe pagina curentă și să selectați "Inspectați elementul" pentru a porni inspectorul la un anumit element.

Faceți clic pe butonul "3D" de pe bara de instrumente a inspectorului.

Veți vedea structura paginii după activarea modului 3D, dar va arăta plat până când îl rotiți.

Rotiți modelul făcând clic stânga, deplasați imaginea prin clic dreapta și măriți și micșorați folosind rotița mouse-ului.

Această vizualizare este integrată cu celelalte instrumente din inspector. Dacă aveți panourile HTML sau Stil deschise, puteți face clic pe un element de pe hte pentru a vizualiza codul HTML al elementului sau proprietățile CSS.

Mai multe caracteristici 3D

Caracteristica de vizualizare 3D sa bazat pe extensia Tilt, dar nu are toate caracteristicile extensiei Tilt.dacă doriți să personalizați culorile sau chiar să exportați vizualizarea ca fișier model 3D pentru utilizare cu un program de editare 3D, va trebui să instalați suplimentul Tilt 3D.Odată ce ați primit, veți primi o nouă opțiune "Tilt" în meniul Web Developer.

Faceți clic pe butonul Anulare pentru a utiliza vechea versiune a Tilt atunci când vi se solicită.

Veți găsi comenzi pentru a personaliza vizualizarea din partea stângă a ferestrei și alte opțiuni, inclusiv caracteristica de export, în partea de sus a paginii.

Editor stil CSS

Pentru a vizualiza și a edita foile de stil CSS ale unei pagini, deschideți Editorul de stil din meniul Web Developer.

Editorul de stil listează foile de stil de pe pagina curentă.Activează sau dezactivează o foaie de stil făcând clic pe pictograma ochi din stânga numelui stilului. Editați o foaie de stil selectând-o și modificând codul.

Modificările sunt reflectate imediat pe pagină.Dacă dezactivați o foaie de stil, pagina va pierde informațiile despre stil. Dacă editați o foaie de stil, veți vedea că editările apar pe pagină în timp ce tastați.

Puteți salva o copie a uneia dintre foile de stil pe computer, puteți importa o foaie de stil existentă de pe computer sau puteți adăuga o foaie de stil nouă, cu link-urile Salvează, Import sau Noi în fereastra Editor stil.

Caracteristica de vizualizare 3D urmărește modificările de pe pagina curentă și anunțurile când apar schimbări. Când utilizați Editorul stilului cu inspectorul 3D deschis, modificările dvs. vor fi reflectate imediat în vizualizarea 3D.Acest lucru funcționează, de asemenea, cu extensiile terță parte care modifică paginile web, cum ar fi Firebug.