Firefox 11 ha aggiunto due nuovi strumenti per sviluppatori web a Il già impressionante arsenale di Firefox . La funzione Inclina visualizza le strutture del sito web in 3D, mentre l'Editor di stile può modificare i fogli di stile CSS al volo.
La funzione 3D, nota come Tilt, è un modo per visualizzare il DOM di un sito web. Si integra con Document Inspector esistente e utilizza WebGL per visualizzare una ricca grafica 3D nel browser.
Tilt - Visualizzazione 3D del sito web
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.
Fai clic sul pulsante "3D" nella 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 del mouse, sposta l'immagine facendo clic con il pulsante destro del mouse e ingrandisci e riduci utilizzando la rotellina 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 caratteristiche dell'estensione Tilt. se desideri personalizzare i colori o anche esportare la visualizzazione come file di modello 3D da utilizzare con un programma di editing 3D, dovrai installare il Tilt 3D add-on . Una volta fatto, otterrai una nuova opzione "Inclina" nel menu Sviluppatore web.
Fare 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 stile CSS
Per visualizzare e modificare i fogli di stile CSS di una pagina, apri l'Editor di stile dal menu Sviluppatore web.
L'editor di stile elenca i fogli di stile nella 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 disattivi un foglio di stile, la pagina perderà le sue informazioni di stile. Se modifichi un foglio di stile, vedrai le modifiche apparire sulla pagina durante la digitazione.
Puoi salvare una copia di uno dei fogli di stile sul tuo computer, importare un foglio di stile esistente dal tuo computer o aggiungere un nuovo foglio di stile vuoto con i link Salva, Importa o Nuovo nella finestra dell'Editor di stile.
La funzione di visualizzazione 3D controlla le modifiche nella pagina corrente e avvisa quando si verificano le modifiche. Quando utilizzi l'Editor di stile con l'ispettore 3D aperto, le modifiche verranno applicate immediatamente nella vista 3D. Funziona anche con estensioni di terze parti che modificano le pagine web, come Firebug.
