Ho usato Firefox tutto il tempo. Con me stava bene, soprattutto durante lo sviluppo e il test del sito. Ho provato subito dopo che è uscito. Mi è piaciuta la velocità di rendering della pagina.

Ma dopo un breve periodo di tempo è tornato a Firefox, a causa della mancanza di estensioni e componenti aggiuntivi come Pagina di Google Classifica e pannello per sviluppatori web Webdev. Adesso non ci sono problemi, ce ne sono già tanti.

Plugin FireBug per Firefox

Questo è il principale plugin per sviluppatori web. Puoi modificare, eseguire il debug, visualizzare CSS, HTML e JavaScript. Il risultato delle modifiche viene visualizzato istantaneamente. Il plugin FireBug è molto comodo per trovare un pezzo di codice responsabile della visualizzazione di un particolare blocco sulla pagina e lo stile CSS corrispondente.

Il plugin ha una meravigliosa funzione Inspect, con la quale puoi vedere quali tag e proprietà determinano la posizione elemento individuale Sulla pagina. Inoltre, nella scheda Layout, puoi vedere quali margini e rientri sono impostati per questo elemento.

Questo plugin è un add-on per FireBug. Con esso, puoi facilmente posizionare le immagini nel tuo layout e guardare lo schizzo come se fosse già dentro forma finita... Per fare ciò, è necessario selezionare le immagini e posizionarle direttamente sulla pagina. Le immagini sono traslucide, facili da trascinare con il mouse.

Scarica il plugin Pixel Perfect per Firefox.

HTML Validator semplificherà il processo di creazione di un valido markup HTML in linea con gli standard del web. Ora non c'è bisogno di andare a pagina ufficiale validatore.

Il plugin mostra gli errori in dettaglio e posizione esatta e spiega anche come correggere questo errore. Funziona in sfondo ed è integrato nella pagina di visualizzazione di origine. Risparmia molto tempo.

Lo sviluppatore web Mozilla è incredibile utile estensione... È installato nei browser e fornisce al blogger informazioni complete sullo stato dei siti. All'inizio, questo plugin poteva essere installato solo in Firefox, ma in seguito lo stesso autore, Chris Pederick, lo sviluppò anche per Chrome. Puoi scaricarlo e installarlo, nell'ultima versione, in inglese.

Web Developer mozilla versione russa

Per Blogger russoè possibile installare questa estensione in russo, ma in questo caso non è installata ultima versione e il precedente era Web Developer 1.19.

Innanzitutto, nelle impostazioni del browser Firefox, l'estensione è installata in inglese. Andiamo alla scheda "componenti aggiuntivi". Nella nuova finestra a destra, vedremo i pulsanti per diversi programmi, incluso per "Web Developer". Attiva il pulsante "impostazioni", dopodiché verrà visualizzata una finestra per le impostazioni di questo strumento.

Per abilitare la lingua russa, è necessario seguire il collegamento alle versioni. Nella nuova finestra, seleziona il numero 1.19, fai clic sul pulsante "aggiungi a Firefox". Dopo aver riavviato il browser, pannello superiore l'estensione sarà in russo. Allora tutto diventa chiaro. Per prima cosa carichiamo il nostro sito, e iniziamo ad analizzarlo, utilizzando numerose opzioni, dal pannello superiore.

Quando riapri il browser, il pannello è di nuovo in inglese, quindi devi reinstallare di nuovo la lingua russa.

Web Developer mozilla disabilita alcune funzionalità

Nel menu a discesa, vedremo che puoi disabilitare una serie di funzioni in modo da poter vedere altre proprietà.

• • Disabilita "cache" e " carattere piccolo", ma puoi disabilitare script java e altre funzioni.

• • "Clic sui cookie" apre una grande pagina con un elenco. Qui i singoli cookie possono essere modificati o cancellati, ma per ora ho guardato senza toccare nulla. Dopo aver esaminato la scheda, la chiudo e passo ai punti successivi.

• • "Errori CSS": apre anche le righe del menu a discesa. Gli stili possono essere disattivati. Ma voglio vederli, quindi clicco sulla riga: Informazioni CSS. Di conseguenza, è stato aperto un foglio con tutti gli stili incorporati nel tema, plug-in e widget, risultando in una lunga pagina web.

« Forme "- n Durante la navigazione nel sito, le barre dei siti, i moduli di iscrizione e la ricerca sono evidenziati. I webmaster hanno bisogno di questa scheda quando creano modelli, perché ci sono molte righe con parametri.

Web Developer mozilla - altre dashboard per la valutazione del sito

• • Grafica - mostra attributi alt - le descrizioni sopra le immagini sono evidenziate. Puoi visualizzare tutte le pagine del sito e individuare dove non ci sono descrizioni per poterlo correggere. Conosciamo la dimensione delle immagini, ma qui indichiamo il peso e il numero di immagini. Sto bene - il peso è piccolo, ogni immagine è di 3 kb. Trovare immagini danneggiate- nella pagina principale - non trovato. Si apre Foglio separato, dove sono presenti le descrizioni di tutte le immagini, inclusi i contatori e le favicon. Quando abbiamo visto tutto, rimuoviamo i segni di spunta.

• • Ci sono molte righe sul pannello delle informazioni. Faccio clic su "mostra id e classe", mentre i collegamenti vengono evidenziati nella loro posizione, cioè sul sito. Questo è molto impressionante perché gli attributi del titolo e l'annidamento del documento sono mostrati a colori.

• • Peso del documento: la pagina si è aperta, ma inizialmente era vuota. Il download deve attendere un po'. Tuttavia, appare presto informazione preziosa sul peso delle singole sezioni. stupisce un gran numero di script e la loro dimensione. Vale la pena considerare come possono essere ridotti e ridotti.

• • Link da home page... Tutto è preso in considerazione: titolo del sito, categorie, tag cloud tag, immagini, contatore, widget jvascript, commenti. Ho provato a seguire alcuni link alle pagine del sito. Gli indirizzi nei commenti sono chiusi, grazie, tuttavia il numero di link non diminuisce a causa delle peculiarità del codice Word Press, difficilmente risolvibile. In totale, otteniamo 74 - 86 collegamenti interni, ma Regole SEO, non è consentito che il loro numero superi 100.
  • Sono presenti informazioni sui meta tag della pagina principale.

Informazioni varie

• • Varie - contengono: righello, lente d'ingrandimento, editor html, oggetti nascosti.

• • Contorni: visualizza i bordi di titoli, collegamenti, contorni di blocchi. Puoi vedere contemporaneamente i contorni di due o tre elementi del sito.

• • Dimensioni: mostra le dimensioni della finestra, l'area di visualizzazione. È possibile regolare le dimensioni della finestra e il carattere premendo il pulsante di zoom avanti e indietro.

• • Strumenti - viene effettuata la transizione ai servizi dei validatori. Ho ricevuto molti errori CSS e HTMI durante il controllo. Ad esempio, viene prima controllato il CSS, quindi viene suggerito il file di stile corretto generato.

• • Di questo consiglio ha fatto quanto segue: attivato un altro, argomento semplice/ brevemente /. Ho copiato il mio file di stile, l'ho spostato nel blocco note, l'ho salvato e l'ho cancellato dall'editor del sito. Ho scaricato il file corretto dal validatore e l'ho inserito al posto del mio.

• • sono andato sul sito. E cosa vedo con i nuovi stili corretti? Il sito è a posto, ma quale? La vista è disgustosa. Il modello è diventato a una colonna. I testi sono allungati da bordo a bordo, non ci sono colori.
  • Pertanto, ho piuttosto restituito il mio file con errori CSS e tutto è stato risolto. D'altra parte, gli errori di convalida devono essere corretti, ma questo non è ancora disponibile per me.

Per il browser Chrom

Versione web. sviluppatore per il browser Chrom, dello stesso autore, migliorato e integrato. Rispetto all'estensione per Browser Mozilla, opzioni leggermente diverse. Il testo è inglese, ma alcune delle pagine iniziali sono tradotte.

È meglio quando una persona ha almeno familiarità con lingua inglese perché Internet ne ha bisogno. Dopo aver navigato sul web. sviluppatore, la comprensione della struttura del blog sta migliorando.

L'analisi in questa estensione deve essere costante, quindi è consigliabile installarla nel browser di ogni blogger. Almeno per controllare il numero di link su ogni pagina.

Vlad Merzhevich

Anche se c'è un'estensione per due browser diversi, la versione per Firefox è aggiornata e viene regolarmente aggiornata, cosa che non si può dire della versione per Chrome. Inoltre, supporta la lingua russa. Pertanto, di seguito, la descrizione andrà solo per Firefox.

L'installazione è abbastanza semplice, basta andare sul sito Web dell'autore con il browser Firefox e fare clic su "Download", dopodiché verrai indirizzato al sito, dove dovrai fare clic su "Aggiungi a Firefox" (Fig. 7.1).

Riso. 7.1. Aggiungi a Firefox

Puoi anche andare direttamente alla pagina con l'estensione.

Dopo l'aggiunta apparirà una finestra di avviso (Fig. 7.2), fare clic sul pulsante "Installa ora" e la procedura di installazione è terminata.

Riso. 7.2. Installazione del Web Sviluppatore

Un altro modo per installare estensioni diverse è utilizzare il menu Strumenti> Componenti aggiuntivi... Nella finestra di ricerca, digita "sviluppatore web", premi Invio, il componente aggiuntivo di cui abbiamo bisogno apparirà nell'elenco sottostante (Fig. 7.3).

Riso. 7.3. Finestra dei componenti aggiuntivi di Firefox

L'estensione stessa ha l'aspetto di una barra dei menu sopra le schede (Fig. 7.4), è disponibile anche tramite il menu Strumenti> Sviluppatore Web... Puoi accendere/spegnere il pannello attraverso il menu Visualizza> Barre degli strumenti o cliccando bottone giusto mouse sulla barra di estensione.

Riso. 7.4. Sviluppatore Web nel browser

Esaminiamo le voci del menu Web Developer.

Disabilitare la cache

Disabilita la cache del browser integrata. In genere, le immagini e le copie delle pagine visualizzate vengono salvate dal browser su disco locale per risparmiare tempo di caricamento. Quando la pagina viene riaperta, il browser confronta la copia locale con l'originale e, se corrispondono, viene caricata la copia locale. In alcuni casi, si verifica il caricamento versione locale pagina, anche se l'originale viene modificato. Ad esempio, nelle impostazioni del browser, è possibile impostare un controllo ogni due ore se la pagina salvata nella cache è stata aggiornata sul server. Tuttavia, Firefox non consente ritocchi cache come Opera.

Puoi anche aggiornare la pagina bypassando la cache premendo Ctrl + F5, è supportato da tutti i browser.

Java è un linguaggio di programmazione sviluppato da Sun Microsystems. Piccoli programmi in questo linguaggio (i cosiddetti applet) vengono utilizzati per estendere le funzionalità delle pagine web. Firefox ha il supporto integrato per questa lingua, che può essere disabilitato tramite questa voce di menu. Non funziona in Firefox 3.6.

Disabilita JavaScript

Un linguaggio di programmazione progettato per script - programmi integrati con una pagina web. JavaScript è ampiamente utilizzato durante la creazione di pagine Web per espandere la loro funzionalità, ad esempio, creare vari menu, moduli, effetti, ecc. Se selezioni l'elemento Disabilita JavaScript> Completamente, tutte le funzionalità del sito smetteranno di funzionare. Questa voce di menu può essere utilizzata per testare un sito che funziona senza script, nonché per aggirare varie restrizioni imposte dagli autori del sito, come disabilitare il tasto destro del mouse. Web Developer afferma che non ci sono restrizioni che non possono essere aggirate.

Disabilita il reindirizzamento META

Usando il tag puoi inoltrare automaticamente a documento specificato dopo un certo periodo di tempo. Per farlo, usa il tag e il valore di aggiornamento dell'attributo http-equiv (esempio 7.1).

Esempio 7.1. Inoltro automatico

L'inoltro può essere applicato nelle chat per aggiornare documento corrente o reindirizza a nuovo indirizzo... Ma viene anche utilizzato con intenti dannosi, ad esempio, a scopo di visualizzazione frequente pubblicità contestuale o striscioni. Questo oggetto il menu ti permette di bloccare un tag simile .

Disabilita la dimensione minima del carattere

V Impostazioni di Firefoxè possibile impostare la dimensione minima del carattere, verrà utilizzata per il testo più piccolo della dimensione specificata. Ciò rende la navigazione più leggibile, soprattutto sui siti che visualizzano il testo con un carattere troppo piccolo per essere comodo.

Per impostare la dimensione minima del carattere, scegli dal menu Strumenti > Opzioni..., apri il pannello Contenuto e fai clic sul pulsante Altro nel gruppo Caratteri e colori. Puoi scegliere la dimensione minima del carattere dal menu a discesa Dimensione del carattere più piccola.

Web Developer ti consente di abilitare o disabilitare rapidamente questa funzione. Tuttavia, se la dimensione minima del carattere non è specificata nelle impostazioni, questo elemento non influisce in alcun modo sul risultato.

Disabilita i colori della pagina

Disattiva tutti i colori specificati con la proprietà background o background-color. Anche colpito immagini di sfondo che sono impostati con lo sfondo.

Disattiva Blocco popup

I popup vengono solitamente utilizzati per la pubblicità, quindi di solito sono bloccati e non sono consentiti nei browser. Questo elemento consente di abilitare e disabilitare rapidamente questa opzione.

Disabilita proxy

Un proxy è generalmente inteso come un server o un programma che consente di connettersi a Internet, nonché allo scopo di effettuare richieste per conto di altri client. Se nelle impostazioni di Firefox ( Strumenti> Opzioni .., il pannello Aggiuntivo, la scheda Rete, il pulsante Configura) è "Usa Impostazioni di sistema proxy ", questo elemento non è attivo.

Disabilita referenti

Referrer è una delle intestazioni protocollo HTTP e consente di ottenere l'indirizzo della pagina da cui l'utente è arrivato al sito. Se ti interessa la sicurezza dei tuoi dati, abilita questo elemento.

I biscotti o biscotti, come vengono chiamati in gergo, sono piccoli file di testo sul computer locale che memorizzano informazioni utili per il sito. Con l'aiuto dei cookie, puoi ricordare il nome utente, il suo stato e altre informazioni che vengono utilizzate nel sito. Firefox configura le impostazioni dei cookie tramite il menu Strumenti > Opzioni..., il pannello Privacy. Per motivi di sicurezza è generalmente possibile disabilitare l'accettazione dei cookie dai siti.

I cookie stessi sono un insieme di alcuni parametri:

• nome unico;
• senso;
• percorso - invia i cookie solo se il percorso e l'indirizzo della pagina corrispondono, il percorso "/" indica qualsiasi pagina;
• dominio - per quale indirizzo del sito è rilevante il record;
• Data di scadenza: comunica al browser quando è possibile eliminare il cookie.

Disabilita i cookie

Disabilita l'accettazione dei cookie dai siti.

Elimina i cookie di sessione

I cookie vengono spesso utilizzati per verificare l'autenticazione dell'utente. Dopo aver inserito il nome utente e la password, viene generato un codice univoco e memorizzato nel cookie. Quando visiti nuovamente il sito, questo codice viene controllato e, se corrisponde al codice del server, il sito "riconosce" l'utente. Selezionando questo elemento si eliminano tutte le sessioni salvate.

Elimina i cookie per il dominio

Rimuove tutti i cookie per il sito in cui si trova questo momento aperto in un browser.

Elimina i cookie per il percorso

Rimuove tutti i cookie per il sito, il cui percorso corrisponde al percorso del sito aperto nel browser.

Informazioni sui cookie

Si apre pagina aggiuntiva, dove in forma tabellare vengono presentati tutti i cookie di questo sito. È possibile modificare i loro parametri o eliminare del tutto i cookie (Fig. 7.5).

Riso. 7.5. Informazioni sui cookie da youtube.com

Aggiungi cookie

Consente di impostare artificialmente i cookie per il sito corrente o qualsiasi altro, nonché impostare parametri richiesti(fig. 7.6).

Riso. 7.6. Finestra per l'aggiunta

L'aggiunta è solitamente necessaria per eseguire il debug del funzionamento dei cookie e del comportamento del sito, se presente.

CSS

Questo menu è responsabile degli stili della pagina corrente.

Disattiva stili

Progettato per disabilitare gli stili per qualsiasi motivo.

Tutti gli stili

Disabilita tutti gli stili utilizzati nella pagina.

Stile browser predefinito

Disabilita lo stile per tutti gli elementi a cui viene aggiunto per impostazione predefinita dal browser. Ad esempio, il testo all'interno

e

Ha una dimensione diversa.

Intestazione

Dopo aver disattivato lo stile, la dimensione del testo di questi elementi sarà la stessa.

Stili in linea

Disabilita lo stile all'interno di un tag