Erori pe pagina web. Eliminați eroarea scriptului în Windows

Utilizarea instrumentului de dezvoltator F12 pentru depanarea erorilor JavaScript

Acest conținut se referă la versiunea mai veche a dezvoltatorului F12. Descărcați cea mai recentă versiune a documentației F12.

Instrumentele F12 permit dezvoltatorilor să depună rapid codul JavaScript fără a părăsi browserul. Încărcarea în fiecare instanță a Windows Internet Explorer 9 Instrumentele dezvoltatorului F12 oferă instrumente de depanare, cum ar fi stoppoții, vizualizarea și variabilele locale, precum și o consolă de mesaje și o execuție imediată a codului.

Acest articol discută modul de utilizare a instrumentului Developer F12 pentru depanarea codului JavaScript. Acest articol nu este un manual de depanare exhaustiv, scopul său este de a evidenția instrumentele care pot ajuta dezvoltatorul să înceapă să lucreze cu codul creat. În Internet Explorer 9 Apăsați tasta F12.Pentru a deschide instrumentele de dezvoltator și pentru a face clic pe fila. Scenariu Pentru a începe munca.

Pe tab-ul Scenariu În partea stângă este zona de cod sursă în care dezvoltatorul poate vizualiza codul său JavaScript, setați punctul de stop și pas cu pas pentru a-și îndeplini funcțiile. În zona dreaptă, puteți comuta între filele consolei, vizionați variabilele, variabilele locale, stivele de vizionare și punctele de oprire.

Rulați și opriți depanarea

Când deschideți mai întâi instrumentele de dezvoltator F12 și faceți clic pe fila ScenariuCodul dvs. apare în partea stângă și consola are dreptate. În consola puteți vedea mesajul: "Actualizați pagina pentru a vizualiza mesajele primite înainte de a deschide instrumentul Developer F12". Când vor apărea pagina web de pe consola, vor apărea toate erorile și avertismentele cauzate de browser.

Pentru a seta puncte de rupere, vizualizați controlul și variabilele locale, precum și consultați stack-ul de setare a secvenței funcțiilor, faceți clic pe Începeți depanarea. Buton Apăsați Începeți depanarea Actualizează pagina web și repornește codul în debugger.

Utilizarea consolei pentru a detecta erorile sintactice și a altor coduri

Cele mai multe proiecte de programare de eroare sunt împărțite în erori sintactice, logice și de introducere a datelor. Prezentarea consolei prezintă erori și excepții de la JavaScript, precum și excluderea modelului DOM. În interiorul codului dvs., puteți utiliza obiectul consolei pentru transmiterea la consola de stare și mesajele de eroare de mesaj în loc de apeluri "Alert ()" sau spațiu disponibil pe ecran. De exemplu, puteți adăuga un șir

Fereastră.console.log ("Fișierul a fost deschis cu succes");

În codul dvs. JavaScript pentru a obține informații despre starea scriptului fără a le întrerupe. Informații suplimentare: .

Corectarea aspectului scenariilor

Instrumentele dezvoltatorului F12 pot depana JavaScript la nivelul rândului sau al operatorului, indiferent de metoda de afișare a codului. Puteți trece prin pas pentru a efectua chiar scenarii, comprimate astfel încât acestea să arate ca un bloc de cod mare. Dar uneori este dificil să urmăriți logica când codul este un bloc.

Pentru a formata scriptul, faceți clic pe Configurare și selectați. Formatați JavaScript.. Următoarele capturi de ecran arată blocul de cod JavaScript înainte și după formatare.

Întreruperea executării codului

Sarcina de oprire în instrumentele de dezvoltatoare F12 este similară cu sarcina din depanarea codului binar, cum ar fi Microsoft Visual Studio. În zona din stânga, faceți clic pe partea stângă a șirului de cod în care trebuie să vă opriți. Punctele de oprire sunt comutate, astfel că faceți clic pe adăugați un punct de oprire și făcând clic pe elimină-l.

În cod, puteți adăuga atât de multe puncte de defalcare, după cum aveți nevoie. Puteți să faceți clic pe șirul de cod cu butonul din dreapta al mouse-ului și puteți selecta comanda Introduceți punctul de întrerupereSau faceți clic pe câmpul din stânga de lângă operatorul în care doriți să setați punctul de oprire.

Folosind instrumentele de dezvoltare F12, puteți seta punctul de oprire la nivelul operatorului, chiar dacă acești operatori sunt într-un bloc sau un șir de la mai mulți operatori. Acest lucru vă permite să creați un punct de oprire într-un segment de cod comprimat. Modul optim de a seta punctul de oprire în aceste condiții este să faceți clic pe codul cu butonul din dreapta al mouse-ului și selecția din meniul contextual al elementului Introduceți punctul de întrerupere. De asemenea, puteți utiliza formatarea descrisă anterior a scriptului (imprimare frumoasă), formatarea șirurilor pentru a simplifica clic pe câmpuri.

Gestionarea mai multor puncte de oprire utilizând fila "Punct Stop"

Când utilizați o cantitate mare de cod cu un număr mare de puncte de oprire sau chiar constând din mai multe fișiere, puteți utiliza fila. Oprirea punctelorPentru a urmări toate punctele dorite. Pe tab-ul Scenariu Faceți clic pe fila. Oprirea punctelor în proprietatea sau în zona dreaptă. Vedeți exemplul în următoarea imagine:

Pe tab-ul Oprirea punctelor Dezvoltatorul poate activa sau dezactiva, șterge, selecta și copia oprirea fără a fi nevoie să se deplaseze cu precizie în locațiile punctelor dorite. Pentru a activa sau dezactiva punctul de oprire, instalați sau debifați caseta de selectare de lângă parametrul pe care doriți să îl modificați. De asemenea, puteți merge imediat la punctul de întrerupere a codului, făcând dublu clic pe ea în listă. Puteți alege, în același timp, un punct de oprire multiplă apăsând tasta. Ctrl. și apariția punctelor de oprire necesare.

Pe tab-ul Oprirea punctelor De asemenea, puteți utiliza meniul contextual (care se deschide făcând clic pe butonul din dreapta al mouse-ului), care vă permite să ștergeți, să activați, să dezactivați sau să copiați grupurile de stoppoint. Acești parametri sunt prezentați în tabelul următor.

Articol din meniu	act
Șterge	Eliminarea punctului de oprire fără posibilitatea de recuperare.
Ștergeți totul	Eliminarea tuturor punctelor de oprire fără posibilitatea de recuperare.
Permite tuturor	Instalarea tuturor steagurilor din listă.
Dezactivați totul	Eliminarea tuturor steagurilor din listă.
Condiție	Vă permite să stabiliți un punct de oprire pentru un punct. Acest articol nu este disponibil dacă sunt selectate mai multe puncte de oprire.
Copie	Copierea descrierilor de text ale punctelor de oprire selectate.
Selectează tot	Alocarea tuturor punctelor de închidere din listă.
La codul sursă	Mergeți în zona stângă a codului pentru a afișa punctul de oprire selectat. Acest articol nu este disponibil dacă sunt selectate mai multe puncte de oprire.

Înclinarea punctelor condiționate

Oprirea necondiționată pe șirul de cod este utilă, dar chiar și mijloacele mai puternice trebuie să se oprească atunci când proprietatea sau variabila atinge o valoare specifică. Pentru a vă opri când atingeți sau instalați o valoare specifică, creați un punct de oprire, apoi deschideți fila. Oprirea punctelor. Faceți clic dreapta pe punctul de oprire dorit și selectați comanda. Condiție.

În caseta de dialog Condiții, adăugați operatorul corect JavaScript. Codul executabil se va opri la acest punct de întrerupere atunci când rezultatul operatorului va fi adevărat. De exemplu, în imaginea următoare, execuția codului se oprește atunci când valoarea proprietății Oaudio.pus devine egală cu falsul.

Puteți specifica o condiție sau puteți utiliza operatori logici, creați o stare de oprire mai dificilă. Dar amintiți-vă că gama de variabile și obiecte va rămâne aceeași ca atunci când sunt afișate în fereastra de vizualizare a punctului de oprire. Valoarea condiției care nu intră în domeniul de aplicare nu va fi evaluată ca fiind adevărată.

Executarea codului pas-la-pas

Când execuția codului se oprește la punctul de oprire, puteți utiliza butoanele de tranziție pentru a continua executarea ( F5.), întreruperea executării ( Ctrl + Shift + B), intrarea pas cu pas la funcție ( F11.), funcția de sărituri ( F10.) sau Funcția de ieșire ( Shift + F11.). Când execuția este oprită la punctul de întrerupere sau când execuția pas cu pas, fereastra de depanare devine de fapt modală.

Prin urmare, înainte de a continua interacțiunea cu pagina web, trebuie să opriți depanarea ( Shift + F5.) sau continuarea executării ( F5.). Ar trebui să fie amintit dacă se pare că pagina web a încetat să răspundă. Dacă, când mai multe ferestre sunt deschise, fereastra Debugger nu este deasupra, se poate aștepta la o reacție la punctul de oprire. În acest caz, pentru a returna managementul paginilor web, localizați fereastra de depanare pentru această pagină Web și faceți clic pe F5. Pentru a continua sau a face clic pe Shift + F5. Pentru a opri depanarea.

Vizualizați variabilele utilizând fișierele "ceas" și locale

Tablo Ceas Vă permite să determinați și să vizualizați variabilele de control din codul datoriei. Conține numele, valoarea și tipul variabilelor specificate variabile. Puteți să faceți clic pe șirul marcat faceți clic pentru a adăuga ..., fila Valori de control și introduceți numele variabilei. Dacă nu doriți să introduceți numele variabilei, puteți copia și lipi în lista variabilelor de control.

Valorile din lista variabilelor de control sunt afișate indiferent dacă codul este în prezent depanat sau nu. Când porniți codul de depanare și de urmărire sau punctele specificate pentru a opri gama de valori variabile din listă este determinată de punctul de execuție al scriptului curent. Dacă depanarea este dezactivată, domeniul de aplicare este global, iar valorile variabilelor globale vor fi afișate.

În contrast cu fila Valori de control, valorile pe care sunt arătate indiferent dacă variabilele corespunzătoare sunt în câmpul de acțiune, pe tabară Local Numai variabilele sunt prezentate în zona actuală de acțiune. Nu este nevoie să adăugați variabile pentru a adăuga, deoarece atunci când schimbați zona de acțiune, această filă este actualizată, afișând toate variabilele disponibile.

Pentru a vedea diferența, deschideți următorul exemplu în Internet Explorer 9 și urmați aceste acțiuni.

Exemplu de depanare JavaScript

Încărcați un exemplu în Internet Explorer 9.
Apăsați tasta F12.Pentru a deschide instrumentele de dezvoltator F12 și faceți clic pe fila Scenariu.
În zona din stânga, urmați derularea la prima funcție, faceți clic dreapta pe linia "var A \u003d 5;" Și selectați echipa Introduceți punctul de întrerupere.
apasa butonul Începeți depanareaȘi apoi pe pagina web din browser, faceți clic pe ALERGA. (A executa).
În instrumentele de dezvoltatoare F12, faceți clic pe fila. Valori de control Pe partea dreaptă și adăugați variabile "A, B, C și D.".
Pas cu pas executați codul apăsând tasta F11. sau buton. Pas cu venireași vizualizați variabilele pe tabară Valori de control.

Cu execuția pas cu pas a fiecărei funcții, valorile vizualizate trebuie să varieze cu incerte asupra unor valori.

Pentru a simți diferențele din tablă LocalFaceți clic pe tastă F5. Pentru a continua de la dezvoltatorul F12. Pe pagina web din browser, faceți clic pe ALERGA. (RUN) Pentru a executa din nou codul și pentru a reveni la dezvoltatorul F12. În zona dreaptă a filei Scenariu Faceți clic pe fila. Local și apăsați tasta F11.Pentru a trece din nou pasul pentru a efectua funcții. Rețineți că lista variabilelor locale conține numai variabile care au valori. În prezentare Local De asemenea, arată argumentele transmise funcției, valoarea și tipul acestora.

Vizualizarea apelurilor de stivă

Tablo Stivă de apeluri Vă permite să vizualizați calea care trece la funcțiile de apel din cod. Acest lucru poate ajuta la detectarea unui cod neașteptat de execuție a codului care a devenit rezultatul unei erori. Pe tab-ul Stivă de apeluri Puteți să faceți dublu clic pe orice caracteristică și să continuați apelul în codul sursă.

Încercați să executați exemplul de mai sus și să urmați fila. Stivă de apeluri Cu execuția pas cu pas a codului cu o ocazie în funcție.

Pe tab-ul Stivă de apeluri Funcția sau locația curentă este întotdeauna pe partea de sus (sunt indicați de săgeata ca pe fila Stivă de apeluriși în domeniile codului). Cu dublu clic, oricare dintre funcțiile din listă evidențiază operatorul apelând funcția.

Debugging multiple scenarii

Paginile web mari tind să utilizeze mai multe fișiere JavaScript. Dezvoltatorul F12 înseamnă că vă permit să lucrați cu mai multe fișiere scenarii, precum și la depanarea codului. Pentru a vizualiza un alt fișier, faceți clic pe săgeata jos de lângă buton Începeți depanareaPentru a afișa o listă de scenarii asociate cu această pagină web. Când utilizați instrumentele de dezvoltator F12, executarea pasului a codului va fi efectuată pe toate fișierele. Puteți să adăugați variabilele din orice fișier de script, iar în vizualizarea stivei de apel va fi afișată prin funcțiile conținute în diverse fișiere scenarii.

Schimbarea setării modului de documente

Setarea modului de document din partea dreaptă a șirului Meniul Disponibil pe fiecare filă F12 Developer, dar acest lucru este deosebit de util pentru această setare la depanarea codului în fila. Scenarii. Internet Explorer 9 vă permite să modificați modul de document pentru a emula standardele versiunilor anterioare ale Windows Internet Explorer. În Internet Explorer 9 Anunțuri de ieșire Implicit se stabilește modul de compatibilitate pentru tipul de documente. Când lucrați cu o nouă caracteristică sau un nou standard, cum ar fi sau în HTML5, unele erori pot arăta ca erori de programare, dar, în realitate, să fie cauzate de AD Doctype ratat sau incorect.

F12 Instrumente pentru dezvoltatori pentru Internet Explorer 9 nu vă pot corecta codul pentru dvs., dar într-o oarecare măsură facilitarea erorilor JavaScript.

Actualizat: noiembrie 2007

Platforma ASP.NET oferă suport avansat de depanare a aplicației web. Cu toate acestea, datorită naturii distribuite a aplicațiilor web, depanarea lor este caracterizată de unele caracteristici.

În general, aplicațiile web sunt debugate, precum și alte aplicații Visual Studio. Puteți seta opririle, rulați debuggerul, întrerupeți executarea codului, verificați valorile variabilelor și efectuați toate funcțiile asociate cu Debuggerul Visual Studio. Pentru mai multe informații, consultați secțiunea. În plus față de aceasta, platforma ASP.NET acceptă modul de urmărire care vă permite să introduceți un instrument în formular. Pentru detalii, consultați secțiunile și.

Pentru mai multe informații despre depanarea la distanță, consultați secțiunea.

Indiferent de cazul în care depanarea va fi făcută - pe computerul local sau pe telecomandă, este necesar să se asigure că depanarea este permisă pentru această aplicație web. Pentru a permite depanarea fișierului web.config, care face parte din proiectul de aplicație web. Acest parametru prescrie compilatorul pentru a introduce caractere de depanare în codul de aplicare compilat, astfel încât debuggerul să poată fi utilizat pentru acesta. Puteți activa depanarea utilizând instrumentul de administrare a site-ului web. Pentru mai multe informații, consultați secțiunea.

Uneori browserul poate notifica utilizatorul despre eroarea de script. Acest lucru se aplică, de asemenea, la standardul de Internet Explorer. În aceasta, apropo, un astfel de de eșec apare mai des decât la alți observatori. Ce ar putea fi cauzat de această problemă și cum să o rezolvi?

Eroarea scriptului apare de obicei în cazurile în care browserul nu poate procesa corect codurile paginilor HTML. De asemenea, eșecul încărcăturii poate provoca un număr excesiv de fișiere temporare (mai ales dacă browserul nu este curățat de la ele). De asemenea, unele setări de cont pot interfera cu rularea corectă a resursei. Astăzi considerăm cum să eliminăm eroarea de script în Internet Explorer, luând în considerare toate aceste motive.

Primele acțiuni

Dacă acest lucru sa întâmplat pentru prima dată, poate fi un singur caz. În consecință, să vă faceți griji cu privire la ceea ce. Încercați să reîncărcați această pagină. Dacă o notificare apare din nou cu o întrebare, dacă să nu mai executați acest script, faceți clic pe butonul "No".

A determinat că acest lucru nu este un singur caz. Ce să facă în continuare? Uite, indiferent dacă oferă o eroare la deschiderea tuturor paginilor sau numai una. Dacă pe unul, mergeți la un alt cont pe același site, deschideți pagina într-un alt browser și PC.

Puteți utiliza un alt browser. Astăzi există multe dintre ele, în timp ce acestea nu sunt inferioare instrumentului standard, în multe lucruri chiar depășesc. Dacă aveți toate marcajele sunt salvate în IE, puteți utiliza funcția de export de date.

Blocați scripturile active ActiveX și Java

Ați decis să nu mergeți la un alt program? În acest caz, vom rezolva problema în continuare.

Active X și Java pot fi dezactivate sau blocate. Aceasta este una dintre cauzele comune ale scenariilor. Ce trebuie să faceți în acest caz? Trebuie să resetați setările de securitate intervievator.

Rulați programul. Faceți clic pe pictograma sub formă de unelte. Ea va fi lângă un asterisc. În lista de opțiuni care apare, selectați secțiunea "Proprietăți browser". Acesta va fi elementul penultim.

Deschideți cea de-a doua filă "Securitate". Faceți clic pe butonul "Implicit". Faceți clic pe aprox.

Fișiere temporare în browser

Internet Explorer salvează versiunile paginii când au început. Păstrați toate copiile din dosar cu fișiere temporare. Acest dosar trebuie curățat din când în când. Dacă dosarul ajunge, de exemplu, volumul mai multor gigaocteți, browserul va începe să stea și să emită, în special, eroarea de script. În acest caz, trebuie să eliminați toate conținutul depozitului specificat.

Următorul mod va ajuta la scăderea gunoiului în memoria cache, vizitează istoricul, cookie-urile, datele către formularele web, precum și parolele. Desigur, aveți dreptul să alegeți ce tip de fișiere pe care să le ștergeți și ce să plecați.

Apăsăm din nou uneltele de pe cei deja familiarizați. Alegeți "Proprietățile browserului".
Treceți la secțiunea "General".
În blocul revistei browserului, faceți clic cu încredere în butonul "Ștergere".
Bifați fișierele temporare și alte tipuri de fișiere din care doriți să scăpați și apoi confirmați ștergerea.

Blocarea de la antivirus

Scenariile nu pot fi efectuate datorită faptului că software-ul dvs. anti-virus blochează funcționarea lor sau scanează foldere cu fișiere temporare. Ce trebuie sa facem? Deschideți fereastra antivirus și opriți blocarea elementelor interactive. Nu există instrucțiuni de deconectare unică pentru toate antivirusurile. Procedura va diferi în funcție de tipul dvs. antivirus.

Procesarea codului paginii HTML incorecte

Există o astfel de situație în cazul în care un singur site atârnă. Aceasta înseamnă că codul paginii nu este potrivit pentru Internet Explorer. Pentru a descărca pagina, scripturile de depanare trebuie dezactivate.

Reveniți la fereastra Proprietăți browser.
Mergeți de data aceasta în blocul al patrulea "opțional".
Scoateți caseta de selectare din "Afișați notificarea fiecărei erori de script". Salvați modificările.

Dacă utilizatorul a interzis depanarea scriptului, notificarea de eroare nu mai apare. Pagina va depinde oricum, astfel încât această metodă poate fi utilizată numai dacă problemele sunt doar cu un singur site.

Descărcați actualizări accesibile

Scenariul nu poate fi efectuat incorect datorită faptului că nu există actualizări necesare ale sistemului și Internet Explorer. Actualizarea poate rezolva o problemă complet.

Accesați centrul de actualizare de la PC și asigurați-vă că sunt instalate toate actualizările. Dacă nu, începeți instalarea.

Folosim un registru de sistem

Un eșec poate apărea la pornirea Windows, adică atunci când porniți un computer. Acesta nu este un eșec serios, dar totuși trebuie să corectați situația. Registrul de sistem va intra în mișcare. Metoda de corecție a erorilor este mult mai complicată decât cea anterioară. Dacă sunteți un novice, cereți acest lucru pentru dvs. un utilizator mai informat.
1. Obțineți fereastra "Run" și înregistrați comanda Regedit în șir.

2. Personalizați butonul HKEY_LOCAL_MACHINE bloc și alegeți "Permisiuni".

3. În fereastra care apare în partea de jos, puneți accesul complet și citirea.

4. Faceți clic pe parametri suplimentari. Faceți clic pe butonul "Schimbare" și puneți "Permiteți

5. Referitor la Salvarea setărilor. Faceți clic pe OK.

6. Întrerupeți dispozitivul. Apelați linia de comandă. Codul de bare final - treceți următoarea comandă: regsvr32 msxml.dll. Faceți clic pe tastatură pe Enter.

Eroarea scriptului în Internet Explorer este rezolvată de o varietate de moduri. Am prezentat simplu și complex. Alegerea metodei depinde de cauză, iar deoarece este atât de ușor de definit, utilizați metoda pentru metodă.

În timp ce lucrați pe Internet, browserul Internet Explorer poate emite mesaje pe care pagina conține erori și poate fi afișată incorect. Luați în considerare mai multe modalități de corectare a acestei probleme.

Instrucțiuni

Dacă nu există dificultăți vizibile în alte browser decât o eroare care apare periodic, puteți încerca să dezactivați depanarea scriptului, astfel încât mesajul să nu mai apară (dacă eroarea nu apare pe una, dar imediat pe mai multe site-uri, mergeți la mai multe site-uri urmatorul pas). În meniul "Service", deschideți elementul de proprietăți Observer, selectați fila "Avansat" și bifați caseta de selectare "Pre-Debug Scripting Debugging". Dacă trebuie să dezactivați alerta despre toate erorile, debifați caseta de selectare pentru "Afișați notificarea despre fiecare eroare de script".

Încercați să deschideți site-ul atunci când vizualizați o eroare apare dintr-un alt cont sau de la un alt computer pentru a afla dacă problema este locală. Dacă apare eroarea, cel mai probabil, este cauzată de codul de pagină web greșit. În acest caz, puteți dezactiva depanarea scripturilor, urmând instrucțiunile din pasul anterior. Dacă vizualizați site-ul utilizând un alt computer sau cont, problema dispare, mergeți la pasul următor.

Poate că browserul Internet Explorer la momentul vizualizării paginilor nu blochează scripturile active, Java și ActiveX, care definesc afișarea informațiilor de pe pagină. Pentru a corecta problema, trebuie să resetați setările de securitate ale browserului. Pentru a face acest lucru, în meniul "Service", selectați "Observer Properties" și accesați fila de siguranță. Faceți clic pe butonul implicit și apoi "OK". Dacă, după re-rularea paginii pe care a apărut o eroare, problema rămâne, încercați următoarea metodă.

După cum știți, browserul stochează fișiere temporare și copii ale paginilor într-un dosar separat, pentru circulația ulterioară. Dacă dimensiunile folderului devin prea mari, pot apărea erori atunci când sunt afișate unele pagini. Problema poate fi rezolvată, curățând periodic folderul cu fișiere temporare. Pentru a face acest lucru, deschideți caseta de dialog Proprietăți Observer din meniul "Service". În fila General, în grupul Istoric, faceți clic pe butonul Ștergere. Bifați casetele de selectare pentru "Fișiere temporare Internet", "Cookies", "jurnal", "date Website" și faceți clic pe "OK".

Există, desigur, și alții - îi voi menționa cu siguranță.

Firebug pentru Firefox.

Nu știu sigur dacă Firebug. Progenitorul altor mijloace pentru dezvoltatori, dar este cu siguranță cea mai populară, convenabilă și funcțională până în prezent.

Firebug este o adăugare pentru Firefox, ceea ce înseamnă că ar trebui să fie descărcat de pe site-ul web Firefox Add-ons și instalare.

Pentru a apela la Firebug, este suficient să apăsați F12.

Oportunități pentru acest add-on:

Inspectarea și editarea HTML în mod dinamic;
Editarea CSS în zbor;
Depanarea JavaScript, linia de comandă pentru a executa scripturi;
Monitorizarea interogărilor de rețea - Puteți vedea dimensiunea și timpul de descărcare a fișierelor și a scripturilor, anteturile de interogare;
DOM analizor.

Puteți spune mult timp despre aceste oportunități în detalii, dar cred că sunt cunoscute tuturor cititorilor noștri și, dacă nu - există informații detaliate despre pagina de pornire a paginii de pornire sau aceeași în traducerea Ilya Cantor.

În plus față de Firebug'a, puteți folosi un rând util la ea - Firecookie.Cu care (surpriză :-) pot fi vizualizate și schimbate cookie-uri.

Bara de Instrumente de Dezvoltare Web pentru Firefox

O altă adăugare utilă a focului. Se pare așa:

Vom examina la puncte.

Dezactivați

Vă permite să dezactivați JavaScript, să interziceți utilizarea cache-ului, ceea ce este foarte util la dezvoltarea (vă permite să vă asigurați că pagina este încărcată împreună cu cele mai recente actualizări), anulați culorile utilizate pe pagină și înlocuiți-le cu standard, interziceți Plecarea în antetul de referință (pagina cu care a fost tranziția).

Cookie-uri.

Opțiune utilă pentru lucrul cu cookie-uri: ele pot fi vizualizate, șterse, interzice și adăugați.

Css.

Acest meniu stochează caracteristica răcită a barei de instrumente dezvoltator - editarea CSS în zbor. În plus, este posibil să se vizualizeze CSS, să interzică și așa mai departe și altele asemenea. În opinia mea, aici este foarte utilă pentru prezența tastelor rapide (CTRL + SHIFT + C, de exemplu, vă permite să mergeți imediat la vizualizarea stilurilor paginii)

Forme.

Toate pentru a lucra cu formulare: Afișați parole, Afișați informații despre formulare, convertiți metodele de formular (obțineți "postați și viceversa) și multe altele. Funcție utilă "Populați câmpuri de formă" pentru a completa automat câmpurile de formular (de exemplu, când testați site-ul, când funcția de memorare a parolei este dezactivată. Pentru restul, nu văd nimic util în acest moment.

Imagini

Există o caracteristică utilă de dezactivare a imaginilor - pentru a vedea cum arată site-ul dvs. fără imagini. Imaginile pot fi înconjurate, arată dimensiunea lor, arată atributele alt.

informație

Acest meniu are o mulțime de opțiuni. Puteți fi o caracteristică utilă de afișare a clasei de atribute și a ID-ului pe pagină. În plus, elementul "Vizualizați informații despre culori" este interesant - pentru a obține rapid informații despre culorile care sunt utilizate pe pagină. Vizualizați dimensiunea documentului - Vizualizați dimensiunea paginii. "Vizualizați anteturile de răspuns" - Vizualizați pozițiile paginii.

Diverse.

Caracteristica cea mai frecvent utilizată este curățarea cache. În plus, funcțiile "riglă de pagină" - o linie, "Mufă de pagină" - Magnifier și "Ghiduri de linie" - mai multe linii care pot fi utile pentru a împinge modelul.

Contur

Alocarea diferitelor elemente ale paginii - tabele, anteturi, link-uri, cadre, blocuri. Redimensionarea Vă permite să modificați dimensiunea ferestrei browserului pentru orice extensii standard de ecrane. Instrumentele Aici sunt caracteristicile de validare a paginilor. Atât locale cât și externe. Acces convenabil și rapid la HTML, validarea CSS și alte lucruri. Pentru validarea HTML, puteți utiliza clauza CTRL + SHIFT + H.

Vizualizare sursă.

Vizualizați codul sursă. Abilitatea de a vizualiza într-o aplicație externă, vizualizarea codului generat.

Ce este în colțul din dreapta îmi place cel mai mult. Acesta este un indicator HTML HTML rapid, indicator de eroare CSS și JavaScript. Dacă nu există probleme - pictograma verde și dacă există probleme - roșu.

Internet Explorer Developer Bara de instrumente

Începând cu 8.0 erori de depanare, acesta este deja construit în acest browser. Este ușor chemată de tasta F12.. Adevărat, el este sărac ca un program al anilor '90.

Dar există un instrument mai răcitor pentru acest browser, așa-numitele descărcări de instrumente de instrumente Internet Explorer Descărcări prin referință.

Cu forma acestei Tulbar, desigur, arată ca Firebug, dar, din păcate, nu am încă Doros. Deși, pe de altă parte, există unele oportunități pe care nu există Firebug. Aș suna bara de instrumente Internet Explorer Developer la un anumit Firebug Hybrid și Dezvoltator Web Firefox. Bara de instrumente.

Ca și în Firebug, există o oportunitate de a inspecta elementul prin apăsare simplă. Dar, dacă putem vedea imediat padding'i și marjă, atunci nu există o astfel de oportunitate.

În plus, bara de instrumente Internet Explorer Developer nu actualizează arborele elemente dinamic, așa cum face Firebug. Asta este, dacă schimbăm ceva pe pagina Fondului JS, nu vom vedea nimic cu această Tulbara.

Din ceea ce poate fi respins - schimbați CSS în zbor (o modalitate ușoară de a găsi că hacking-ul :), abilitatea de a interzice CSS și imagini, abilitatea de a curăța rapid cache-ul și de a juca cu cookie-uri, acces rapid la validare.

Cel mai delicios lucru este că există un picker color încorporat, care vă permite să obțineți orice culoare din conducte. (Pentru FF există un plugin Colorzilla separat).

Debugbbar pentru Internet Explorer

Debugbar pentru Internet Explorer, puteți descărca pe linkul specificat.

În expansiunea sa interesantă. Instalat ca panou suplimentar în browser:

Există un motor de căutare încorporat, o pipetă, capacitatea de a schimba dimensiunea ferestrei și, din nou, din anumite motive, capacitatea de a trimite o pagină unui prieten să soage. Deși poate fi utilă. Dar nu am putut profita de această ocazie.

În plus, există un inspector:

Metoda de creație făcând clic pe sau prin îndrumarea dezvoltatorilor nu sa potrivit: au venit cu o bucată mai interesantă. În Debugbar'e trebuie să trageți vederea pe elementul dorit pentru ao vedea în copac. Abilitatea de a edita CSS nr. Dar există un validator și consola JS încorporată.

Și dacă doriți să săturați în setări, o puteți găsi:

Și ridicol și trist.

Se știe că în cel de-al optulea exploatator va fi construit în bara de instrumente dezvoltator. El va fi similar cu cel descris în al treilea punct, dar sperăm că va fi mai bine.

Debug dragonfly pentru operă

Dragonfly este construit în operă, începând cu versiunea 9.5, deci nu este necesar să se instaleze. Pentru a activa Dragonflays mergeți la Instrumente → Avansat → Mijloace pentru dezvoltatori. Și dacă în engleză, Instrumente → Avansat → Instrumente de dezvoltatori.

Întotdeauna avertizează că Dragonfly se află în stadiul Alpha2, ceea ce explică multe dintre glitchele sale.

Caracteristicile listei:

Dom inspector;
O inspecție prin clic (din nou, nu vom vedea linii ca în Firefox);
Editare;
Acces rapid la consola de eroare.

DF - ceva de genul unei pagini separate în freme. Dacă l-ați deschis, acesta va fi deschis tuturor filelor (spre deosebire de FireBug'a). Prin urmare, înainte de a inspecta elementul, trebuie să selectați pagina din lista pe care vrem să o vizualizăm.

Din păcate, aici, ca în bara de instrumente Internet Explorer Dav, elementele create dinamic nu sunt afișate. Și, în general, când inspectăm pagina, nu începe JavaScript: legăturile și butoanele nu sunt apăsate. Să sperăm când Dragonfly este potrivit pentru lansare, vom vedea toate aceste oportunități.

Debug Inspector web în Safari

Îți spun asta despre browser Safari. Informațiile fluierate, astfel încât pentru adecvarea materialului, așa cum se spune, nu răspund.

Pentru a activa în meniul Safari, elementul "Dezvoltare" este necesar în setările (fila Advanced) din elementul corespunzător:

În meniul "Dezvoltare", sunt disponibile următoarele funcții:

Să luăm în considerare detaliile inspectorului web:

În mod implicit, inspectorul se deschide în modul de vizualizare HTML. Dar poate fi comutat la modul de vizualizare DOM. Pentru a face acest lucru, există un comutator pe partea de sus a erupției cutanate. Când vă deplasați peste un element al inspectorului, acesta va fi evidențiat pe pagina însăși. Pentru a vedea liniuțele, schimbați marcajul sau CSS în zbor sau vedeți schimbarea dinamică a cupolă în zbor, ca și în Firebug, este imposibil. Dar veți fi de acord, pare foarte drăguț.

Dacă există dorința de a lucra cu un inspector în fereastra browserului, puteți face clic pe butonul din colțul din stânga jos.

Chiar și în Safari, o astfel de funcție ca "scară de rețea" este disponibilă (butonul de rețea în inspector):

Puteți vedea clar când și cât timp sunt încărcate fișierele. De asemenea, puteți vizualiza anteturile de solicitare, dar conținutul însuși pentru a vedea, din păcate, nu poate fi vizualizat.

Debug pentru dezvoltatori din Google Chrome

Chrome a apărut pe lumina în formă avansată și el a lăsat imediat să fie curbe, dar fonduri pentru dezvoltatori.

Dom inspector;
JavaScript Debugger;
Consola JavaScript.

Pentru a inspecta orice element, trebuie să faceți clic dreapta pe acesta și să selectați "Vizualizați codul elementului" din meniul contextual:

Funcționalitatea este aceeași ca în Safari: elementele sunt tipuite prin hovering, dar editarea CSS și HTML nu sunt disponibile, modificările în DOM nu sunt urmărite. Acesta este doar, butonul din colțul din stânga jos, care ar trebui să atașeze inspectorul la fereastra browserului nu funcționează.

În fila "Resurse", putem vedea următoarele:

Moto diferă de scara din Safaris. Translucid pe această schemă este o dimensiune relativă a fișierului și o culoare completă - Timp de descărcare. Într-un fel sau altul, este evident că această parte a cromului nu este încă finalizată.

În acest articol, am revizuit cele mai cunoscute extensii și instrumente încorporate pentru browsere.

Există alții, de exemplu:

Internet Explorer Web Development Helper - un asistent bun pentru dezvoltatorii ASP.NET (Internet Explorer);
Web Developer Toolbar - Tulbar pentru Internet Explorer și Firefox. Există mai multe caracteristici utile;
Bara de instrumente pentru accesibilitate pe web - Tulbar pentru Internet Explorer. Nimic interesant.

Dacă există adăugări pe care nu le-am menționat, dar ar merita, sau există funcții de la extensiile menționate, pe care mi-am pierdut-o, scrie.

Utilizați sănătatea!

Scrieți HTML - mare, dar cum să înțelegeți unde eroarea atunci când ceva nu funcționează? Acest articol descrie mai multe instrumente care ajută la căutarea și corectarea erorilor în HTML.

Debugingul nu este înfricoșător

În timp ce scrieți un cod, de obicei totul merge bine până când apare momentul când faceți o greșeală. Deci codul dvs. nu funcționează sau nu funcționează așa cum credeți. Dacă încercați să compilați programul non-de lucru în limba rugină, compilatorul va indica o eroare:

În acest caz, mesajul de eroare este de a înțelege relativ simplu - "String dublu dublu unterminat". Dacă vă uitați cu atenție la Println! (Bună ziua, Lumea! ");, Apoi observați că nu există dublu Quotion aici. Desigur, mesajele de eroare pot deveni mult mai complexe pentru înțelegere, așa cum crește codul dvs. și chiar cele mai simple cazuri pot Pare înfricoșătoare pentru cei care nu știu nimic despre rugină.

Dar nu vă fie frică de depanare! Pentru a scrie confortabil și depanați orice cod, trebuie să înțelegeți limba și instrumentele sale.

HTML și depanarea

HTML nu este la fel de pliat pentru a înțelege cum să rugați. HTML nu este compilat în nicio altă formă înainte ca browserul să analizeze acest lucru și să arate rezultatul (este interpretat și nu compilat). Sintaxa elementelor HTML este mult mai clară decât cea a limbajelor de programare reale, cum ar fi rugina, JavaScript sau Python. Metoda la care browserele citesc mai mult HTML toleranțadecât în \u200b\u200blimbile de programare care interpretează codul lor este mai strictă. Este în același timp rău și bine.

Cod de toleranță

Deci, ce înseamnă toleranți? În termeni generali, când ați fost injectat în cod, există două tipuri de erori cu care vă veți întâlni:

Erori de sintaxă (erori de sintaxă): Acestea sunt greșeli în corectitudinea scrisului, așa cum era mai mare, în exemplul cu rugina. Acesta este, de obicei, ușor de corectat, în măsura în care știți cât de familiarizați cu sintaxa limbii și cunoașteți ce înseamnă mesaje de eroare.
Erori logice (erori logice): Acestea sunt erori care apar în cazul în care sintaxa este corectă, dar codul nu își îndeplinește scopul, adică programul este incorect. O astfel de corecție este mai complicată decât sintactică, deoarece mesajele indică locul în care vă înșelați.

HTML nu suferă de erori de sintaxă, deoarece browserul citește codul tolerant, în sensul că paginile pot fi afișate chiar dacă sunt prezente erorile de sintaxă. Browserele au reguli încorporate pentru interpretarea marcajului incorect scris și puteți rula ceva, chiar dacă ați vrut să spuneți altul. Aceasta poate fi o problemă reală!

Pe o notă: HTML citește tolerant, deoarece atunci când Webul a apărut numai, sa decis să permită oamenilor să publice conținut chiar dacă este incorectă în cod, deoarece este mult mai importantă decât încrederea în sintaxa absolut corectă. Web nu ar fi atât de popular acum, dacă ar fi fost tratați cu strictețe.

Învățarea activă: Familiarizarea cu codul tolerant

Este timpul să studiem natura codului tolerant în HTML.

Validarea HTML.

Din exemplul de mai sus este clar că merită verificarea valabilității HTML. Într-un exemplu simplu de mai sus, puteți vedea pur și simplu toate codurile și găsiți erori, dar ce zici de pagini imense, complexe?

Cel mai bine este să verificați pagina din marcajul de validare. A fost creat și susținut de W3C - o organizație care este implicată în HTML, specificații CSS și alte tehnologii Web. Serviciul va verifica HTML-ul dvs. și va efectua un raport despre erorile din acesta.

HTML poate fi verificată la adresa descărcând fișierul sau pur și simplu răzuirea paginii.

Învățare activă: Validarea documentului HTML

Deschideți serviciul de validare a marcajului în browser.
Mergeți la validare prin modul de intrare directă.
Copiați întregul cod al documentului (nu doar corpul) și introduceți în loc pentru a intra.
presa Verificați (verificați).

Veți vedea o listă de erori și alte informații.

Lucrul cu mesaje de eroare

Este de obicei clar clar ce înseamnă mesajele, dar uneori trebuie să încercați să înțelegeți ce se întâmplă. Acum vom trece prin toate greșelile și vom întreba ce înseamnă ei. Rețineți că mesajele indică linia și coloana cod astfel încât erorile să fie mai ușor de căutat.

"Eticheta de capăt Li implicită, dar au existat elemente deschise" (2 cazuri): Nu există o etichetă clară de închidere, deși browserul ghicește unde ar trebui să fie. Mesajul indică un șir după cel pe care a fost așteptat eticheta de închidere, dar veți găsi locul potrivit.
"Element neclintit puternic": Aceasta este o eroare foarte simplă - elementul) indică faptul că conținutul său este de mare importanță, seriozitate sau urgență. Browserele afișează de obicei conținutul lui Bold. "\u003e Nu este închis, iar mesajul indică direct la eticheta de deschidere.
"Tag-ul final puternic încalcă regulile de cuibărit": elementul este investit incorect - la acest nivel nu există nici o pereche de etichetă de deschidere.
"Sfârșitul fișierului atins când se află într-o valoare a atributului. Ignorarea etichetei": Mesaj misterios. Faptul este că undeva (cel mai probabil, la sfârșitul documentului) a scris incorect proprietatea elementului, iar sfârșitul dosarului se afla în interiorul acestei proprietăți. Browserul nu vede legăturile - cel mai probabil problema de lângă ea.
"Sfârșitul fișierului văzut și au fost elemente deschise": Fișierul sa terminat, dar unele elemente nu sunt închise. Mesajul indică sfârșitul fișierului, în acest caz elementul de exemplu nu este închis: link-ul la pagina de pornire Mozilla ↩

↩ ↩

Destul de des, utilizatorii pot observa situația când apare eroarea de script în browser (adică). Dacă situația face parte dintr-un singur caracter, atunci nu este îngrijorat, dar când astfel de greșeli devin regulate, atunci merită să ne gândim la natura acestei probleme.

Scriptul de eroare din Internet Explorer este de obicei numit procesarea incorect a browserului de cod HTML, prezența fișierelor temporare de internet, parametrii de cont, precum și multe alte motive despre care vor fi discutate în acest material. Se vor lua în considerare și metode de rezolvare a acestei probleme.

Înainte de a continua cu metode general acceptate pentru diagnosticarea problemelor cu Internet Explorer, care provoacă erori de scenariu, trebuie să vă asigurați că eroarea apare nu numai pe un anumit site și imediat pe mai multe pagini web. De asemenea, trebuie să verificați pagina web pe care a apărut această problemă sub un alt cont, pe un alt browser și pe un alt computer. Acest lucru va determina gama de căutare a cauzelor erorii și va elimina sau confirma ipoteza că mesajele apar ca o consecință a prezenței unor fișiere sau setări de pe PC

Blocarea scripturilor active Internet Explorer, ActiveX și Java

Scenariile active, elementele ActiveX și Java afectează metoda de formare și afișare a informațiilor pe site și pot fi un motiv real pentru problema descrisă anterior dacă sunt blocate pe PC-ul utilizatorului. Pentru a vă asigura că erorile de script apar din acest motiv, este necesar să resetați pur și simplu setările de securitate a browserului. Pentru a implementa acest lucru, urmați recomandările.

Deschide Internet Explorer 11
Serviciu

În fereastră, mergeți la fila Siguranță
Apoi apăsați butonul Mod implicitși apoi butonul O.K

Fișierele temporare de Internet Explorer

De fiecare dată când deschideți o pagină web, Internet Explorer păstrează o copie locală a acestei pagini online la PC în așa-numitele fișiere temporare. Atunci când astfel de fișiere devine prea mult și dimensiunea folderului care le conține mai multe gigaocteți, pot apărea probleme cu afișarea unei pagini web, și anume, apare un mesaj despre eroarea de script. Dosarul de curățare obișnuit cu fișiere temporare poate ajuta la eliminarea acestei probleme.
Pentru a șterge fișierele temporare de Internet, urmați următoarea secvență de acțiuni.

Deschide Internet Explorer 11
Serviciu
În fereastră, mergeți la fila General
În capitolul. Browser Magazine. apasa butonul Elimina ...

La fereastră Îndepărtarea istoriei revizuirii Verificați steagurile de lângă paragrafe Internet temporar și site web, Cookie-uri și date de site-uri web, Revistă
apasa butonul Șterge

Lucrări de software anti-virus

Erori de script sunt posibile prin funcționarea programului antivirus atunci când blochează scenarii active, elemente ActiveX și Java pe o pagină sau un dosar pentru a salva fișierele temporare ale browserului. În acest caz, trebuie să vă îndreptați la documentația pentru produsul antivirus instalat și să dezactivați scanarea folderului pentru a economisi fișiere de internet în timp, precum și blocarea obiectelor interactive.

Procesarea codului paginii HTML incorecte

Ne manifestă, de regulă, pe unul dintre locurile particulare și indică faptul că codul paginii nu este complet adaptat la locul de muncă cu Internet Explorer. În acest caz, este mai bine să dezactivați depanarea scripturilor în browser. Pentru a face acest lucru, urmați acești pași.

Deschide Internet Explorer 11
În colțul superior al browserului (dreapta), faceți clic pe pictograma Serviciu Sub formă de unelte (sau o combinație a tastelor Alt + X). Apoi, în meniul deschis, selectați element.
În fereastră, mergeți la fila În plus
Apoi, debifați caseta de selectare din punct Afișați notificarea despre fiecare eroare de script și faceți clic pe O.K.

Această listă a celor mai frecvente motive care cauzează erori de script în Internet Explorer, deci dacă sunteți obosit de astfel de mesaje, acordați o atenție ușoare și rezolvați problema o dată pentru totdeauna.

În prezent, există un număr mare de browsere diferite, la un grad sau la altul, care sprijină standardele HTML existente. Personal, prefer browserul de la Mozilla Corporation. Acest browser are o istorie lungă (este scrisă pe baza faimosului browser Navigator Netscape). De asemenea, îmi place și acest browser prin faptul că acceptă sistemul de adăugiri separat separat, atunci când puteți să schimbați funcționalitatea și să vă configurați nevoile. Și în cele din urmă, acest browser este distribuit în mod liber cu coduri open source, care este, de asemenea, important. Prin urmare, am decis să descriu oportunitățile pe care acest browser le oferă nu numai utilizatorului, ci și dezvoltator de pagini web, cât de ușor și convenabil este procesul de depanare a produselor scrise.

Mozilla Firefox este unul dintre cei mai populari dezvoltatori și browsere de web dezvoltatori. Își atrage atenția datorită capabilităților pe care acest browser le oferă proiecte create, corectarea erorilor, îmbunătățiri. Livrarea standard a browserului include consola Java (sau "Consola de eroare"). Acest utilitar vă permite să reparați scripturile Java-script încorporate. Dar, o funcționalitate mult mai mare a browserului oferă plugin-uri terțe care pot fi descărcate și instalate de pe site-ul oficial al Fundației Mozilla. Acum vreau să iau în considerare două dintre aceste pluginuri - acesta este dezvoltatorul web și Firebug. Ambele adăugări pot fi descărcate în conformitate cu legăturile de mai sus de la site-ul oficial al add-on. După browserul de instalare și de repornire, dezvoltatorul oferă oportunități ample pe care le voi descrie mai jos, la rândul său pentru fiecare plugin-uri.

Pluginul Firebug.

După cum se menționează pe pagina oficială: "Firebug se integrează cu browser-ul Firefox pentru a îmbogăți foarte mult setul de instrumente al dezvoltatorului. Puteți edita, depana și explora CSS, HTML și JavaScript "Live", pe orice pagină web. " Și într-adevăr este. Luați în considerare unele dintre funcțiile acestui plugin, și anume:

Vizualizați și editați HTML.
Construi css.
Monitorizarea interogărilor de rețea
Depanarea JavaScript.
Studiul JavaScript.
Conectare pentru JavaScript

Aceasta nu este o listă completă a tuturor capacităților sale. Deci, proiectul este deschis (OpenSource), atunci oricine poate schimba și completa funcționalitatea.

Pentru a lucra cu pluginul, trebuie să apăsați tasta F12 (Ctrl-F12 pentru a lucra cu acesta într-o fereastră separată). După lansarea cu succes, obținem următoarele - Figura 1A, 1b.

Figura 1a. Fereastra inițială a pluginului Firebug.

Figura 1b. Fereastra inițială a pluginului Firebug.

Apoi, începe lucrarea reală cu pluginul. De exemplu, trebuie să găsim un obiect particular în codul HTML sau să determinăm exact fragmentul curent este implementat utilizând CSS. Pentru a face acest lucru, trebuie doar să selectați opțiunile necesare în meniul ferestrei pluginului. Exemplul de mai jos este HTML în modul Inspect. Acum, mergând la pagina de document, sub cursorul mouse-ului, vom observa zona dreptunghiulară care ilustrează complotul aici cu care lucrează în desfășurare. În fereastra plug-in, vom vedea acei parametri HTML și CSS care sunt utilizați. De asemenea, făcând clic pe fiecare dintre ele, puteți face schimbări și să le urmăriți în dinamică. Acțiunile descrise sunt ilustrate în figurile 2,3,4.

Dezvoltarea acestui proiect descrisă mai sus a pluginului a fost utilizată în aceste scopuri. Cu toate acestea, deși scriptul Java nu a fost folosit aici, pluginul Firebug poate fi, de asemenea, utilizat pentru a-l depana. Un exemplu de depanare este prezentat în Figura 5.

În acest sens, așa cum este descris mai sus, funcționalitatea acestei expansiuni nu este limitată. Puteți să o studiați complet și să utilizați în nevoile dvs. descărcând următoarele linkuri prin instalarea Mozilla Firefox.

Web Developer Plugin.

Dezvoltatorul web este a doua extindere a browserului Mozilla Firefox, foarte puternic și funcțional, care vă permite să produceți depanarea rapidă și eficientă. După instalarea acesteia, în fereastra browserului apare un panou suplimentar cu unelte, prezentat în Figura 6.

Lucrați suplimentar cu pluginul intuitiv de înțeles. De exemplu, dacă trebuie să efectuăm lucrări cu CSS (deși nu la fel de complet funcțional, ca și în cazul unui plugin Firebug), puteți face clic pe meniul CSS și blocați, porniți sau dezactivați.

Foarte convenabil pentru dezvoltator este călcatul de a vedea cum va arăta proiectul său pe monitoare, cu o rezoluție diferită. Pentru a face acest lucru, utilizați fila Redimensionare. Aici puteți seta manual rezoluțiile necesare (800x600, 1024x768, etc.), apoi comutați liber între ele, contactați sau ștergeți conținutul. Această funcționalitate este descrisă în Figura 7.

Această extindere are, de asemenea, o funcționalitate bogată, care sunt descrise și disponibile pe site-uri oficiale.

Lista surselor utilizate

1. www.getfirebug.com.
Site-ul oficial.
2. http://addons.mozilla.org.
Site-ul oficial al Mozilla, care plasează pluginurile pentru browserul Firefox, informații pentru dezvoltatori, informații despre utilizarea pluginurilor.
3. http://chrispederick.com/work/web-developer/
Site-ul oficial Developer WebDeveloper Plugin.

Există multe articole despre Habré, descriind aspecte interesante și complexe ale dezvoltării web, dar există mulți cititori care, fiind la începutul carierei dezvoltatorului de web, ar dori să vadă materialul care ar permite primul pas de la "PHP pentru 24 ore "la dezvoltare la un nivel grav și aș dori să împărtășesc experiența mea în această chestiune.

Particularitățile aplicației web o fac împărțită în două părți: client și server. Partea clientului funcționează pe JavaScript (poate undeva poate fi găsită și vbscript, dar probabil că nu vom lua în considerare acest caz), pe server, există multe lucruri, în principiu, dar ne vom uita la PHP, cea mai populară limbă pentru server parte a aplicațiilor web. De asemenea, ar fi interesant să vorbim despre depanarea și profilarea aplicațiilor flash pe partea clientului, dar subiectul afectat și atât de extins, astfel încât să îl lăsăm.

De asemenea, puteți atribui sarcinilor de depanare a analiza codului client și validarea codului HTML. Se pare că este o sarcină care nu este din câmpul de programare, ci și importantă.

Unele părți ale sarcinilor considerate au fost deja luate în considerare în alte articole și am oferit legături pe ele.

Depanarea și profilarea codului clientului

Metoda "clasică" de depanare a codului pe JavaScript este utilizarea funcției de alertă și a derivaților săi. Îmi amintesc, la începutul carierei mele, am scris personal o funcție Print_R pentru JavaScript, deoarece nu am văzut oportunitățile de ieșire a informațiilor de depanare pe arie și obiecte. Arăta astfel:
FUNCTION PRINT_R (variabila) (variabilă instantabilă || obiecte de instanță variabilă) (tasta Var, pentru (cheie în variabila) (cheie + "\u003d\u003e" + variabilă);) altceva (alertă (variabilă);))

Despre orice discurs de profilare, desigur, nu a fost efectuat deloc.

Cu această abordare, chiar și informații despre obiectul consolei produc o revoluție.

Specificul părții clientului aplicației web necesită depanarea codului în toate browserele populare. Desigur, cel mai adesea suficient și depanarea în Internet Explorer "E și orice alt browser normal, dar vom analiza toate opțiunile.

Mozilla Firefox.

Probabil, este Firefox care poate fi numit un pionier al depanării codului clientului. De mult timp, a fost subliniat ca un browser cel mai potrivit pentru dezvoltare și toate datorită extinderii Firebug, care este probabil toate posibilitățile necesare, pe lângă validarea codului HTML.

De asemenea, începând cu versiunea 4, a apărut o consolă web încorporată, care implementează o parte din fila "consola" și "rețeaua" Firebug "A, precum și unele posibilități de depanare CSS.

Pornind de la versiunea 6, a apărut un simplu editor JavaScript, care implementează, de asemenea, una dintre funcțiile Firebug "A și vă permite să scrieți și să executați codul direct în browser.

Pornind de la versiunea 10, a apărut un inspector de pagini, care vă permite să studiați codul HTML și proprietățile CSS, care este, implementează funcțiile "HTML" Funcții.

Pentru validarea codului HTML de regulă, extensia validatorului HTML este responsabilă. Doar pictograma sa, indicând numărul de erori pe pagina principală a site-ului Habrahbr.ru, poate fi văzută în colțul din dreapta jos al browserului din imagine cu inspectorul paginii.

De asemenea, profitând de șansa, voi indica faptul că acest browser are multe extensii care fac mai ușor de făcut viața, care pe Habré a fost deja adecvată.

Google Chrome și Safari

Aceste browsere bazate pe WebKit au un instrument de dezvoltare a inspectorului web încorporat, care este foarte bine dezvoltat și implementează aproape aceleași caracteristici ca Firebug. În același timp, trebuie să-i dăm datorită, el nu încetinește lucrarea browserului, care se găsește pentru "fratele mai mare".

În Chrome, se poate numi prin apăsarea tastelor Ctrl + Shift + I sau pur și simplu de F12. În Safari, este bine ascuns și de ao folosi, trebuie să activați capabilitățile de dezvoltare în setările browserului. Ulterior, instrumentele de dezvoltator vor fi disponibile din elementul "Dezvoltare" din meniul principal sau prin combinația tastelor Ctrl + Alt + I.

Pentru a valida codul HTML, trebuie, de asemenea, să instalați o expansiune terță parte. De exemplu, pentru crom, poate fi valabilitate. Pentru Safari, nu a fost încă posibil să alegeți nimic potrivit.

Operă.

Opera are, de asemenea, un instrument încorporat pentru dezvoltatori, numit "Dragonfly Opera" și poate fi numit în orice moment pe combinația dintre tastele Ctrl + Shift + I. Se pare că Webkit și are caracteristici și profesioniști similare, deși, la personalul meu, există o privire mai puțin convenabilă.

Depanarea și profilul serverului de profilare

Xdebug.

După cum am convenit la început, considerăm cazul în care PHP este utilizat pe server. Aici metoda "clasică" de depanare este ECHO, Print_R și Var_dump, dar există, de asemenea, un dispozitiv pentru depanare, ca în cele mai bune case - Xdebug. Pentru mine personal, din cauza specificului învățării la Institut, a arătat "drept în Delphi".

Extensia XDebug permite cel puțin să conducă codul peste etape și să vizualizeze valorile variabilelor, ceea ce ridică programarea pe PHP la un nou nivel. Despre complicațiile de lucru cu XDebug a fost adecvat. Xdebug este de obicei disponibil în depozitele GNU / Linux, nu este prea dificil să îl instalați în Windows, copierea fișierului DLL.

Când utilizați această extensie, o conexiune de intrare ajunge de pe server la computerul dezvoltatorului (în mod implicit la PORT 9000), pe care ar trebui să îl proceseze. Pentru a face acest lucru, trebuie să vă configurați ideea în consecință.

Apropo, utilizarea IDE este, de asemenea, o condiție indispensabilă pentru înainte. Unii programatori consideră că diferența dintre programarea într-o lumină de fundal a codului și IDE poate fi văzută numai pe proiecte mari, dar personal am aderat la opinia că diferența este vizibilă chiar și pe programul "Bună ziua!" - În valoare de o autoformare a numelor și argumentelor funcțiilor standard.

Xhprof.

La expansiune

Da, Xdebug oferă oportunități de profilare, dar dezvoltarea Facebook "și în aceste scopuri, Xhprof, eu personal le place. Eu, de spus sincer, nu a cheltuit nici un test, dar se crede că această extindere este mult mai potrivită pentru producție Servere și pentru profilare cu încărcături reale.

Instalare

Din păcate, această extensie nu este inclusă în niciun depozit. Intră în PELC, dar din anumite motive instalarea este adesea ridicată de această problemă. Din acest motiv, este necesar să se instaleze din sursă.

# Obțineți codul sursă Wget http://pel.php.net/get/xhprof-0.9.2.tgz # Despachetați codul sursă Tar -XVF XHPROF-0.9.2.Tgz # Accesați directorul în care CD XHPROF- 0,9 Codul de prelungire este conținut. 2 / Extensie / # Suntem compilații și test phpize ./configurare face testul # avem dețin instalarea de verificare civilizată
Fișierul de configurare XHPROF.INI ne oferă aproximativ astfel de caracteristici:

Extensie \u003d / USR / LOCAL / LIB / PHP / Extensii / NO-DEBUG-NON-ZTS-20090626 / XHPROF.SO
; Catalog pentru busteni
xhprof.output_dir \u003d "/ var / log / xhprof /"

Profil

Directorul pe care îl obținem prin conectarea arhivei conține în plus față de sursele de expansiune, precum și interfața web pentru a studia rezultatele profilului și a bibliotecii pentru profilarea unei aplicații.

Dăm un exemplu de profilare. Codul de aplicare trebuie să includă următoarele elemente:
// începerea scriptului, activați profilarea // Încărcarea pe procesor și pe memoria XHPROF_ABLEBLE (XHPROF_FLAGS_CPU + XHPROF_FLAGS_Memory); / * * Codul principal al aplicației * // Sfârșitul scriptului, profilul complet, // Scrieți rezultatul în $ xhprofdata \u003d xhprof_dizable (); include_once xhprof_dir. "/ xhprof_lib / utils / xhprof_lib.php"; include_once xhprof_dir. "/ xhprof_lib / utils / xhprof_runss.php"; $ xhprofruns \u003d nou xhprofruns_default (); $ Namespace \u003d "unele-unice-nume"; $ Runid \u003d $ xhprofruns-\u003e SAVE_Run ($ xhprofdata, $ space); Echo "\\ n ";
Aici se îndreaptă constantă XHPROF_DIR spre catalogul unde ne-am despachetat arhiva descărcată.

Pentru a analiza rezultatele, aveți nevoie de aceeași interfață web. Acesta poate fi luat în directorul $ XHPROF_DIR / XHPROF_HTML - în mod convențional denotă acest lucru. De exemplu, am plasat-o într-un loc de server Web accesibil și este disponibil la exterior.com/system/xhProf/, apoi pentru a analiza rezultatul muncii, trebuie să-l contactăm după cum urmează:

Example.com/system/xhprof/?run\u003d%runid%&source\u003d%namespace%

Vom obține un rezultat similar:

Profilarea poate fi inclusă în Codul de aplicare pe o bază continuă sau, de exemplu, pentru a începe să înceapă aleatoriu cu o anumită probabilitate sau de prezența unei anumite condiții. De exemplu, deci:

$ NeedProfiler \u003d (mt_rand (0, 100)< 10 or isset($_COOKIE["xhprof"])); if ($needProfiler) xhprof_enable(XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY);
În acest caz, este posibil, având plângeri de la clienți sau suspiciuni, consultați rezultatele profilului pentru un anumit interval de timp. Folosind parametrul NameSpace, puteți determina ce parte a aplicației (care script, controler, acțiune) a fost profilată.

Profilarea solicitărilor SQL

De regulă, lucrează cu o bază de date care este un blocaj în aplicație. Din acest motiv, se recomandă desfășurarea de profilare a cererilor. De exemplu, luați în considerare o parte a clasei, care este înfășurată în jurul funcțiilor extinderii MySQL. Da, știu că această expansiune nu este foarte iubită și îi dorea cu moartea nu mai puțin decât vechiul IE6. Nu-l cer să folosească, doar această clasă este la îndemână.

. $ query \u003d "") ($ start \u003d microtime (adevărat); // efectuarea unei cereri, inclusiv "protecție" a parametrilor $ stop \u003d microtime (adevărat); $ timp \u003d $ stop - $ start; $ acest - acest -\u003e _ AddProfilerdata ($ sql, €); // returnare retur) Funcție privată _Addprofilerdata ($ interogare, $ timp) (dacă (este_array (de sine :: $ profiledata)) (Selin :: $ profiledata \u003d Array ("Query" \u003d\u003e $ Interogare, "Time" \u003d\u003e $ timp);)) Funcția publică __Destruct () (dacă este_array (sine: $ profiledata)) ($ acest -\u003e _ writeprofilerdata (); sine :: $ profiledata \u003d false;) // Deconectarea din baza de date) Funcția privată _WRITEPROFilerdata () ($ valori \u003d matrice (Selin :: $ profilerdata ca $ rând) ($ query \u003d mysql_real_escape_string ($ rând ["Query"], $ acest- con); $ timp \u003d (float) $ rând ["timp"]; $ hash \u003d CRC32 ($ rând ["query"]); $ valori \u003d "($ hash," $ query ", $ timp)" ; ) dacă (valori $) ($ strwes \u003d implode (",", $ valori); $ Sql \u200b\u200b\u003d "inserție întârziată în" profiler_queries` (`` `` `` work_time`) Valorile $ stromanues "; @Mysql_Query ($ sql, $ this-\u003e con); ))
Aici, datele de profilare sunt stocate în tabelul Profil_queries. Acest tabel poate avea un tip de miisam sau arhivă, deoarece acestea oferă posibilitatea de a face inserții amânate, care nu creează o întârziere excesivă de răspuns în timpul profilului. De asemenea, pentru a căuta mai bine solicitările din tabel, tabelul este mai bine să creați o coloană de tip INT unde interogarea CRC32-hash va fi scrisă pentru a crea un index.

Concluzie

Articolul sa dovedit destul de mare. Poate că aici am mers de-a lungul vârfurilor și am atins temele care au fost deja atinse, dar dacă aș citi ceva de genul acesta - un articol în care toate informațiile au fost colectate împreună și au dat legături utile, mi-ar ajuta ajutor neprețuit. Sper că articolul meu va ajuta pe cineva pe drumul spre iluminare.