2011-01-24 10 views
5

Odio Firefox, lo faccio davvero, ma come sviluppatore web sono incatenato a questo b/c del robusto set di strumenti che Firebug offre. Recentemente Chrome e gli strumenti di ispezione di Safari hanno consentito agli utenti di modificare il codice strutturale di interi blocchi (in modo molto buggato), ma non è ancora possibile modificare i fogli di stile completi. Di solito quando qualcuno lo fa, gli sviluppatori di Chrome e Safari dicono "MA PUOI MODIFICARE I CSS", e questo è vero, in una certa misura. Puoi modificare la proprietà CSS per ogni proprietà (che dura per sempre se hai molte modifiche) in entrambi i browser, ma non c'è modo di vedere il pieno foglio di stile, apportare modifiche al suo interno e vedere immediatamente i risultati. Ad oggi, solo l'installazione completa di Firebug su Firefox ti consente di farlo.Modifica completa del foglio di stile in Chrome o Safari

C'è stato un momento in entrambi i campi di Chrome o Safari per creare un plug-in per abbinare questa funzione senza precedenti? I plugin economici che ti permettono di inserire CSS nella pagina non sono la risposta. E 'davvero semplice:

  1. Avere una lista con i fogli di stile attuali che vengono fatto riferimento
  2. scegliere quello che si desidera modificare e fare clic su un pulsante Modifica
  3. vedere tutto il codice nel foglio di stile
  4. Apportare le modifiche e vederle immediatamente sulla pagina

È davvero difficile costruire qualcosa che faccia questo? Penso che debba essere, b/c perché altrimenti le community di sviluppatori di due browser la ignorerebbero completamente? Se c'è qualcosa là fuori che ora offre questa capacità, mi piacerebbe sentirlo; in caso contrario, forse qualcuno salirà sul piatto e lo svilupperà per Chrome o Safari. Sembra che i ragazzi che hanno sviluppato l'app per la modifica dei CSS sarebbero stati tutto questo.

+4

'Odio Firefox' - una visualizzazione non comune. Qualche ragione in particolare? Per quanto riguarda la tua domanda reale, non mi trovo spesso * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * spesso non mi manca da Chrome. Il cambiamento di "proprietà per proprietà" è solo una seconda natura per me. Ovviamente, sarebbe bello avere la funzione Firebug di cui stai parlando in Chrome/Safari - ma non penso che sia un grosso problema per molti sviluppatori. – thirtydot

+0

"una vista insolita" - difficilmente. Firefox, e il motore di rendering Gecko in particolare, sta iniziando a mostrare la sua età. Non è raro sentirlo chiamare il "nuovo IE" tra gli sviluppatori del mio team, che è un gruppo di circa 400 professionisti. – bjork24

+2

Mi dispiace, ma sembra una vera e propria spazzatura. Firefox 3.6.13, che non è nemmeno l'ultima versione, segna negli alti 90 del test Acid3. Sono davvero incuriosito - cosa c'è di sbagliato nel motore di rendering che ti fa odiare abbastanza da far sì che le prime parole del tuo post siano "Odio Firefox"? – thirtydot

risposta

9

Grazie a te l'ho trovato!

Il Live Stylesheets extension per Chrome è quello che stai cercando. Assicurati di riavviare Chrome dopo l'installazione per usarlo.

+0

Grazie! Funziona perfettamente! – bjork24

+0

+1, sembra perfetto per la strana volta che voglio questo in Chrome. – thirtydot

+0

dolce, bello @Knu! –

3

Puoi anche modificare fogli di stile esterni in Chrome DevTools (da Chrome 15 o giù di lì). Basta fare doppio clic sul contenuto del foglio di stile nel pannello Risorse (o fare clic sul pulsante "Modifica" sotto), modificare, Ctrl-S per confermare una nuova revisione, Esc per annullare la modifica. E aggiorna la tua pagina mentre scrivi!

0

È possibile modificare i file CSS direttamente su Chrome senza fare affidamento su alcuna estensione.

Ecco come: Edit CSS files on the fly using Chrome DevTools

Un modo diverso per accedervi:

  1. destra fare clic sulla pagina, selezionare ispezionare
  2. sulle DevTools, cliccare su "Fonti"
  3. individuare il css sul pannello "Rete" e fare clic su di esso
  4. cambiare il css e salvarlo (premendo ctrl + s) enter image description here