Web Developer Mozilla este o extensie incredibil de utilă. Este instalat în browsere și oferă bloggerului informații complete despre starea site-urilor. La început, acest plugin putea fi instalat doar în Firefox, dar mai târziu, același autor - Chris Pederick, l-a dezvoltat și pentru Chrome. Îl poți descărca și instala, în cea mai recentă versiune, în limba engleză.

Dezvoltator web mozilla versiune rusă

Pentru un blogger rus, este posibil să instaleze această extensie în limba rusă, dar în acest caz, nu este instalată cea mai recentă versiune, ci cea anterioară - Web Developer 1.19.

În primul rând, în setările browserului Firefox, extensia este instalată în engleză. Să mergem la fila „suplimente”. În noua fereastră din dreapta, vom vedea butoane pentru mai multe programe, inclusiv pentru „Web Developer”. Activați butonul „Setări”, după care va apărea o fereastră pentru setările acestui instrument.

Pentru a activa limba rusă, trebuie să urmați linkul către versiuni. În fereastra nouă, selectați numărul 1.19, faceți clic pe butonul „adăugați la Firefox”. După repornirea browserului, panoul superior al extensiei va apărea în limba rusă. Atunci totul devine clar. Mai întâi, să ne încărcăm site-ul și să începem să-l analizăm, folosind numeroase opțiuni, panoul de sus.

Când deschideți din nou browserul, panoul este din nou în engleză, așa că trebuie să reinstalați din nou limba rusă.

Dezvoltatorul web mozilla dezactivează unele funcții

În meniul derulant, vom vedea că puteți dezactiva o serie de funcții, astfel încât să puteți vedea alte proprietăți.

• • Dezactivați „cache” și „tipuri mici”, dar puteți dezactiva scriptul java și alte funcții.

• • „Clic pe cookie-uri” deschide o pagină mare cu o listă. Aici, cookie-urile individuale pot fi modificate sau șterse, dar deocamdată m-am uitat fără să ating nimic. După ce am revizuit fila, o închid și trec la punctele următoare.

• • „Erori CSS” - deschide, de asemenea, linii de meniu drop-down. Stilurile pot fi dezactivate. Dar vreau să le văd, așa că dau clic pe linia: CSS info. Ca rezultat, a fost deschisă o foaie cu toate stilurile încorporate în temă, pluginuri și widget-uri, rezultând o pagină web lungă.

« Forme „- n Când navigați pe site, sunt evidențiate barele de site, formularele de abonare și căutarea. Webmasterii au nevoie de această filă atunci când creează șabloane, deoarece există multe linii cu parametri.

Web Developer mozilla - alte tablouri de bord pentru evaluarea site-ului

• • Grafică - arată atributele alt - descrierile de mai sus imaginile sunt evidențiate. Puteți vizualiza toate paginile site-ului și puteți identifica unde nu există descrieri pentru a o remedia. Cunoaștem dimensiunea imaginilor, dar aici indicăm greutatea și numărul de imagini. Sunt bine - greutatea este mică, fiecare imagine are 3 kb. Găsiți imagini deteriorate - pe pagina principală - nu au fost găsite. Se deschide o foaie separată, unde există descrieri ale tuturor imaginilor, inclusiv contoare și un favicon. Când am văzut totul, eliminați bifa.

• • Există multe rânduri pe panoul de informații. Dau clic pe „show id and class”, în timp ce linkurile sunt evidențiate la locația lor, adică pe site. Acest lucru este foarte impresionant deoarece atributele Titlu și imbricarea documentelor sunt afișate color.

• • Greutatea documentului - pagina s-a deschis, dar a fost inițial goală. Descărcarea trebuie să aștepte puțin. Cu toate acestea, în curând apar informații valoroase despre greutatea secțiunilor individuale. Numărul mare de scripturi și dimensiunea lor sunt izbitoare. Merită să luați în considerare modul în care acestea pot fi reduse și reduse.

• • Link-uri de pe pagina de start. Se ține cont de totul: titlul site-ului, categorii, tag-uri de tag cloud, poze, contor, widget-uri jvascript, comentarii. Am incercat sa urmaresc cateva link-uri catre paginile site-ului. Adresele din comentarii sunt închise, mulțumesc, Cu toate acestea, numărul de link-uri nu scade din cauza particularităților codului Word Press, care este greu de remediat. În total, există 74 - 86 de link-uri interne, dar conform regulilor SEO, nu este permis ca numărul acestora să depășească 100.
  • Există informații despre metaetichetele paginii principale.

Informații diverse

• • Diverse - conțin: riglă, lupă, editor html, elemente ascunse.

• • Contururi - afișează chenarele titlurilor, legăturilor, contururile blocurilor. Puteți vedea simultan contururile a două sau trei elemente ale site-ului.

• • Dimensiuni - arată dimensiunile ferestrei, zona de vizualizare. Este posibil să ajustați dimensiunea ferestrei și a fontului apăsând butonul de mărire și micșorare.

• • Instrumente - se realizează trecerea la serviciile validatorilor. Am primit o mulțime de erori CSS și HTMI la verificare. De exemplu, CSS-ul este verificat mai întâi și apoi este sugerat fișierul de stil corect generat.

• • La acest sfat, am făcut următoarele: am activat o altă temă simplă / pe scurt /. Mi-am copiat fișierul de stil, l-am mutat în notepad, l-am salvat și l-am șters din editorul site-ului. Am descărcat fișierul corect din validator și l-am inserat în loc de al meu.

• • Am fost pe site. Și ce văd cu stilurile noi, corecte? Site-ul este pe loc, dar care? Priveliștea este dezgustătoare. Șablonul a devenit o singură coloană. Textele sunt întinse de la margine la margine, nu există culori.
  • Prin urmare, mi-am returnat mai degrabă fișierul cu erori CSS și totul a fost reparat. Pe de altă parte, erorile de validare trebuie remediate, dar acest lucru nu este încă disponibil pentru mine.

Pentru browserul Chrome

Versiune web. dezvoltator pentru browserul Chrom, de același autor, îmbunătățit și completat. În comparație cu extensia de browser Mozilla, opțiunile sunt ușor diferite. Textul este în limba engleză, dar unele dintre paginile de început sunt traduse.

Este mai bine atunci când persoana este cel puțin familiarizată cu limba engleză, pentru că pe internet ai nevoie de ea. După navigarea pe web. dezvoltator, înțelegerea structurii blogului se îmbunătățește.

Analiza în această extensie trebuie să fie constantă, de aceea este indicat să o instalați în browser pentru fiecare blogger. Cel puțin pentru a controla numărul de link-uri de pe fiecare pagină.

Am folosit Firefox tot timpul. A fost bine cu mine, mai ales în timpul dezvoltării și testării site-ului. Am incercat imediat dupa ce a iesit. Mi-a plăcut viteza de redare a paginii.

Dar după o scurtă perioadă de timp a revenit la Firefox, din cauza lipsei de extensii și suplimente precum Google Page Rank și panoul de dezvoltatori web Webdev. Acum nu sunt probleme, sunt deja multe.

Plugin FireBug pentru Firefox

Acesta este principalul plugin pentru dezvoltatori web. Puteți edita, depana, vizualiza CSS, HTML și JavaScript. Rezultatul modificărilor dvs. este afișat instantaneu. Pluginul FireBug este foarte convenabil pentru a găsi o bucată de cod care este responsabilă pentru afișarea unui anumit bloc pe pagină și stilul CSS corespunzător.

Pluginul are o minunată funcție Inspect, cu ajutorul căreia puteți vedea ce etichete și proprietăți determină poziția unui element individual pe pagină. În plus, în fila Aspect, puteți vedea ce margini și indentări sunt setate pentru acest element.

Acest plugin este un add-on pentru FireBug. Cu acesta, puteți plasa cu ușurință imagini în aspectul dvs. și puteți privi schița ca și cum ar fi într-o formă finită. Pentru a face acest lucru, trebuie să selectați imaginile și să le plasați direct pe pagină. Imaginile sunt translucide, pot fi trase cu ușurință cu mouse-ul.

Descărcați pluginul Pixel Perfect pentru Firefox.

HTML Validator va simplifica procesul de creare a unui marcaj HTML valid în conformitate cu standardele web. Acum nu mai este nevoie să mergeți la pagina oficială a validatorului.

Pluginul arată erorile în detaliu și locația exactă și explică, de asemenea, cum să remediați această eroare. Se rulează în fundal și este încorporat în pagina de vizualizare sursă. Se economisește mult timp.

Salutare dragi cititori ai site-ului blogului. Vă aduc la cunoștință următorul articol, care va fi dedicat examinării capacităților pluginului pentru Firefox () numit Web Developer.

Acest plug-in pentru browserul Firefox () este un fel de cuțit elvețian pentru webmasteri, care are o mulțime de caracteristici și instrumente în componența sa.

Web Developer nu pledează în niciun fel cu meritele celor discutate anterior, ci mai degrabă o completează foarte puternic. Dacă nu sunteți încă foarte familiarizat cu capacitățile Firebug, atunci puteți citi despre el la linkul furnizat.

Instalarea și capabilitățile WebDeveloper

Puteți vedea cum funcționează formularul Html care vă interesează, modificați unii dintre parametrii acestuia, de exemplu, activați afișarea caracterelor introduse în câmpurile de parolă sau convertiți cererile GET în POST și invers.

Alte instrumente ale acestui plugin grozav

În zona „Grafică” există elemente care vă vor permite să dezactivați afișarea imaginilor (fie toate imaginile, fie descărcate doar din resurse externe, fie doar animate). Puteți, de asemenea, să setați pur și simplu casetele de selectare de lângă elementele necesare din meniul „Grafic” pentru a configura afișarea lângă imagini cu informații despre conținutul atributului ALT (text alternativ), precum și informații despre greutatea acestei fotografii, dimensiunea sa în pixeli și calea către fișierul cu imaginea.

De asemenea, va fi posibil să configurați pluginul Web Developer pentru a afișa contururile imaginilor, pentru a găsi imagini deteriorate, pentru a afișa un rezumat al tuturor fotografiilor pe o pagină web deschisă și, de exemplu, pentru a configura afișarea conținutului atributului ALT.

În zona Info, acest plugin poate oferi o mulțime de informații despre întreaga pagină web care este deschisă în browser. Există o mulțime de articole în acest meniu. De exemplu, activarea elementului „Afișați dimensiunile blocurilor” va avea ca rezultat selectarea tuturor blocurilor (containere DIV) de pe pagina web și afișarea alături de acestea a dimensiunilor exacte în pixeli.

De asemenea, puteți utiliza pluginul Web Developer pentru a vedea structura antetului unei anumite pagini, informații despre linkurile de pe aceasta și multe altele.

Zona „Diverse” concentrează acele oportunități care nu și-au găsit loc în alte grupe de instrumente. Unul interesant din acest grup este „Riglă”, când este activat, ai ocazia măsoară distanțele dintre elementele unei pagini web sau determinați dimensiunea în pixeli a unui bloc.

După activarea riglei din plug-in, cursorul mouse-ului se transformă într-o cruce și puteți, apăsând și menținând apăsat butonul stâng al mouse-ului, să selectați elementul de pagină dorit. Sub bara de instrumente Web Developer din partea de sus a ferestrei browserului Firefox se află bara de instrumente Ruler, care va afișa informații despre dimensiunea selecției.

Există încă destul de multe oportunități interesante și utile în zona „Diverse”. De exemplu, elementul „Editor HTML” deschide o fereastră suplimentară cu codul HTML al acestei pagini. Toate modificările aduse acestuia vor fi afișate imediat în browser. Foarte la îndemână pentru experimente rapide cu designul site-ului web. În acest caz, desigur, nu se vor face modificări în fișierele reale ale motorului de proiect web.

Dar, pe de altă parte, folosind Web Developer, puteți simula diverse opțiuni pentru construirea acestei pagini în Firefox în timp real. Dacă ți se potrivește noua versiune a codului modelat cu acesta, atunci va trebui să faci modificări la fișierele reale ale motorului site-ului, pe care le poți găsi folosind metoda descrisă.

Zona Contururi vă va fi de mare ajutor pe măsură ce explorați elementele de design ale unei pagini web. Prin activarea unuia sau acela element din meniul „Contururi”, puteți selecta tipuri individuale de elemente ale acestuia pe pagină, de exemplu, elemente la nivel de bloc (containere DIV), elemente de tabel HTML (), cadre (articolul live) sau link-uri din pagină care nu au un atribut Titlu. Mărește foarte mult vizibilitatea aspectului.

Meniul „Dimensiuni” conține mai multe opțiuni pentru controlul dimensiunii ferestrei browserului. De asemenea, puteți seta fereastra la o dimensiune arbitrară pentru a vedea comportamentul acestei pagini atunci când se fac modificări.

Grupul „Instrumente” conține oportunități de verificare a validării (respectarea cerințelor moderne pentru dezvoltarea web). Se poate efectua validarea HTML, CSS, WAI și Secțiunea 508. Validarea se face prin validatorul online de la.

Pluginul poate fi configurat selectând elementul cu același nume din grupul de instrumente „Setări”. În concluzie, vreau să spun că, folosind capacitățile Web Developer, puteți înțelege cu ușurință cum este aranjată această sau acea pagină web preferată și va fi, de asemenea, foarte utilă la crearea și depanarea site-urilor.

Multă baftă! Ne vedem curând pe paginile site-ului blogului

puteți viziona mai multe videoclipuri accesând

");">

S-ar putea să fiți interesat

SEObar - plugin SEO convenabil și informativ pentru Opera
Firebug - Cum să utilizați cel mai bun plugin pentru webmasteri
Optimizarea și comprimarea CSS în viteza paginii - Cum să dezactivați fișierele de stil externe și să le combinați într-unul singur pentru o încărcare mai rapidă
Bara Rds și bara de promovare a paginii pentru a ajuta webmasterul
Safari - unde să descărcați și cum să personalizați browserul gratuit Apple pentru Windows
Extensii și teme pentru Google Chrome
Pluginuri și teme pentru Mozilla Firefox - care suplimente și extensii merită descărcate și instalate

Vlad Merjevici

Deși extensia este disponibilă pentru două browsere diferite, versiunea Firefox este actualizată și actualizată în mod regulat, ceea ce nu este cazul versiunii Chrome. În plus, acceptă limba rusă. Prin urmare, în cele ce urmează, descrierea va merge doar pentru Firefox.

Instalarea este destul de simplă, trebuie doar să accesați site-ul web al autorului cu browserul Firefox și să faceți clic pe „Download”, după care veți fi dus la site, unde trebuie să faceți clic pe „Add to Firefox” (Fig. 7.1).

Orez. 7.1. Adăugați la Firefox

De asemenea, puteți merge direct la pagina cu extensia.

După adăugare, va apărea o fereastră de avertizare (Fig. 7.2), faceți clic pe butonul „Instalare acum” și procedura de instalare s-a încheiat.

Orez. 7.2. Instalarea Web Developer

O altă modalitate de a instala diferite extensii este utilizarea meniului Instrumente> Suplimente... În fereastra de căutare, tastați „web developer”, apăsați Enter, add-on-ul de care avem nevoie va apărea în lista de mai jos (Fig. 7.3).

Orez. 7.3. Fereastra de suplimente pentru Firefox

Extensia în sine arată ca o bară de meniu deasupra filelor (Fig. 7.4), este disponibilă și prin meniu Instrumente> Dezvoltator web... Puteți porni / opri panoul prin meniu Vizualizare> Bare de instrumente sau făcând clic dreapta pe bara de extensie.

Orez. 7.4. Dezvoltator web în browser

Să trecem prin elementele de meniu Web Developer.

Dezactivează memoria cache

Dezactivează memoria cache a browserului încorporată. De obicei, imaginile și copiile paginilor vizualizate sunt salvate de browser pe discul local pentru a economisi timpul de încărcare. Când pagina este redeschisă, browserul compară copia locală cu originalul, iar dacă se potrivesc, copia locală este încărcată. În unele cazuri, versiunea locală a paginii este încărcată, chiar dacă originalul este schimbat. De exemplu, în setările browserului, se poate seta o verificare la fiecare două ore dacă pagina salvată în cache a fost actualizată pe server. Cu toate acestea, Firefox nu permite reglarea fină a cache-ului ca Opera.

De asemenea, puteți reîmprospăta pagina ocolind memoria cache apăsând Ctrl + F5, aceasta este acceptată de toate browserele.

Java este un limbaj de programare dezvoltat de Sun Microsystems. Mici programe în acest limbaj (numite applet-uri) sunt folosite pentru a extinde funcționalitatea paginilor web. Firefox are suport încorporat pentru această limbă, care poate fi dezactivată prin acest element de meniu. Nu funcționează în Firefox 3.6.

Dezactivați JavaScript

Un limbaj de programare conceput pentru scripturi - programe integrate cu o pagină web. JavaScript este utilizat pe scară largă atunci când se creează pagini web pentru a le extinde funcționalitatea, de exemplu, pentru a crea diverse meniuri, forme, efecte etc. Dacă selectați elementul Dezactivați JavaScript> Complet, atunci toate funcționalitățile de pe site nu vor mai funcționa. Acest element de meniu poate fi folosit pentru a testa un site care funcționează fără scripturi, precum și pentru a ocoli diverse restricții impuse de autorii site-ului, cum ar fi dezactivarea butonului drept al mouse-ului. Web Developer spune că nu există restricții care să nu poată fi ocolite.

Dezactivați redirecționarea META

Folosind eticheta puteți redirecționa automat către documentul specificat după o anumită perioadă de timp. Pentru a face acest lucru, utilizați eticheta și valoarea de reîmprospătare a atributului http-equiv (exemplul 7.1).

Exemplul 7.1. Redirecționare automată

Redirecționările pot fi folosite în chat-uri pentru a actualiza documentul curent sau pentru a redirecționa către o nouă adresă. Dar este folosit și cu intenții rău intenționate, de exemplu, cu scopul de a afișa frecvent reclame sau bannere contextuale. Acest element de meniu vă permite să blocați o astfel de etichetă. .

Dezactivați dimensiunea minimă a fontului

În setările Firefox, puteți seta dimensiunea minimă a fontului, aceasta va fi folosită pentru textul care este mai mic decât dimensiunea specificată. Acest lucru face navigarea mai lizibilă, în special pe site-urile care afișează text într-un font care este prea mic pentru a fi confortabil.

Pentru a seta dimensiunea minimă a fontului, alegeți din meniu Instrumente> Opțiuni..., deschideți panoul Conținut și faceți clic pe butonul Mai multe din grupul Fonturi și culori. Puteți alege dimensiunea minimă a fontului din meniul drop-down Cea mai mică dimensiune a fontului.

Web Developer vă permite să activați sau să dezactivați rapid această funcție. Cu toate acestea, dacă dimensiunea minimă a fontului nu este specificată în setări, acest element nu afectează în niciun fel rezultatul.

Dezactivați culorile paginii

Dezactivează orice culoare specificată cu proprietatea de fundal sau culoare de fundal. Fundalurile care sunt setate folosind fundal sunt de asemenea afectate.

Dezactivați opțiunea de blocare a ferestrelor pop-up

Ferestrele pop-up sunt de obicei folosite pentru publicitate, așa că de obicei sunt blocate și nu sunt permise în browsere. Acest element vă permite să activați și să dezactivați rapid această opțiune.

Dezactivați proxy

Un proxy este de obicei înțeles ca un server sau program care vă permite să vă conectați la Internet, precum și în scopul de a face cereri în numele altor clienți. Dacă în setările Firefox ( Instrumente> Opțiuni .., Panoul avansat, fila Rețea, butonul Configurare) dacă „Utilizați setările sistemului proxy”, atunci acest element este inactiv.

Dezactivați referințele

Referrer este unul dintre anteturile protocolului HTTP și vă permite să obțineți adresa paginii de pe care utilizatorul a venit pe site. Dacă vă pasă de securitatea datelor dvs., activați acest articol.

Cookie-urile sau cookie-urile, așa cum sunt numite în jargon, sunt fișiere text mici de pe computerul local care stochează informații utile pentru site. Cu ajutorul cookie-urilor, vă puteți aminti numele de utilizator, starea acestuia și alte informații care sunt folosite pe site. Firefox configurează setările cookie-urilor prin meniu Instrumente> Opțiuni..., panoul de confidențialitate. Din motive de securitate, puteți dezactiva în general acceptarea cookie-urilor de pe site-uri.

Cookie-urile în sine sunt un set de câțiva parametri:

• nume unic;
• sens;
• cale - trimite cookie-uri numai dacă calea și adresa paginii se potrivesc, calea „/” înseamnă orice pagină;
• domeniu - pentru care adresa de site este relevantă înregistrarea;
• Data expirării - Spune browserului când cookie-ul poate fi șters.

Dezactivați cookie-urile

Dezactivează acceptarea cookie-urilor de pe site-uri.

Șterge cookie-urile de sesiune

Cookie-urile sunt adesea folosite pentru a verifica autentificarea utilizatorului. După introducerea numelui de utilizator și a parolei, un cod unic este generat și stocat în cookie. Când vizitați din nou site-ul, acest cod este verificat, iar dacă se potrivește cu codul serverului, site-ul „recunoaște” utilizatorul. Selectarea acestui element șterge toate sesiunile salvate.

Șterge cookie-urile pentru domeniu

Elimină toate modulele cookie pentru site-ul care este deschis în prezent în browser.

Ștergeți cookie-urile pentru cale

Elimină toate cookie-urile pentru site, a căror cale se potrivește cu calea site-ului deschis în browser.

Informații despre cookie-uri

Se deschide o pagină suplimentară, unde toate cookie-urile de pe acest site sunt prezentate sub formă de tabel. Puteți edita parametrii acestora sau puteți șterge cookie-urile cu totul (Fig. 7.5).

Orez. 7.5. Informații despre cookie-uri de pe youtube.com

Adăugați cookie-uri

Vă permite să setați în mod artificial cookie-uri pentru site-ul curent sau oricare altul, precum și să setați parametrii necesari (Fig. 7.6).

Orez. 7.6. Fereastra pentru adaugare

Adăugarea este de obicei necesară pentru a depana modul în care funcționează cookie-urile și cum se comportă site-ul, dacă există.

CSS

Acest meniu este responsabil pentru stilurile paginii curente.

Dezactivați stiluri

Conceput pentru a dezactiva stilurile din orice motiv.

Toate stilurile

Dezactivează toate stilurile utilizate pe pagină.

Stilul implicit de browser

Dezactivează stilul pentru toate elementele la care este adăugat implicit de browser. De exemplu, textul din interior

și

Are o dimensiune diferită.

Titlu

După dezactivarea stilului, dimensiunea textului acestor elemente va fi aceeași.

Stiluri inline

Dezactivează stilul într-o etichetă