Firefox Developer Edition 6 Strumenti più interessanti da provare
Oggi la versione per sviluppatori di Firefox è l'unico browser realizzato appositamente per gli sviluppatori. Gli strumenti di sviluppo nell'edizione standard vengono visualizzati per primi nella versione per sviluppatori e vi sono strumenti in edizione per sviluppatori che non sono e non saranno resi disponibili nell'edizione standard. Oggi daremo un'occhiata ad alcuni degli strumenti che al momento può essere trovato solo nella versione per sviluppatori.
Se sei qualcuno che non ha mai usato o che non ha molta familiarità con gli strumenti di sviluppo, anche quelli della versione standard, dai un'occhiata a questo interessante "DevTools Challenger" di Mozilla. Qui puoi esercitarti con alcuni degli strumenti menzionati di seguito nel browser Firefox Developer Edition. Gli esempi sono divertenti e facili da seguire, le istruzioni sono semplici e se non riesci a raggiungerlo, segui invece il tutorial video.
1. Strumento per l'ispezione dell'animazione
Le animazioni CSS stanno diventando sempre più comuni e gli strumenti di animazione CSS forniti dall'edizione per sviluppatori di Firefox rendono facile seguire e ispezionare ogni fase dell'animazione creata. Puoi mettere in pausa, riprodurre e invertire qualsiasi animazione; puoi anche vederlo accadere fotogramma per fotogramma tramite scrubbing.
Per accedere allo strumento, aprire il Ispettore strumento facendo clic con il pulsante destro del mouse sull'elemento animato e selezionando "controlla elemento", quindi sul lato destro della finestra dello strumento di sviluppo, fare clic su "Animazioni".
2. Editor delle funzioni di temporizzazione delle animazioni
Il tempo di animazione è modificabile nello strumento dev, basta fare clic sull'icona accanto alla funzione nel Regole sezione del Ispettore strumento e un pop-up che mostra le curve di funzione si apre. Puoi trascinare e modificare questo per regolare i tempi di animazione. Una volta apportate le modifiche alle curve, la velocità dell'animazione cambierà di conseguenza.
Se non hai già familiarità con la funzione di animazione cubica di Bezier, ti consiglio questo post per saperne di più.
3. Selettore colore per le proprietà CSS
C'è già un selettore di colori disponibile nella versione standard di Firefox (leggi di più in proposito in questo post), che preleva un colore dalla pagina e lo copia negli appunti. Il selezionatore di colori che sto citando ora è comunque specifico per i valori cromatici CSS delle proprietà.
Accanto a ogni valore di colore CSS nel Regole sezione del Ispettore strumento, c'è un'icona che aprirà una ruota dei colori quando viene cliccato. È possibile selezionare il colore desiderato dalla ruota.
Se hai già un colore che desideri e uno che si trova nella pagina, fai semplicemente clic sullo strumento contagocce nella parte inferiore del popup per aprire il selettore di colori, quindi trascina il selettore sul colore desiderato e fai clic su di esso. . Il valore del colore CSS verrà modificato in quello del colore selezionato.
4. Strumento di misurazione
Questo strumento consente di visualizzare la posizione XY del cursore e l'altezza, la larghezza e la diagonale in pixel di una porzione selezionata. Per utilizzare lo strumento, devi prima abilitarlo nello sviluppatore Opzioni degli strumenti, selezionando la casella "Misura una parte della pagina" in "Pulsanti casella degli strumenti disponibili".
Una volta abilitato, un'icona righello apparirà nella parte superiore della finestra dello strumento dev, fare clic su quell'icona e spostare il cursore sulla pagina. Vedrai le posizioni XY vicino al cursore. Per misurare larghezza, altezza e diagonale basta fare clic e trascinare per selezionare la porzione che si desidera misurare.
5. Editor del filtro CSS
Se avessi applicato il filtro CSS a un elemento nella pagina, vedrai un'icona accanto a esso Regole sezione del Ispettore strumento, che apre un editor di filtri CSS al clic.
Per rimuovere un filtro, fai clic sul segno × all'estremità destra del nome del filtro. Per aggiungere un filtro, fai clic sulla casella del filtro in basso e seleziona quella che desideri aggiungere e fai clic su + cartello. Puoi anche riordinare i filtri in qualsiasi ordine trascinando ciascun elemento.
6. Strumento di memoria
Puoi scoprire cosa sta occupando la memoria nella tua pagina web, con l'aiuto di questo strumento. Questo ti aiuta ad adottare misure per ridurre l'utilizzo della memoria e migliorare la velocità della pagina di conseguenza.
Per usare lo strumento, dovrai prima abilitarlo dal Opzioni degli strumenti selezionando la casella di controllo "Memoria" in "Strumenti di sviluppo Firefox predefiniti". Una volta selezionato, vedrai la sezione "Memoria" nella parte superiore della finestra dello strumento di sviluppo subito dopo "Prestazioni". Seleziona quello.
Per utilizzare lo strumento, fare clic su "Scatta istantanea" o sul pulsante della fotocamera. Verrà visualizzato un elenco di elementi, come oggetti e script che occupano memoria .
