Web Developer Mozilla è un'estensione incredibilmente utile. È 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 un blogger russo, è possibile installare questa estensione in russo, ma in questo caso non è installata l'ultima versione, ma quella precedente: 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, il pannello superiore dell'estensione apparirà 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 "stampa in piccolo", ma puoi disabilitare java script 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. Trova immagini danneggiate - nella pagina principale - non trovate. Si apre un foglio separato, dove sono presenti le descrizioni di tutte le immagini, inclusi i contatori e una 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, presto compaiono informazioni preziose sul peso delle singole sezioni. Il gran numero di script e la loro dimensione sono sorprendenti. Vale la pena considerare come possono essere ridotti e ridotti.

• • Link dalla 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, ci sono 74 - 86 collegamenti interni, ma secondo le regole SEO, non è consentito che il loro numero superi i 100.
  • Sono presenti informazioni sui meta tag della pagina principale.

Informazioni varie

• • Varie - contengono: righello, lente d'ingrandimento, editor html, elementi 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.

• • Su questo consiglio, ho fatto quanto segue: ho attivato un altro, semplice tema / 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 del browser Mozilla, le opzioni sono leggermente diverse. Il testo è inglese, ma alcune delle pagine iniziali sono tradotte.

È meglio quando la persona ha almeno familiarità con la lingua inglese, perché su Internet ne hai 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.

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 poco tempo è tornato a Firefox, a causa della mancanza di estensioni e add-on come Google Page Rank e il web developer panel 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 di un singolo elemento nella 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 in una 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 markup HTML valido in conformità con gli standard web. Ora non c'è bisogno di andare alla pagina ufficiale del validatore.

Il plugin mostra gli errori in dettaglio e la posizione esatta e spiega anche come correggere questo errore. Viene eseguito in background ed è incorporato nella pagina di visualizzazione di origine. Risparmia molto tempo.

Ciao cari lettori del sito blog. Porto alla vostra attenzione il prossimo articolo, che sarà dedicato all'esame delle capacità del plugin per Firefox() chiamato Web Developer.

Questo plug-in per il browser Firefox () è una sorta di coltellino svizzero per webmaster, che ha molte funzionalità e strumenti nella sua composizione.

Web Developer non rivendica in alcun modo i meriti di quanto discusso in precedenza, ma piuttosto lo completa fortemente. Se non hai ancora molta familiarità con le funzionalità di Firebug, puoi leggerlo al link fornito.

Installazione e funzionalità di WebDeveloper

Puoi vedere come funziona il form Html che ti interessa, modificarne alcuni parametri, ad esempio, abilitare la visualizzazione dei caratteri inseriti nei campi password, oppure convertire le richieste GET in POST e viceversa.

Altri strumenti di questo fantastico plugin

Nell'area "Grafica" sono presenti delle voci che ti permetteranno di disabilitare la visualizzazione delle immagini (o tutte le immagini, o solo scaricate da risorse esterne, o solo animate). Puoi anche semplicemente impostare le caselle di controllo accanto agli elementi necessari nel menu "Grafica" per configurare la visualizzazione accanto alle immagini di informazioni sul contenuto dell'attributo ALT (testo alternativo), nonché informazioni sul peso di questa foto, le sue dimensioni in pixel e il percorso del file con l'immagine.

Sarà inoltre possibile configurare il plug-in Web Developer per visualizzare i contorni delle immagini, trovare immagini danneggiate, visualizzare un riepilogo di tutte le foto su una pagina Web aperta e, ad esempio, configurare invece la visualizzazione del contenuto dell'attributo ALT.

Nell'area Info, questo plug-in può fornire numerose informazioni sull'intera pagina Web aperta nel browser. Ci sono molte voci in questo menu. Ad esempio, l'attivazione della voce "Mostra dimensioni blocco" comporterà la selezione di tutti i blocchi (contenitori DIV) nella pagina web e la visualizzazione accanto ad essi delle loro esatte dimensioni in pixel.

Puoi anche utilizzare il plug-in Web Developer per visualizzare la struttura dell'intestazione di una determinata pagina, le informazioni sui collegamenti e molto altro.

L'area "Varie" concentra quelle opportunità che non hanno trovato posto in altri gruppi di strumenti. Un interessante di questo gruppo è il "Righello", quando attivato, hai l'opportunità di misurare le distanze tra gli elementi di una pagina web o determinare la dimensione in pixel di un blocco.

Dopo aver attivato il righello dal plug-in, il cursore del mouse si trasforma in una croce e puoi, tenendo premuto il tasto sinistro del mouse, selezionare l'elemento della pagina desiderato. Sotto la barra degli strumenti Web Developer nella parte superiore della finestra del browser Firefox c'è la barra degli strumenti Righello, che visualizzerà informazioni sulla dimensione della selezione.

Ci sono ancora molte opportunità interessanti e utili nell'area di "Varie". Ad esempio, la voce "Editor HTML" apre una finestra aggiuntiva con il codice HTML di questa pagina. Tutte le modifiche apportate verranno immediatamente visualizzate nel browser. Molto utile per esperimenti rapidi con il design del sito web. In questo caso, ovviamente, non verranno apportate modifiche ai file reali del motore del progetto web.

Ma d'altra parte, usando Web Developer, puoi simulare varie opzioni per costruire questa pagina in Firefox in tempo reale. Se la nuova versione del codice modellato con esso è adatta a te, dovrai apportare modifiche ai file reali del motore del sito Web, che puoi trovare utilizzando il metodo descritto.

L'area Contorni ti sarà di grande aiuto mentre esplori gli elementi di design di una pagina web. Attivando questo o quell'elemento nel menu "Profili", è possibile selezionare i singoli tipi dei suoi elementi sulla pagina, ad esempio elementi a livello di blocco (contenitori DIV), elementi di tabella Html (), frame (l'articolo vive) o collegamenti nella pagina che non hanno un attributo Titolo. Aumenta notevolmente la visibilità del layout.

Il menu "Dimensioni" contiene diverse opzioni per il controllo delle dimensioni della finestra del browser. Puoi anche impostare la finestra su una dimensione arbitraria per vedere il comportamento di questa pagina quando vengono apportate modifiche.

Il gruppo "Strumenti" contiene opportunità per il controllo della convalida (conformità ai requisiti moderni per lo sviluppo web). È possibile eseguire la convalida HTML, CSS, WAI e Sezione 508. La convalida viene eseguita tramite il validatore online da.

Il plug-in può essere configurato selezionando l'elemento con lo stesso nome nel gruppo di strumenti "Impostazioni". In conclusione, voglio dire che utilizzando le funzionalità di Web Developer, puoi facilmente capire come è organizzata questa o quella pagina Web preferita e sarà anche molto utile durante la creazione e il debug di siti.

Buona fortuna a te! A presto sulle pagine del sito blog

puoi guardare più video andando su

");">

Potresti essere interessato

SEObar - plugin SEO conveniente e informativo per Opera
Firebug - Come usare il miglior plugin per webmaster
Ottimizzazione e compressione dei CSS in Page Speed ​​​​- Come disabilitare i file di stile esterni e combinarli in uno per un caricamento più veloce
Rds Bar e Page Promoter bar per aiutare il webmaster
Safari: dove scaricare e come personalizzare il browser gratuito di Apple per Windows
Estensioni e temi per Google Chrome
Plugin e temi per Mozilla Firefox: quali componenti aggiuntivi ed estensioni vale la pena scaricare e installare

Vlad Merzhevich

Sebbene l'estensione sia disponibile per due browser diversi, la versione di Firefox è aggiornata e aggiornata regolarmente, il che non è il caso della versione di 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 dello sviluppatore web

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 facendo clic con il pulsante destro del 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 sul 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, viene caricata la versione locale della 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 la messa a punto della 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 (chiamati applet) sono usati 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 reindirizzare automaticamente al 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

I reindirizzamenti possono essere utilizzati nelle chat per aggiornare il documento corrente o reindirizzare a un nuovo indirizzo. Ma viene anche utilizzato con intenti dannosi, ad esempio, con l'obiettivo di visualizzare frequentemente pubblicità o banner contestuali. Questa voce di menu consente di bloccare tale tag. .

Disabilita la dimensione minima del carattere

Nelle impostazioni di Firefox, puoi 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 gli sfondi impostati utilizzando lo sfondo sono interessati.

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 .., pannello Avanzate, scheda Rete, pulsante Configura) se "Utilizza impostazioni di sistema proxy", questo elemento non è attivo.

Disabilita referenti

Referrer è una delle intestazioni del 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 cookie o cookie, 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 attualmente aperto nel 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 una pagina aggiuntiva, in cui tutti i cookie di questo sito sono presentati in forma tabellare. È 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 altro, nonché di impostare i parametri necessari (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