Cum se utilizează 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 de documente existent și utilizează WebGL pentru a afișa grafică 3D bogată în browser.

Tilt - vizualizare 3D a site-ului

Puteți accesa Tilt din cadrul Inspectorului de pagini al Firefox. Pentru a începe, deschideți Inspectorul de pagini selectând "Inspectați" din meniul Web Developer. Puteți de asemenea 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 Style deschise, puteți face clic pe un element de pe pagina hte pentru a vizualiza proprietățile CSS ale codului HTML sau ale elementului.

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 de model 3D pentru utilizarea 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 de 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 de 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 își va pierde informațiile de 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 de stil 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.