Erori de pe paginile web și cum să le găsiți și să le remediați. Cum să remediați o eroare de script în Internet Explorer utilizând consola pentru a detecta erori de sintaxă și alte erori de cod

Destul de des, utilizatorii pot observa o situație în care apare un mesaj de eroare de script în browser-ul Internet Explorer (IE). Dacă situația este izolată, atunci nu ar trebui să vă faceți griji, dar atunci când astfel de erori devin regulate, atunci ar trebui să vă gândiți la natura acestei probleme.

Eroarea de script în Internet Explorer este de obicei cauzată de procesarea incorectă a codului paginii HTML de către browser, prezența fișierelor temporare de Internet, setările contului și multe alte motive, care vor fi discutate în acest material. Se vor lua în considerare și metodele de rezolvare a acestei probleme.

Înainte de a continua cu metodele obișnuite de diagnosticare a problemelor cu Internet Explorer care cauzează erori de script, trebuie să vă asigurați că eroarea apare nu numai pe un anumit site, ci pe mai multe pagini web simultan. De asemenea, trebuie să verificați pagina web care se confruntă cu această problemă cu un alt cont, pe un alt browser și pe un alt computer. Acest lucru va restrânge căutarea cauzei erorii și va exclude sau confirma ipoteza că mesajele apar ca urmare a prezenței anumitor fișiere sau setări pe computer.

Blocarea scripturilor active din Internet Explorer, ActiveX și Java

Scripturile active, controalele ActiveX și Java afectează modul în care informațiile sunt generate și afișate pe site și pot fi cauza reală a problemei descrise anterior dacă sunt blocate pe computerul utilizatorului. Pentru a vă asigura că apar erori de script din acest motiv, trebuie doar să resetați setările de securitate ale browserului. Pentru a face acest lucru, urmați următoarele instrucțiuni.

• Deschideți Internet Explorer 11
• Serviciu

• În fereastră, accesați fila Securitate
• Apoi faceți clic pe butonul Mod implicit iar apoi butonul Bine

Fișiere temporare Internet Explorer

De fiecare dată când deschideți o pagină web, Internet Explorer salvează o copie locală a acestei pagini web pe computer în așa-numitele fișiere temporare. Când există prea multe astfel de fișiere și dimensiunea folderului care le conține ajunge la câțiva gigaocteți, pot apărea probleme la afișarea paginii web și anume, va apărea un mesaj de eroare de script. Ștergerea în mod regulat a folderului cu fișiere temporare poate ajuta la rezolvarea acestei probleme.
Pentru a șterge fișierele temporare de Internet, urmați pașii de mai jos.

• Deschideți Internet Explorer 11
• În colțul din dreapta sus al browserului, dați clic pe pictogramă Serviciu sub formă de roată (sau combinația de taste Alt + X). Apoi, în meniul care se deschide, selectați
• În fereastră, accesați fila General
• In sectiune Istoricul browserului apasa butonul Șterge…

• La fereastră Șterge istoricul de navigare bifați casetele de lângă articole Fișiere temporare ale internetului și site-urilor web, Cookie-uri și date ale site-ului web, Jurnal
• Faceți clic pe butonul Șterge

Operarea software-ului antivirus

Erorile de script sunt posibile prin funcționarea unui program antivirus atunci când blochează scripturile active, controalele ActiveX și Java pe o pagină sau folderele pentru a salva fișierele temporare ale browserului. În acest caz, ar trebui să consultați documentația pentru produsul antivirus instalat și să dezactivați scanarea folderelor pentru a salva fișiere temporare de Internet, precum și pentru a bloca obiectele interactive.

Procesarea incorectă a codului paginii HTML

Apare, de regulă, pe un anumit site și indică faptul că codul paginii nu este complet adaptat pentru a funcționa cu Internet Explorer. În acest caz, cel mai bine este să dezactivați depanarea scriptului în browser. Pentru a face acest lucru, urmați acești pași.

• Deschideți Internet Explorer 11
• În colțul din dreapta sus al browserului, dați clic pe pictogramă Serviciu sub formă de roată (sau combinația de taste Alt + X). Apoi, în meniul care se deschide, selectați
• În fereastră, accesați fila În plus
• Apoi, debifați caseta Afișați notificarea pentru fiecare eroare de scriptși apăsați butonul Bine.

Aceasta este o listă cu cele mai frecvente motive care provoacă erori de script în Internet Explorer, așa că dacă te-ai săturat de astfel de mesaje, acordă puțină atenție și rezolvă problema odată pentru totdeauna.

Uneori, browserul poate anunța utilizatorul că a apărut o eroare de script. Acest lucru este valabil și pentru Internet Explorer standard. În ea, apropo, o astfel de eșec apare mai des decât în ​​alte browsere. Ce poate cauza această problemă și cum să o rezolvi?

O eroare de script apare de obicei atunci când browserul nu poate procesa corect codurile paginilor HTML. De asemenea, un eșec de descărcare poate provoca o cantitate excesivă de fișiere temporare (mai ales dacă browserul nu a fost curățat de ele de mult timp). De asemenea, unele setări ale contului pot împiedica pornirea corectă a resursei. Astăzi vom analiza cum să eliminați eroarea de script în Internet Explorer, ținând cont de toate aceste motive.

Primii pasi

Dacă acest lucru s-a întâmplat pentru prima dată, poate fi un caz izolat. Prin urmare, nu este nimic de care să vă faceți griji. Încercați să reîncărcați pagina. Dacă apare din nou o notificare care vă întreabă dacă doriți să opriți rularea acestui script, faceți clic pe butonul „Nu”.

Am stabilit că acesta nu a fost un caz izolat. Ce sa fac in continuare? Vedeți dacă dă o eroare la deschiderea tuturor paginilor sau doar una. Dacă pe unul, atunci accesați alt cont de pe același site, deschideți pagina în alt browser și PC.

Puteți utiliza un browser diferit. Astăzi există o mulțime de ele, deși nu sunt în niciun fel inferioare unui instrument standard, chiar depășesc în multe lucruri. Dacă aveți toate marcajele salvate în IE, puteți utiliza funcția de export de date.

Blocarea activelor ActiveX și scripturilor Java

Te-ai hotărât să nu treci la 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 erorilor de scripting. Ce să faci în acest caz? Trebuie să resetați setările de securitate ale browserului.

Rulați programul. Faceți clic pe pictograma roată. Ea va fi lângă asterisc. În lista de opțiuni care apare, selectați secțiunea „Opțiuni Internet”. Acesta va fi penultimul punct.

Deschide a doua filă „Securitate”. Faceți clic pe butonul „Implicit”. Faceți clic pe OK.

Fișiere temporare în browser

Internet Explorer salvează versiunile paginilor când sunt lansate. Toate copiile sunt stocate într-un folder cu fișiere temporare. Acest folder trebuie curățat din când în când. Dacă folderul atinge, de exemplu, un volum de câțiva gigaocteți, browserul se va îngheța și va emite, în special, o eroare de script. În acest caz, trebuie să eliminați tot conținutul spațiului de stocare specificat.

Următoarea metodă vă va ajuta să scăpați de mesajele nedorite din memoria cache, istoricul de navigare, cookie-urile, datele formularelor web și parolele. Desigur, aveți dreptul de a alege ce fel de fișiere să ștergeți și pe care să păstrați.

• Din nou, faceți clic pe echipamentul care ne este deja familiar. Selectați „Opțiuni Internet”.
• Treceți la secțiunea „General”.
• În blocul „Istoric browser”, faceți clic cu încredere pe butonul „Șterge”.
• Bifați casetele pentru fișierele temporare și alte tipuri de fișiere de care doriți să scăpați, apoi confirmați ștergerea.

Blocare antivirus

Este posibil ca scripturile să nu ruleze deoarece software-ul dumneavoastră antivirus le blochează sau scanează foldere cu fișiere temporare. Ce trebuie sa facem? Deschideți fereastra antivirus și dezactivați blocarea elementelor interactive. Nu există o singură instrucțiune de dezactivare pentru toate antivirusurile. Procedura va diferi în funcție de tipul dumneavoastră de antivirus.

Procesarea incorectă a codului paginii HTML

Această situație apare de obicei când un singur site se blochează. Aceasta înseamnă că codul paginii nu este potrivit pentru Internet Explorer. Pentru ca pagina să se încarce, depanarea scriptului trebuie să fie dezactivată.

• Reveniți la fereastra „Opțiuni Internet”.
• De data aceasta, mergeți la al patrulea bloc „Adițional”.
• Debifați caseta „Afișați notificarea pentru fiecare eroare de script”. Salvați modificările.

Dacă utilizatorul a dezactivat depanarea scriptului, notificarea de eroare nu mai apare. Pagina se va îngheța oricum, așa că această metodă poate fi folosită doar dacă există probleme cu un singur site.

Descărcați actualizările disponibile

De asemenea, scriptul poate rula incorect din cauza faptului că lipsesc actualizările necesare pentru sistemul în sine și pentru Internet Explorer. Actualizarea poate rezolva complet problema.

Accesați Centrul de actualizare de pe computer și asigurați-vă că toate actualizările sunt instalate. Dacă nu, atunci rulați instalarea.

Utilizarea registrului de sistem

Eșecul poate apărea la pornirea Windows, adică la pornirea computerului. Acest lucru este departe de a fi un eșec grav, dar încă trebuie corectat. Registrul de sistem va prelua. Modalitatea de a remedia eroarea este mult mai complicată decât cele anterioare. Dacă sunteți nou, cereți unui utilizator mai informat să o facă pentru dvs.
1. Lansați fereastra „Run” și introduceți comanda regedit în linie.

2. Faceți clic pe blocul HKEY_LOCAL_MACHINE cu butonul din dreapta al mouse-ului și selectați „Permisiuni”.

3. În fereastra care apare mai jos, setați accesul complet și citirea.

4.Deschideți Opțiuni avansate. Faceți clic pe butonul „Modificați” și setați „Permite

5. Confirmăm salvarea setărilor. Facem clic pe OK.

6.Reporniți dispozitivul. Apelați linia de comandă. Atingerea finală este următoarea comandă: regsvr32 msxml.dll. Apăsați Enter pe tastatură.

Eroarea de script în Internet Explorer este rezolvată în mai multe moduri. Am prezentat atât cele simple, cât și cele complexe. Alegerea metodei depinde de cauză și, deoarece nu este atât de ușor de determinat, utilizați metodă după metodă.

Utilizarea instrumentelor pentru dezvoltatori F12 pentru a depana erorile JavaScript

Acest conținut trimite la o versiune mai veche a Instrumentelor pentru dezvoltatori F12. Descărcați cea mai recentă documentație F12.

Instrumentele F12 permit dezvoltatorilor să depaneze rapid codul JavaScript fără a părăsi browserul. Încorporate în fiecare instanță a Windows Internet Explorer 9, instrumentele pentru dezvoltatori F12 oferă instrumente de depanare, cum ar fi puncte de întrerupere, vizualizare de ceas și variabile locale, o consolă de mesaje și execuție imediată a codului.

Acest articol acoperă cum să utilizați instrumentele pentru dezvoltatori F12 pentru a depana codul JavaScript. Acest articol nu este menit să fie un tutorial exhaustiv de depanare, scopul său este de a evidenția instrumente care pot ajuta un dezvoltator să înceapă cu codul generat. În Internet Explorer 9, apăsați tasta F12 pentru a deschide Instrumente pentru dezvoltatori și faceți clic pe fila Scenariu pentru a incepe.

Pe fila Scenariuîn partea stângă este zona codului sursă, unde un dezvoltator își poate vizualiza codul JavaScript, poate seta puncte de întrerupere și poate parcurge funcțiile. În panoul din dreapta, puteți comuta între filele consolei, Variabile de urmărire, Variabile locale, Stack de urmărire și Puncte de întrerupere.

Pornirea și oprirea depanatorului

Când deschideți pentru prima dată instrumentele pentru dezvoltatori F12 și faceți clic pe filă Scenariu, codul tău apare în stânga și consola în dreapta. Este posibil să vedeți un mesaj în consolă: „Actualizați pagina pentru a vedea mesajele primite înainte de deschiderea instrumentului de dezvoltare F12.” Când reîmprospătați pagina web, consola va afișa orice erori și avertismente cauzate de browser.

Pentru a seta puncte de întrerupere, a vizualiza controlul și variabilele locale și pentru a vedea stiva de apeluri a unei secvențe de funcții, faceți clic pe Începeți depanarea. Apăsați butonul Începeți depanarea reîmprospătează pagina web și redă codul în depanator.

Utilizarea consolei pentru a găsi erori de sintaxă și alte erori de cod

În majoritatea proiectelor de programare, erorile sunt împărțite în erori sintactice, logice și de introducere a datelor. Vizualizarea consolă arată erori și excepții JavaScript, precum și excepții DOM. În codul dvs., puteți utiliza obiectul consolă pentru a trimite mesaje de eroare și starea programului către consolă în loc de apeluri la „alert()” sau spațiul de ecran disponibil. De exemplu, puteți adăuga linia

Window.console.log(„Fișierul a fost deschis cu succes”);

În codul JavaScript pentru a obține informații despre starea scriptului fără a întrerupe execuția acestuia. Informatii suplimentare: .

Remedierea aspectului scripturilor

Instrumentele pentru dezvoltatori F12 pot depana JavaScript la nivel de linie sau de instrucțiune, indiferent de modul în care este afișat codul. Puteți chiar să parcurgeți scripturile care sunt comprimate pentru a arăta ca un bloc mare de cod. Dar uneori este greu să urmăriți logica când codul este un bloc.

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

Întrerupeți execuția codului

Setarea punctelor de întrerupere în instrumentele pentru dezvoltatori F12 este similară cu setarea punctelor de întrerupere în depanatoarele de cod binar, cum ar fi Microsoft Visual Studio. În panoul din stânga, faceți clic în partea stângă a liniei de cod în care doriți să vă opriți. Punctele de întrerupere sunt comutabile, așa că un clic adaugă un punct de întrerupere, iar un al doilea clic îl elimină.

Puteți adăuga în codul dvs. câte puncte de întrerupere aveți nevoie. Puteți fie să faceți clic dreapta pe o linie de cod și să alegeți comanda Introduceți punctul de întrerupere, sau faceți clic în caseta din stânga de lângă instrucțiunea în care doriți să setați un punct de întrerupere.

Folosind instrumentele de creație F12, puteți seta un punct de întrerupere la nivel de instrucțiune, chiar dacă acele instrucțiuni sunt într-un bloc sau o linie de instrucțiuni multiple. Acest lucru vă permite să creați un punct de întrerupere într-un segment de cod comprimat. Cel mai bun mod de a seta un punct de întrerupere în aceste condiții este să faceți clic dreapta pe cod și să selectați Introduceți punctul de întrerupere. De asemenea, puteți utiliza formatarea scriptului descrisă mai devreme (imprimare frumoasă) prin formatarea liniilor pentru a le face mai ușor să faceți clic în margini.

Gestionați mai multe puncte de întrerupere folosind fila Puncte de întrerupere

Când utilizați o cantitate mare de cod cu un număr mare de puncte de întrerupere sau chiar constând din mai multe fișiere, puteți utiliza fila Puncte de întrerupere pentru a urmări toate punctele dorite. Pe fila Scenariu faceți clic pe fila Puncte de întrerupereîn panoul de proprietate sau din dreapta. Vedeți următoarea imagine pentru un exemplu:

Pe fila Puncte de întrerupere dezvoltatorul poate activa sau dezactiva, șterge, selecta și copia puncte de întrerupere fără a fi nevoit să navigheze la locațiile exacte ale punctelor de întrerupere dorite. Pentru a activa sau dezactiva un punct de întrerupere, bifați sau debifați caseta de selectare de lângă setarea pe care doriți să o modificați. De asemenea, puteți sări direct la un punct de întrerupere din codul dvs. făcând dublu clic pe el în listă. Puteți selecta mai multe puncte de întrerupere în același timp apăsând tasta CTRLși făcând clic pe punctele de întrerupere dorite.

Pe fila Puncte de întrerupere De asemenea, puteți utiliza meniul contextual (care se deschide cu un clic dreapta) pentru a elimina, activa, dezactiva sau copia grupuri de puncte de întrerupere. Acești parametri sunt prezentați în tabelul următor.

Articol din meniu	Acțiune
Șterge	Ștergerea unui punct de întrerupere fără posibilitatea de recuperare.
șterge totul	Ștergerea tuturor punctelor de întrerupere fără posibilitatea de recuperare.
Permite tuturor	Bifarea tuturor casetelor de selectare din listă.
Dezactivați toate	Debifați toate casetele de selectare din listă.
Condiție	Vă permite să setați un punct de întrerupere condiționat pentru un singur punct. Acest element nu este disponibil dacă sunt selectate mai multe puncte de întrerupere.
Copie	Copiază textul de descriere al punctelor de întrerupere selectate.
Selectează tot	Selectează toate punctele de întrerupere din listă.
Accesați codul sursă	Deplasați-vă în zona din stânga a codului pentru a afișa punctul de întrerupere selectat. Acest element nu este disponibil dacă sunt selectate mai multe puncte de întrerupere.

Puncte de întrerupere condiționate

Oprirea necondiționată pe o linie de cod este utilă, dar și mai puternică este oprirea atunci când o proprietate sau o variabilă atinge o anumită valoare. Pentru a opri atunci când o anumită valoare este atinsă sau setată, creați un punct de întrerupere și apoi deschideți fila Puncte de întrerupere. Faceți clic dreapta pe punctul de întrerupere dorit și selectați comanda Condiție.

În caseta de dialog condiții, adăugați instrucțiunea JavaScript corectă. Codul de execuție se va opri la acest punct de întrerupere când declarația este evaluată la adevărat. De exemplu, în imaginea următoare, execuția codului se oprește atunci când valoarea proprietății oAudio.paused devine falsă.

Puteți specifica o singură condiție sau puteți utiliza operatori logici pentru a crea o condiție de oprire mai complexă. Dar amintiți-vă că domeniul de aplicare al variabilelor și al obiectelor va rămâne același ca atunci când sunt afișate în fereastra de vizualizare a punctelor de întrerupere. Valoarea unei condiții în afara domeniului de aplicare nu va fi evaluată la adevărat.

Trecând prin cod

Când execuția codului se oprește la un punct de întrerupere, puteți folosi butoanele de salt pentru a continua execuția ( F5), întreruperi de execuție ( CTRL+SHIFT+B), intrare pas cu pas în funcție ( F11), funcția omite ( F10) sau ieșiți din funcție ( SHIFT+F11). Când execuția este oprită la un punct de întrerupere sau când treceți prin, fereastra de depanare devine de fapt modală.

Prin urmare, înainte de a continua să interacționați cu pagina web, trebuie să opriți depanarea ( SHIFT+F5) sau continuă execuția ( F5). Ar trebui să țineți cont de acest lucru dacă o pagină web pare să nu mai răspundă. Dacă, când sunt deschise mai multe ferestre, fereastra de depanare nu este în partea de sus, poate aștepta o reacție la punctul de întrerupere. În acest caz, pentru a prelua controlul asupra paginii web, localizați fereastra de depanare a paginii web și faceți clic F5 pentru a continua sau faceți clic SHIFT+F5 pentru a opri depanarea.

Vizualizarea variabilelor utilizând filele Watch și Local

Tab ceas vă permite să definiți și să vizualizați variabilele de urmărire în codul pe care îl depanați. Conține numele, valoarea și tipul variabilelor date. Puteți da clic pe linia marcată click pentru a adauga..., pe fila Valori de referintași introduceți un nume de variabilă. Dacă nu aveți chef să introduceți numele variabilei, îl puteți copia și lipi în lista de variabile de control.

Valorile din lista de variabile de ceas sunt afișate indiferent dacă codul este în prezent depanat sau nu. Când depanarea este activată și sunt setate urmărirea codului sau punctele de întrerupere, domeniul de aplicare al valorilor variabilelor din listă este determinat de punctul de execuție curent al scriptului. Dacă depanarea este dezactivată, domeniul de aplicare este global și vor fi afișate numai valorile variabilelor globale.

Spre deosebire de o filă Valori de referinta, ale căror valori sunt afișate indiferent dacă variabilele corespunzătoare sunt în domeniu, în filă Local sunt afișate doar variabilele din domeniul curent. Nu trebuie să adăugați variabile pentru a le vizualiza, deoarece atunci când schimbați domeniul de aplicare, această filă este actualizată pentru a afișa toate variabilele disponibile.

Pentru a vedea diferența, deschideți următorul exemplu în Internet Explorer 9 și urmați pașii dați.

Alerga

1. Descărcați exemplul în Internet Explorer 9.
2. apasa tasta F12 pentru a deschide instrumentele pentru dezvoltatori F12 și faceți clic pe fila Scenariu.
3. În panoul din stânga, derulați la prima funcție, faceți clic dreapta pe linia „var a = 5;” și selectați comanda Introduceți punctul de întrerupere.
4. Faceți clic pe butonul Începeți depanarea, apoi pe pagina web din browser, faceți clic pe butonul Alerga(A executa).
5. În F12 Developer Tools, faceți clic pe fila Valori de referintaîn partea dreaptă și adăugați variabilele „a, b, c și d.”.
6. Treceți prin cod apăsând tasta F11 sau butonul A interveniși vizualizați variabilele din filă Valori de referinta.

Când parcurgeți fiecare funcție, valorile de căutare ar trebui să se schimbe de la nedefinit la unele valori.

Pentru a simți diferențele față de filă Local, apăsați tasta F5 pentru a continua de la instrumentele de dezvoltare F12. Pe pagina web din browser, faceți clic pe butonul Alerga(Run) pentru a rula din nou codul și a reveni la instrumentele pentru dezvoltatori F12. În partea dreaptă a filei Scenariu faceți clic pe fila Localși apăsați tasta F11 pentru a parcurge din nou funcțiile. Rețineți că lista de variabile locale conține doar variabile care au valori. In vedere Local arată, de asemenea, argumentele transmise funcției, valoarea și tipul acestora.

Vedere stiva de apeluri

Tab stiva de apeluri vă permite să vizualizați calea parcursă atunci când apelați funcții din cod. Acest lucru vă poate ajuta să descoperiți o cale de cod neașteptată care a rezultat dintr-o eroare. Pe fila stiva de apeluri puteți face dublu clic pe orice funcție și puteți sări la apelul acesteia în codul sursă.

Încercați exemplul de mai sus și urmați fila stiva de apeluri când executarea codului pas cu pas cu funcții de introducere.

Pe fila stiva de apeluri funcția sau locația curentă este întotdeauna în partea de sus (indicată printr-o săgeată ca în fila stiva de apeluri, și în câmpurile codului). Făcând dublu clic pe oricare dintre funcțiile din listă, se evidențiază operatorul care apelează funcția.

Depanarea mai multor scenarii

Paginile web mari tind să utilizeze mai multe fișiere JavaScript. Instrumentele pentru dezvoltatori F12 vă permit să lucrați cu mai multe fișiere script, la fel ca atunci când vă depanați codul. Pentru a vizualiza un alt fișier, faceți clic pe săgeata în jos de lângă buton. Începeți depanarea pentru a lista scripturile asociate cu această pagină web. Când utilizați instrumentele de dezvoltare F12, codul va fi parcurs prin toate fișierele. Puteți adăuga variabile din orice fișier script pentru vizualizare, iar vizualizarea stivei de apeluri va afișa calea de execuție prin funcțiile conținute în diferitele fișiere script.

Modificarea setării modului document

Setarea modului document pe partea dreaptă a liniei Meniul este disponibilă în fiecare filă de instrumente pentru dezvoltatori F12, dar această setare este utilă în special atunci când se depanează codul din fila F12. Scenarii. Internet Explorer 9 vă permite să schimbați modul document pentru a emula standardele versiunilor anterioare ale Windows Internet Explorer. În Internet Explorer 9, ieșiți din anunțsetează tipul de document în modul de compatibilitate în mod implicit. Când aveți de-a face cu o nouă caracteristică sau un nou standard, cum ar fi în HTML5, unele erori pot arăta ca erori de programare, dar sunt cauzate de fapt de o declarație doctype lipsă sau incorectă.

Instrumentele pentru dezvoltatori F12 pentru Internet Explorer 9 nu vă pot remedia codul, dar facilitează găsirea erorilor JavaScript.

Există multe articole despre Habré care descriu aspecte interesante și complexe ale dezvoltării web, dar sunt mulți cititori care, la începutul carierei lor de dezvoltator web, ar dori să vadă material care să îți permită să faci primul pas de la „ PHP în 24 de ore” la dezvoltare la un nivel serios și aș dori să vă împărtășesc experiența mea în această chestiune.

Caracteristicile aplicației web o fac împărțită în două părți: client și server. Pe partea de client, codul JavaScript funcționează (poate că VBScript poate fi găsit pe undeva, dar probabil că nu vom lua în considerare acest caz), pe partea de server - o mulțime de lucruri, în principiu, dar vom lua în considerare PHP, cel mai popular limbaj pentru partea de server a aplicațiilor web. De asemenea, ar fi interesant să vorbim despre depanarea și profilarea aplicațiilor Flash din partea clientului, dar subiectul abordat este deja amplu, așa că să lăsăm deocamdată.

Analiza și validarea codului HTML pot fi, de asemenea, atribuite sarcinilor de depanare a codului client. Aceasta pare a fi o sarcină nu în întregime din domeniul programării, ci și importantă.

Unele părți din sarcinile luate în considerare au fost deja luate în considerare în alte articole și am furnizat link-uri către ele.

Depanare și profilare cod client

Modul „clasic” de a depana codul JavaScript este de a folosi funcția de alertă și derivatele acesteia. Îmi amintesc că la începutul carierei, am scris personal funcția print_r pentru JavaScript, deoarece nu vedeam posibilitatea de a afișa informații de depanare pe matrice și obiecte. Arăta cam așa:
funcția print_r(variabilă) ( if (variabilă instanceof Array || variabilă instanceof Object) ( cheie var; for (cheie în variabilă) alert(cheie + " => " + variabilă); ) else ( alertă (variabilă); ) )

Desigur, nu s-a vorbit deloc de profilare.

Cu această abordare, chiar și informațiile despre obiectul consolă sunt revoluționare.

Specificul părții client a unei aplicații web necesită depanarea codului în toate browserele populare. Desigur, cel mai adesea există suficientă depanare în Internet Explorer și orice alt browser normal, dar vom lua în considerare toate opțiunile.

Mozilla Firefox

Probabil, Firefox este cel care poate fi numit pionierul depanării codului client. Multă vreme, a fost listat ca browser de alegere pentru dezvoltare, datorită extensiei Firebug, care probabil conține tot ce aveți nevoie, cu excepția validării codului HTML.

De asemenea, începând cu versiunea 4, a apărut o Consolă Web încorporată, care implementează o parte din funcțiile filelor „Consola” și „Rețea” Firebug, precum și unele capacități de depanare CSS.

Începând cu versiunea 6 a apărut Editorul Simple JavaScript, care implementează și una dintre funcțiile Firebug și vă permite să scrieți și să executați cod direct în browser.

Începând cu versiunea 10, a apărut Page Inspector, care vă permite să studiați codul HTML și proprietățile CSS, adică implementează funcțiile filei HTML.

Extensia Html Validator este de obicei responsabilă pentru validarea codului HTML. Doar pictograma sa, care indică numărul de erori de pe pagina principală a site-ului habrahabr.ru, poate fi văzută în colțul din dreapta jos al browserului în imaginea cu Inspectorul paginii.

De asemenea, profitând de această ocazie, voi sublinia că pentru acest browser există multe extensii care ușurează viața, despre care exista deja una corespunzătoare pe Habré.

Google Chrome și Safari

Aceste browsere bazate pe WebKit au un instrument de creație Web Inspector încorporat, care este foarte bine dezvoltat și implementează aproape aceeași funcționalitate ca și Firebug. În același timp, trebuie să-i aducem un omagiu, nu încetinește browserul, care se găsește în „fratele mai mare”.

În Chrome, poate fi invocat apăsând Ctrl+Shift+I sau pur și simplu apăsând F12 . În Safari, este bine ascuns și, pentru a-l folosi, trebuie să activați opțiunile de dezvoltare în setările browserului. Ulterior, instrumentele pentru dezvoltatori vor deveni disponibile din elementul „Dezvoltare” din meniul principal sau prin apăsarea comenzii rapide de la tastatură Ctrl+Alt+I .

Pentru a valida codul HTML, trebuie să instalați și extensii terță parte. De exemplu, pentru Chrome, aceasta ar putea fi Validitate . Pentru Safari, nu a fost găsit încă nimic potrivit.

Operă

Opera are, de asemenea, un instrument de dezvoltare încorporat numit „Opera Dragonfly”, care poate fi invocat în orice moment cu comanda rapidă de la tastatură Ctrl+Shift+I . Este asemănător cu ceea ce ne prezintă WebKit, și are caracteristici și avantaje similare, deși, în opinia mea personală, este mai puțin convenabil.

Depanare și profilare cod de server

xdebug

După cum am convenit la început, luăm în considerare cazul în care PHP este folosit pe server. Aici metodele „clasice” de depanare sunt echo , print_r și var_dump , dar există și un instrument de depanare, ca în cele mai bune case - Xdebug . Pentru mine personal, din cauza specificului studiului la institut, arăta „ca în Delphi”.

Extensia xdebug vă permite să treceți cel puțin prin cod și să vizualizați valorile variabilelor, ceea ce duce programarea PHP la un nou nivel. Despre complexitatea lucrului cu xdebug a existat un . XDebug este de obicei disponibil în depozitele GNU/Linux, pe Windows, de asemenea, nu este prea dificil de instalat prin copierea fișierului dll.

Când utilizați această extensie, se primește o conexiune de intrare de la server la computerul de dezvoltare (în mod implicit, pe portul 9000), pe care trebuie să o proceseze. Pentru a face acest lucru, trebuie să vă configurați IDE-ul în consecință.

Apropo, utilizarea unui IDE este, de asemenea, o condiție prealabilă pentru a merge mai departe. Unii programatori cred că diferența dintre programarea într-un bloc de note evidențiat de cod și într-un IDE poate fi văzută doar pe proiecte mari, dar personal sunt de părere că diferența este vizibilă chiar și pe programul „Hello world!” - o autosubstituire a numelor și argumentelor funcțiilor standard valorează ceva.

XHProf

Despre extensie

Da, xdebug oferă capabilități de profilare, dar personal îmi place dezvoltarea Facebook în aceste scopuri, XHProf . Sincer, nu am efectuat niciun test, dar această extensie este considerată a fi mult mai potrivită pentru serverele de producție și pentru profilare sub încărcări reale.

Instalare

Din păcate, această extensie nu este inclusă în niciun depozit. Este inclus în PECL, dar din anumite motive instalarea sa regulată cauzează adesea probleme. Din acest motiv, trebuie să instalați din sursă.

# Obțineți sursele wget http://pecl.php.net/get/xhprof-0.9.2.tgz # Despachetați sursele tar -xvf xhprof-0.9.2.tgz # Schimbați în directorul care conține codul extensiei cd xhprof- 0.9.2/extension/ # Compilați și testați phpize ./configure make make test # Instalați civil checkinstall
Fișierul de configurare xhprof.ini ne oferă ceva de genul acesta:

extensie=/usr/local/lib/php/extensions/no-debug-non-zts-20090626/xhprof.so
; Director pentru jurnalele
xhprof.output_dir="/var/log/xhprof/"

Profilare

Directorul pe care îl obținem prin despachetarea arhivei conține, pe lângă sursele de extensie, și o interfață web pentru studierea rezultatelor profilării și biblioteci pentru profilarea aplicației.

Să luăm un exemplu de profilare. Următoarele elemente trebuie incluse în codul aplicației:
// Începutul scriptului, activarea profilării // atât pentru încărcarea procesorului, cât și a memoriei xhprof_enable(XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY); /* * Codul principal al aplicației */ // Sfârșitul scriptului, terminarea profilării, // scrieți rezultatul în jurnal $xhprofData = xhprof_disable(); include_once XHPROF_DIR."/xhprof_lib/utils/xhprof_lib.php"; include_once XHPROF_DIR."/xhprof_lib/utils/xhprof_runs.php"; $xhprofRuns = nou XHProfRuns_Default(); $namespace = „un nume-unic”; $runId = $xhprofRuns->save_run($xhprofData, $namespace); ecou"\n";
Aici constanta XHPROF_DIR indică directorul în care am despachetat arhiva descărcată.

Pentru a analiza rezultatele, aveți nevoie de aceeași interfață web. Poate fi găsit în directorul $XHPROF_DIR/xhprof_html/ - să-l denotăm în mod convențional astfel. De exemplu, l-am localizat într-un loc accesibil serverului web și este disponibil la example.com/system/xhprof/ , apoi pentru a analiza rezultatul lucrării, trebuie să îl accesăm astfel:

Example.com/system/xhprof/?run=%runId%&source=%namespace%

Vom obține un rezultat similar:

Profilarea poate fi inclusă în codul aplicației în mod permanent sau, de exemplu, o puteți face să ruleze aleatoriu cu o anumită probabilitate sau pe prezența unei anumite condiții. De exemplu, așa:

$needProfiler = (mt_rand(0, 100)< 10 or isset($_COOKIE["xhprof"])); if ($needProfiler) xhprof_enable(XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY);
În acest caz, puteți, având reclamații din partea clienților sau suspiciuni, să apelați la rezultatele profilării pentru o anumită perioadă de timp. Folosind parametrul de spațiu de nume, puteți determina care parte a aplicației (ce script, controler, acțiune) a fost profilată.

Profilarea interogărilor SQL

De regulă, lucrul cu baza de date este blocajul în aplicație. Din acest motiv, se recomandă profilarea interogărilor. De exemplu, luați în considerare o parte a unei clase care înglobează funcțiile de extensie mysql. Da, știu că această extensie nu este foarte iubită și îi doresc moartă nu mai puțin decât vechiul IE6. Nu îndemn să-l folosesc, doar că o astfel de clasă este la îndemâna mea.

/** * Interogare * @param string $sql Interogare * @param array $params Parametri * @param string $query Interogare compilată * @return array Rezultat */ interogare public function($sql, array $params = array(), & $interogare = "") ( $start = microtime(TRUE); // Executați interogarea, inclusiv parametrul „protecție” $stop = microtime(TRUE); $time = $stop - $start; $this->_addProfilerData($ sql , $time); // Returnează rezultatul ) funcție privată _addProfilerData($query, $time) ( dacă (is_array(self::$profilerData)) ( self::$profilerData = array("query" => $interogare, " time" => $time); ) ) funcția publică __destruct() ( if (is_array(self::$profilerData)) ( $this->_writeProfilerData(); self::$profilerData = FALSE; ) // Deconectați-vă de la baza de date) funcție privată _writeProfilerData() ( $values ​​= array(); foreach (self::$profilerData ca $row) ( $query = mysql_real_escape_string($row["query"], $this->con); $timp = (float)$row["time"]; $hash = crc32($row["interogare"]); $values ​​​​= "($hash, "$interogare", $time)"; ) if ($valori) ( $strValues ​​​​= implode(", ", $valori); $sql = "INSERTARE ÎNTARZIAT ÎN `profiler_queries` (`query_hash`, `query`, `work_time`) VALORI $strValues”; @mysql_query($sql, $this->con); ) )
Aici, datele de profilare a interogărilor sunt stocate în tabelul profiler_queries. Acest tabel poate fi de tip MyISAM sau Archive, deoarece oferă posibilitatea de a efectua inserări leneșe, ceea ce nu creează o întârziere inutilă în răspuns la profilare. De asemenea, pentru o mai bună căutare a interogărilor în tabel, este mai bine să creați o coloană de tip INT , unde va fi scris hash-ul crc32 al interogării, pe care doriți să creați un index.

Concluzie

Articolul este destul de mare. Poate că aici am trecut peste top și am atins subiecte care au fost deja atinse, dar dacă aș fi citit ceva asemănător la timp - un articol în care toate informațiile sunt adunate împreună și sunt date link-uri utile, ar fi fost de neprețuit. ajuta-ma. Sper că articolul meu va ajuta pe cineva pe calea iluminării.

Există, desigur, și altele – cu siguranță le voi aminti.

Firebug pentru Firefox

Nu stiu sigur daca firebug precursorul altor instrumente pentru dezvoltatori, dar este cu siguranță cel mai popular, ușor de utilizat și plin de funcții .

Firebug este un program de completare pentru Firefox, ceea ce înseamnă că trebuie descărcat de pe site-ul de suplimente Firefox și instalat.

Pentru a apela firebug, trebuie doar să apăsați F12.

Caracteristicile acestui supliment:

• Inspectarea și editarea HTML care se schimbă dinamic;
• Editare CSS din mers;
• Depanare JavaScript, linie de comandă pentru executarea scripturilor;
• Monitorizarea solicitărilor de rețea - puteți vedea dimensiunea și timpul de descărcare a fișierelor și scripturilor, antete de solicitare;
• Analizor DOM.

Despre aceste caracteristici puteți vorbi în detaliu mult timp, dar cred că sunt cunoscute de toți cititorii noștri, iar dacă nu, informații detaliate sunt pe pagina de start Firebug sau același lucru este tradus de Ilya Kantor.

Pe lângă firebug în sine, este posibil să aveți nevoie de o loțiune utilă pentru el - firecookie, cu care (surpriza:-) puteti vizualiza si modifica cookie-urile.

Bara de instrumente pentru dezvoltatori WEB pentru Firefox

Un alt plus util pentru Ognelis. Arata cam asa:

Să trecem prin puncte.

Dezactivați

Vă permite să dezactivați JavaScript, să dezactivați utilizarea cache-ului, ceea ce este foarte util în dezvoltare (vă permite să fiți sigur că pagina este încărcată cu cele mai recente actualizări), să anulați culorile folosite în pagină și să le înlocuiți cu unele standard, dezactivați trimiterea în antetul referitor (pagina de la care a fost tranziția).

Cookie-uri

O opțiune utilă pentru lucrul cu cookie-uri: acestea pot fi vizualizate, șterse, blocate și adăugate.

css

Acest meniu conține cea mai tare caracteristică a Barei de instrumente pentru dezvoltatori - editarea CSS din mers. În plus, este posibil să vizualizați css, dezactivați și așa mai departe și așa mai departe. În opinia mea, prezența comenzilor rapide de la tastatură este foarte utilă aici (CTRL + SHIFT + C, de exemplu, vă permite să mergeți imediat la vizualizarea stilurilor de pagină)

Forme

Totul pentru lucrul cu formulare: afișați parole, afișați informații despre formulare, convertiți metodele de formulare (GET » POST și invers) și multe altele. O funcție utilă „Populați câmpuri de formular” pentru completarea automată a câmpurilor de formular (de exemplu, la testarea unui site când funcția de memorare a parolei este dezactivată. În caz contrar, nu văd nimic util în acest paragraf.

imagini

Există o funcție utilă pentru a dezactiva imaginile - pentru a vedea cum arată site-ul tău fără imagini. Imaginile pot fi încercuite, afișați dimensiunile lor, afișați alt-atribute.

informație

Acest meniu are o mulțime de opțiuni. Poate fi util să afișați atributele de clasă și id pe pagină. În plus, elementul „Vizualizare informații despre culoare” este interesant - pentru a obține rapid informații despre culorile care sunt utilizate pe pagină. „Vizualizați dimensiunea documentului” - vizualizați dimensiunea paginii. „Vedeți anteturile de răspuns” - vedeți anteturile paginii.

Diverse

Funcția cel mai frecvent utilizată este ștergerea memoriei cache. În plus, „Rglă de pagină” - riglă, „Lupă de pagină” - lupă și „Ghiduri de linii” - sunt disponibile aici câteva linii, care pot fi utile pentru a tăia șablonul.

contur

Selectarea diferitelor elemente ale paginii - tabele, titluri, linkuri, cadre, blocuri. Redimensionare vă permite să redimensionați fereastra browserului pentru a se potrivi oricăror extensii standard de ecran. Instrumentele de aici sunt funcții stocate pentru validarea paginii. Atât local, cât și extern. Acces convenabil și rapid pentru validarea HTML, CSS și multe altele. Puteți utiliza comanda rapidă de la tastatură CTRL+SHIFT+H pentru a valida HTML.

Vizualizare sursă

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

Cel din dreapta este preferatul meu. Este un HTML rapid, validator CSS și indicator de eroare JavaScript. Dacă nu există probleme, pictograma este verde, iar dacă există probleme, roșie.

Bara de instrumente pentru dezvoltatori Internet Explorer

Începând de la 8.0, depanarea erorilor este deja încorporată în acest browser. Se numește ușor Tasta F12. Adevărat, este mizerabil ca program al anilor 90.

Dar există un instrument mult mai cool pentru acest browser, așa-numita Bară de instrumente pentru dezvoltatori Internet Explorer poate fi descărcată de pe link.

În aparență, această bară de instrumente, desigur, arată ca firebug, dar, din păcate, încă nu a ajuns la ea. Deși, pe de altă parte, are unele caracteristici pe care firebug-ul nu le are. Aș numi Internet Explorer Developer Toolbar un hibrid de Firebug și dezvoltator web firefox Bara de instrumente.

Ca și în firebug, este posibil să inspectați un element cu un simplu clic. Dar, dacă putem vedea imediat umpluturi și margini, atunci nu există o astfel de posibilitate aici.

De asemenea, Bara de instrumente pentru dezvoltatori Internet Explorer nu actualizează în mod dinamic arborele de elemente, așa cum face Firebug. Adică, dacă schimbăm ceva în pagină folosind js, nu vom vedea nimic folosind această bară de instrumente.

Din ceea ce vă puteți bucura - schimbarea CSS din mers (o modalitate ușoară de a găsi ce să piratați :), capacitatea de a dezactiva CSS și imaginile, capacitatea de a șterge rapid memoria cache și de a vă juca cu cookie-uri, acces rapid la validare.

Cel mai delicios: există un selector de culori încorporat care vă permite să obțineți orice culoare din pagină folosind o pipătă. (pentru ff există un plugin separat ColorZilla).

Depanare Bara de depanare pentru Internet Explorer

Puteți descărca DebugBar pentru Internet Explorer de la linkul dat.

O extensie interesantă în sine. Instalat ca panou suplimentar pentru browser:

Din anumite motive, există un motor de căutare încorporat, un pipetă, capacitatea de a redimensiona fereastra și, din nou, din anumite motive, capacitatea de a trimite o pagină unui prieten pentru săpun. Deși ar putea fi util. Dar nu am reușit să profit de această oportunitate.

În plus, există un inspector:

Metoda de inspecție prin clic sau indicare nu s-a potrivit dezvoltatorilor: au venit cu un lucru mai interesant. În DebugBar, trebuie să trageți ținta către elementul dorit pentru a o vedea în arbore. Nu există nicio opțiune de a edita CSS. Dar există un validator și o consolă js încorporată.

Și dacă cercetați setările, puteți găsi asta:

Atat amuzant cat si trist.

Se știe că Bara de instrumente pentru dezvoltatori va fi încorporată în al optulea explorator. Va fi asemănător cu cel descris în al treilea paragraf, dar sperăm că va fi mai bine.

Depanați DragonFly pentru Opera

DragonFly a fost încorporat în Opera începând cu versiunea 9.5, deci nu este nevoie să îl instalați. Pentru a activa Dragonfly, accesați Instrumente → Avansat → Instrumente pentru dezvoltatori. Și dacă este în engleză, atunci Instrumente → Avansat → Instrumente pentru dezvoltatori.

Vă voi avertiza imediat că DragonFly este în stadiul Alpha2, asta explică multe dintre erorile sale.

Lista de caracteristici:

• inspector DOM;
• Faceți clic pe Inspecție (din nou, nu vom vedea umplutură ca în FireFox);
• Editare;
• Acces rapid la consola de erori.

DF este ceva ca o pagină separată într-un cadru. Dacă îl deschideți, va fi deschis pentru toate filele (spre deosebire de firebug). Prin urmare, înainte de a inspecta un element, trebuie să selectăm pagina pe care dorim să o vizualizam din listă.

Din păcate, aici, ca și în Internet Explorer, Bara de instrumente Dav nu afișează elemente create dinamic. Și, în general, când inspectăm pagina, nu se rulează JavaScript: nu se face clic pe link-urile și butoanele. Să sperăm că atunci când DragonFly se va apropia de lansare, vom vedea toate aceste caracteristici.

Depanați inspectorul WEB în Safari

Voi spune imediat asta despre browser safari Am fluierat informația, așa că, după cum se spune, nu sunt responsabil pentru caracterul adecvat al materialului.

Pentru a activa elementul „Dezvoltare” din meniul Safari, trebuie să activați elementul corespunzător în setări (fila „Avansat”):

Următoarele funcții ne sunt disponibile în meniul „Dezvoltare”:

Să aruncăm o privire mai atentă la inspectorul WEB:

În mod implicit, inspectorul se deschide în modul de vizualizare HTML. Dar poate fi comutat în modul de vizualizare DOM. Pentru a face acest lucru, există un comutator pe placa de sus. Când treceți cu mouse-ul peste un element din inspector, acesta va fi evidențiat pe pagina însăși. Nu puteți vedea umplutură, modificați marcajul sau CSS din mers sau puteți vedea modificări dinamice ale DOMe din mers, așa cum nu puteți în FireBug. Dar, vezi tu, arată foarte frumos.

Dacă doriți să lucrați cu inspectorul într-o fereastră de browser, puteți face clic pe butonul din colțul din stânga jos.

Chiar și în safari, este disponibilă o astfel de funcție precum „Cronologia rețelei” (butonul „Rețea” din inspector):

Puteți vedea clar când și cât timp sunt încărcate fișierele. Puteți vizualiza, de asemenea, anteturile solicitărilor, dar, din păcate, nu puteți vizualiza conținutul în sine.

Depanare pentru dezvoltatori în Google Chrome

Lame s-a născut într-o formă avansată și are imediat, deși strâmb deocamdată, dar totuși instrumente pentru dezvoltatori.

• Inspector DOM;
• depanator javascript;
• Consola JavaScript.

Pentru a inspecta un element, faceți clic dreapta pe el și selectați „Vizualizare cod element” în meniul contextual:

Funcționalitatea este aceeași ca în Safari: elementele sunt evidențiate la trecerea cursorului, dar editarea CSS și HTML nu este disponibilă, modificările în DOM nu sunt urmărite. Numai că 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:

Puțin diferit de scara din safari. Translucide în această diagramă sunt dimensiunile relative ale fișierelor, iar culoarea completă este timpul de descărcare. Într-un fel sau altul, este evident că această parte a Chrome este încă departe de a fi finalizată.

În acest articol, am trecut în revistă cele mai faimoase extensii și instrumente încorporate pentru browsere.

Mai sunt si altele, de exemplu:

• Internet Explorer WEB Development Helper este un bun ajutor pentru dezvoltatorii ASP.NET (Internet Explorer);
• WEB Developer Toolbar - bară de instrumente pentru Internet Explorer și FireFox. Există mai multe caracteristici utile;
• WEB Accessibility Toolbar - bară de instrumente pentru Internet Explorer. Nimic interesant.

Dacă există suplimente pe care nu le-am menționat, dar ar merita, sau există funcții pentru extensiile menționate pe care le-am ratat, scrieți.

Folositi pentru sanatate!