Come utilizzare gli strumenti per sviluppatori Web di Firefox per visualizzare le strutture del sito Web in 3D
Firefox 11 ha aggiunto due nuovi strumenti di sviluppo web all'arsenale già impressionante di Firefox. La funzione Tilt visualizza strutture di siti Web in 3D, mentre l'Editor di stili può modificare al volo fogli di stile CSS.
La funzionalità 3D, nota come Tilt, è un modo di visualizzare il DOM di un sito web. Si integra con l'attuale Document Inspector e usa WebGL per visualizzare una ricca grafica 3D nel tuo browser.
Tilt - Visualizzazione sito Web 3D
Puoi accedere a Tilt da Page Inspector di Firefox. Per iniziare, apri il Page Inspector selezionando "Inspect" dal menu Web Developer. Puoi anche fare clic con il pulsante destro del mouse nella pagina corrente e selezionare "Ispeziona elemento" per avviare l'ispettore su un elemento specifico.
Fare clic sul pulsante "3D" sulla barra degli strumenti dell'ispettore.
Vedrai la struttura della pagina dopo aver attivato la modalità 3D, ma apparirà piatta finché non la ruoterai.
Ruota il modello facendo clic con il pulsante sinistro, sposta l'immagine facendo clic con il pulsante destro del mouse e ingrandisci e riduci usando la rotella del mouse.
Questa vista è integrata con gli altri strumenti nell'ispettore. Se hai i pannelli HTML o Stile aperti, puoi fare clic su un elemento nella pagina hte per visualizzare il codice HTML o le proprietà CSS di quell'elemento.
Altre funzionalità 3D
La funzione di visualizzazione 3D era basata sull'estensione Tilt, ma non ha tutte le funzionalità dell'estensione Tilt. se si desidera personalizzare i colori o esportare la visualizzazione come file modello 3D da utilizzare con un programma di editing 3D, è necessario installare il componente aggiuntivo Tilt 3D. Una volta che hai, otterrai una nuova opzione "Tilt" nel menu Web Developer.
Fai clic sul pulsante Annulla per utilizzare la vecchia versione di Tilt quando richiesto.
Troverai i controlli per personalizzare la visualizzazione sul lato sinistro della finestra e altre opzioni, inclusa la funzione di esportazione, nella parte superiore della pagina.
Editor di stili CSS
Per visualizzare e modificare i fogli di stile CSS di una pagina, apri l'Editor stili dal menu Sviluppatore web.
L'editor degli stili elenca i fogli di stile sulla pagina corrente. Attiva o disattiva un foglio di stile facendo clic sull'icona a forma di occhio a sinistra del nome del foglio di stile. Modifica un foglio di stile selezionandolo e modificando il codice.
Le modifiche si riflettono immediatamente sulla pagina. Se si disattiva un foglio di stile, la pagina perderà le informazioni sullo stile. Se modifichi un foglio di stile, vedrai le modifiche visualizzate sulla pagina durante la digitazione.
È possibile salvare una copia di uno dei fogli di stile sul computer, importare un foglio di stile esistente dal computer o aggiungere un nuovo foglio di stile vuoto con i collegamenti Salva, Importa o Nuovo nella finestra Editor stili..
La funzione di visualizzazione 3D controlla le modifiche sulla pagina corrente e le notifiche quando si verificano cambiamenti. Quando si utilizza l'Editor di stili con la finestra di ispezione 3D aperta, le modifiche si rifletteranno immediatamente nella vista 3D. Questo funziona anche con estensioni di terze parti che modificano le pagine Web, come Firebug.
