Share
Recentemente ho deciso di tornare a Firefox, essendo stato un utente di Chrome per un certo numero di anni. Quando ho usato Firefox per ultimo, il lavoro con gli strumenti di sviluppo riguardava l'estensione Firebug. Firefox aveva alcuni strumenti integrati, ma al momento non erano così potenti come Firebug o gli strumenti di sviluppo di Chrome. Al mio ritorno ho trovato le cose sono cambiate!
Gli strumenti di sviluppo di Firefox hanno fatto molta strada e vengono continuamente aggiornati. Ora sono decisamente allo stesso livello degli altri strumenti di sviluppo e vantano alcune funzioni fantastiche, tra cui alcune che non troverai da nessun'altra parte al momento.
Se è passato un po 'di tempo da quando hai usato Firefox anche per lo sviluppo, dai un'occhiata a queste funzionalità in Firefox Dev Tools di cui potresti non sapere nulla.
Nota: un paio delle funzionalità più recenti hanno bisogno di Firefox Nightly, ma la maggior parte sono già disponibili in Firefox standard.
La griglia CSS sta iniziando a cambiare radicalmente il modo in cui vengono realizzati i layout di Web design e in meglio. Per quanto ne so, attualmente l'unico ispettore per Grid CSS si trova negli strumenti di sviluppo di Firefox.
Tra le altre cose, l'ispettore di rete può:
Se non hai ancora giocato con CSS Grid, ti piacerà e il processo di lavoro con esso è reso ancora più fluido con gli strumenti di ispezione griglia di Firefox.
Maggiori informazioni su hacks.mozilla.org.
Gli strumenti di sviluppo di Firefox ora includono un ispettore di Animazione CSS approfondito che rileverà automaticamente le animazioni su un elemento selezionato, nonché eventuali animazioni sui suoi elementi figli. Per ogni elemento animato, ti mostra una timeline con uno scrubber che puoi controllare e ti dà la possibilità di mettere in pausa, accelerare o rallentare le animazioni.
Con un'animazione selezionata puoi modificare le sue proprietà in stili scheda e vedere l'effetto delle modifiche in tempo reale, una funzione che è molto utile per il processo di regolazione di cose come le funzioni di andamento.
Il modo in cui le animazioni sono mostrate negli strumenti di sviluppo ti aiuta anche a determinare il trucco di ogni animazione, qualcosa che approfondiremo in un altro articolo in arrivo molto presto. Quindi se ti piacciono le animazioni CSS, rimani sintonizzato!
Maggiori informazioni su developer.mozilla.org.
La barra degli strumenti per sviluppatori è un modo molto pratico per attivare e controllare rapidamente le funzionalità incluse negli strumenti di sviluppo di Firefox. È un'interfaccia a riga di comando relativamente semplice attraverso la quale è possibile interagire con praticamente tutto ciò che gli strumenti di sviluppo possono fare. Ad esempio, puoi utilizzarlo per fare uno screenshot veloce, per ottenere un'anteprima reattiva del tuo sito in dimensioni specifiche o per prendere un colore dalla pagina.
Colpire MAIUSC + F2 per aprire la barra degli strumenti, quindi immettere il comando Aiuto per conoscere tutti i comandi che hai a disposizione.
Maggiori informazioni su developer.mozilla.org.
Modalità di progettazione reattiva ti aiuta a simulare diversi dispositivi; le loro dimensioni, i metodi di interazione e la velocità di connessione tipica. È possibile scegliere da un elenco di dimensioni predefinite, aggiungere le proprie definizioni di dimensione all'elenco o ridimensionare liberamente l'anteprima.
Per attivarlo clicca il Modalità di progettazione reattiva icona negli strumenti di sviluppo. Oppure, nella barra degli strumenti di sviluppo, immettere ridimensiona per attivare questa modalità, ridimensiona a per testare una dimensione specifica, ridimensionare per spegnerlo di nuovo, o ridimensiona per attivarlo e disattivarlo.
Maggiori informazioni su developer.mozilla.org.
Tieni d'occhio le dimensioni dei tuoi progetti usando i righelli della pagina, simili a quelli che potresti trovare in un'applicazione di progettazione grafica.
Clicca il Righelli icona sulla barra in alto degli strumenti dev da attivare, oppure nella barra degli strumenti di sviluppo inserire il comando governanti.
Maggiori informazioni su developer.mozilla.org.
Prendi facilmente qualsiasi colore da una pagina con il contagocce, che ingrandirà tutto ciò che muovi con il mouse per facilitare il prelievo dei colori. È possibile specificare il formato in cui si desidera inserire il codice colore oppure utilizzare il formato creato.
Attivare dal menu Sviluppatore Web o nella barra degli strumenti di sviluppo immettere il comando contagocce.
Ulteriori informazioni su: developer.mozilla.org.
Firefox ha uno strumento di screenshot molto pratico in costruzione; nessuna necessità di ulteriori estensioni per la cattura dello schermo.
In modalità normale è possibile utilizzare lo strumento screenshot per acquisire un'area di trascinamento per definire, oppure è possibile fare clic sui singoli elementi della pagina per acquisirli. Quando sei in modalità Responsive Design, puoi fare clic su un piccolo pulsante in alto a destra nell'anteprima per catturare uno screenshot di come il tuo sito appare su un particolare dispositivo.
Attiva lo strumento screenshot dalla barra degli strumenti principale in Firefox 57 (notte), in alto a destra degli strumenti di sviluppo, o dalla barra degli strumenti di sviluppo con il comando immagine dello schermo.
Maggiori informazioni su developer.mozilla.org.
Prendi una misura veloce su qualsiasi parte della pagina attivando lo strumento di misura e trascinando un rettangolo. Otterrai l'altezza, la larghezza e la distanza diagonale tra gli angoli.
Gli strumenti di sviluppo di Firefox hanno tre temi: un tema leggero (bianco), un tema scuro (blu) e un bel cenno agli strumenti originali di Firefox, un tema di Firebug.
Sia che tu abbia la tua configurazione desktop con colori chiari o scuri, avrai un tema da abbinare.
Firefox sta migliorando di giorno in giorno, soprattutto con i principali cambiamenti nella prossima versione 57. E il set di funzionalità ora disponibile negli strumenti di sviluppo di Firefox rende Firefox molto attraente non solo per la navigazione, ma anche per lo sviluppo.
Se non hai ancora scaricato Firefox Dev Tools, vai a dare loro una corsa!
Accentsconagua