Meniul
AcasăBios

Cum să depanați o aplicație JavaScript. Aflați cum să depanați JavaScript folosind Chrome DevTools. Mesaje de eroare în IE

NetBeans IDE 7.3 introduce tip nou proiecte care pot fi folosite pentru a dezvolta aplicații HTML5. Aplicațiile HTML5 combină de obicei HTML, CSS și JavaScript pentru a crea aplicații care rulează în browsere și sunt afișate diverse dispozitive, inclusiv smartphone-uri, tablete și laptop-uri. Acest document arată cum IDE-ul oferă instrumente care pot fi utilizate în depanarea și testarea fișierelor Scripturi JAVAîn IDE.

Dacă trebuie să depanați Fișiere JavaScriptÎntr-o aplicație HTML5, se recomandă instalarea extensiei NetBeans Connector pentru browserul Chrome. Suportul de depanare este activat automat atunci când lansați aplicația în browser și instalați extensia.

De asemenea, IDE-ul facilitează configurarea și rularea testelor unitare pe fișiere JavaScript utilizând cadrul de testare Jasmine și serverul JS Test Driver. Puteți configura driverul de testare JS pentru a rula diverse module pentru o varietate de browsere și specificați rapid bibliotecile JavaScript, scripturile și testele care ar trebui să fie încărcate în IDE atunci când rulați testele. Dacă un test eșuează, puteți utiliza un depanator pentru a găsi codul cu eroarea.

Pentru mai multe informații despre instalarea extensiei NetBeans Connector pentru browserul Chrome, consultați curs de pregatire.

Pentru o prezentare generală a caracteristicilor de editare JavaScript ale IDE-ului, consultați Editarea JavaScript în IDE-ul NetBeans. .

Pentru a vedea o demonstrație a acestui tutorial, consultați videoclipul despre testarea și depanarea JavaScript în aplicațiile HTML5.

Pentru a finaliza acest tutorial, veți avea nevoie de următoarele materiale.

Note

  • Acest document folosește serverul JS Test Driver pentru a rula teste de module JavaScript. Se recomandă să examinați proprietățile serverului în secțiunea Pagina principală a proiectului JS Test Driver.
  • Se presupune că cititorul are cunoștințe sau experiență de bază în programarea HTML, CSS și JavaScript.

Crearea unui exemplu de aplicație HTML5

Legume şi fructe următoarele acțiuni pentru a crea un exemplu de aplicație HTML5 folosind un șablon de site.


Când rulați proiectul utilizând butonul Run, se va deschide prima pagină a aplicației HTML5 browser Chrome iar acolo va fi afișată o listă de telefoane mobile. Când faceți clic pe un nume telefon mobil Pagina afișează informații despre telefon.


Observați că fila browserului are o bară galbenă, care este o notificare că NetBeans Connector depanează fila. IDE-ul și browserul sunt conectate și pot comunica între ele în cazurile în care bara galbenă este vizibilă. Când rulați o aplicație HTML5 din IDE Depanator JavaScript se aprinde automat. După salvarea modificărilor într-un fișier sau după efectuarea modificărilor unui tabel Stiluri CSS nu este nevoie să reîncărcați pagina deoarece fereastra browserului se reîmprospătează automat odată cu modificările.

Închiderea barei galbene sau făcând clic pe Anulare întrerupe conexiunea dintre IDE și browser. Dacă se pierde conexiunea, trebuie să relansați aplicația HTML5 din IDE pentru a utiliza depanatorul JavaScript.

De asemenea, rețineți că pictograma NetBeans apare în locația URL a câmpului browser. Puteți face clic pe pictogramă pentru a deschide un meniu care oferă diverse opțiuni pentru a redimensiona imaginea în browser și pentru a activa modul de validare în modul NetBeans.

Utilizarea JavaScript Debugger

Acest exercițiu descrie cum să plasați un punct de întrerupere într-un fișier JavaScript și să rulați din nou aplicația. Pentru vizualizare rapidă valorile variabilelor, puteți folosi sugestia editorului.

  1. Extindeți nodul js în fereastra Proiecte și faceți dublu clic pe fișierul controllers.js pentru a deschide fișierul în editor.
  2. Plasați un punct de întrerupere de linie pe linia 16 în controllers.js făcând clic pe marginea din stânga.

    Pentru a vedea punctele de întrerupere setate în proiectul dvs., alegeți Fereastra > Depanare > Puncte de întrerupere pentru a deschide fereastra Puncte de întrerupere.


  3. Faceți clic pe butonul Executare din bara de instrumente pentru a rula din nou proiectul.

    La rularea proiectului, aceeași pagină va fi afișată deoarece nu a fost accesată punct de referință Stop.

  4. În browser, faceți clic pe una dintre intrările de pe pagină, de exemplu Motorola Atrix4G.

    Veți vedea că pagina este parțial încărcată și nu există date pentru telefon, deoarece datele nu au fost transmise la JavaScript și redate.

  5. În editorul IDE, puteți vedea că punctul de întrerupere a fost atins și că contorul programului se află în prezent pe linia 16 a fișierului controllers.js.
  6. Treceți cursorul peste variabila telefon pentru a vedea un sfat explicativ cu informații despre variabilă.

    Se afișează sfatul instrumentului următoarea informație: telefon = (Resursa) Resursa .

  7. Faceți clic pe un sfat pentru a-l extinde și pentru a vedea o listă de variabile și valori.

    De exemplu, la extinderea nodului Android, sunt afișate valorile șirurilor os și ui.

    De asemenea, puteți alege Fereastra > Depanare > Variabile pentru a vizualiza o listă în fereastra Variabile.

  8. Utilizați butoanele de pe bara de instrumente pentru a naviga între ele Funcții JavaScriptîn biblioteca angular.js sau faceți clic pe Continuare (F5) pentru a relua aplicația.

Rularea testelor unitare JS

IDE-ul facilitează configurarea unui server JS Test Driver pentru a rula teste unitare. În acest tutorial, veți folosi testele unitare JavaScript incluse în proiectul exemplu și veți folosi cadrul de testare Jasmine.

JS Test Driver este un server care oferă adresa URL, care este ținta pentru rularea testelor unitare JavaScript. Când rulați teste, serverul pornește și așteaptă să ruleze testele. Un mesaj de stare verde va fi afișat în fereastra browserului pentru a confirma că serverul rulează și este în modul de așteptare. IDE-ul oferă un dialog de configurare pentru JS Test Driver care poate fi deschis din nodul JS Test Driver din Servicii. Dialogul de configurare facilitează specificarea locației JAR a serverului JS Test Driver și a browserelor în care să ruleze browserele. Nodul JS Test Driver vă permite să determinați rapid dacă serverul rulează și să porniți sau să opriți serverul.

Pentru mai multe informații despre configurarea unui server JS Test Driver, consultați documentația Noțiuni introductive cu JsTestDriver.

  1. Descărcați driverul de testare JAR JS și salvați fișierul JAR pe sistemul dvs. local.
  2. În fereastra Servicii, faceți clic dreapta pe nodul JS Test Driver și selectați Configurare.
  3. În caseta de dialog Configurare, faceți clic pe Răsfoire și localizați fișierul JAR JS Test Driver descărcat.
  4. Selectați Chrome utilizând caracteristica NetBeans JS Debugger. Faceți clic pe OK.

    Notă. Locație fișier JAR pentru JS Test Driver trebuie doar să-l specificați atunci când configurați JS Test Driver pentru prima dată.

    Lista browserelor care pot fi capturate și utilizate pentru testare în browserele instalate pe sistem. Puteți selecta mai multe browsere ca altele suplimentare, dar pentru a rula teste, fereastra, care poate fi suplimentară pentru server, trebuie să fie deschisă pentru fiecare browser. Browserele selectate vor fi capturate automat când porniți serverul din IDE.

  5. Faceți clic dreapta pe nodul proiectului din fereastra Proiecte și selectați Nou > Altele.
  6. Selectați jsTestDriver fișier de configurareîn categoria „Testarea modulelor”. Faceți clic pe „Următorul”.
  7. Asigura-te ca jsTestDriver specificat ca „Nume fișier”.
  8. În câmpul Fișier generat, asigurați-vă că fișierul se află în folderul de configurare al proiectului (AngularJSPhoneCat/config/jsTestDriver.conf).

    Notă. Fișierul de configurare jsTestDriver.conf ar trebui să fie în folderul de configurare al proiectului. Dacă locația fișierului generat nu este folderul de configurare, faceți clic pe Browse și selectați folderul AngularJSPhoneCat - Configuration Files în caseta de dialog.

  9. Asigurați-vă că caseta pentru a încărca bibliotecile Jasmine este bifată. Faceți clic pe butonul „Terminat”.

    Notă. Pentru a rula jsTestDriver trebuie să descărcați bibliotecile Jasmine. Dacă primiți o notificare că IDE-ul nu poate încărca bibliotecile Jasmine, verificați setările proxy-ului IDE în fereastra Opțiuni.

    După ce faceți clic pe butonul „Terminat”. IDE va crea un fișier de configurare a schemei jsTestDriver.conf și va deschide fișierul în editor. Fereastra Proiecte afișează că a fost creat un fișier de configurare sub nodul Fișiere de configurare. Dacă extindeți folderul lib în nodul Unit Tests, veți vedea că bibliotecile Jasmine au fost adăugate la proiect.

    În editor puteți vedea următorul conținut al fișierului de configurare, care este creat implicit:

    Server: http://localhost:42442 încărcare: - test/lib/jasmine/jasmine.js - test/lib/jasmine-jstd-adapter/JasmineAdapter.js - test/unit/*.js exclude:

    Fișierul de configurare definește locația implicită activată server local, care este folosit pentru a rula teste. Fișierul specifică, de asemenea, fișierele care trebuie descărcate. În mod implicit, lista include bibliotecile Jasmine și toate fișierele JavaScript care se află în folderul unității. Testele sunt de obicei localizate în folderul unității, dar puteți modifica lista pentru a specifica locația altor fișiere care trebuie încărcate pentru a rula testele.

    Dosar de module ale proiectului „Curs de formare pe carte de telefon AngularJS" conține patru fișiere JavaScript cu teste unitare.

    Pentru a rula teste unitare, puteți adăuga, de asemenea, locația fișierelor JavaScript pe care doriți să le testați și bibliotecile Angular JavaScript la lista fișierelor descărcate.

  10. Adăugați următoarele locații (evidențiate îndrăzneţ font) la secțiunea de încărcare a fișierului de configurare. Salvați modificările. încărcare: - test/lib/jasmine/jasmine.js - test/lib/jasmine-jstd-adapter/JasmineAdapter.js - test/unit/*.js - app/lib/angular/angular.js - app/lib/angular/angular-*.js - app/js/*.js - test/lib/angular/angular-mocks.js
  11. Dezactivează orice puncte de întrerupere setate în proiect.

    Punctele de întrerupere pot fi dezactivate debifând casetele de selectare pentru punctele de întrerupere din fereastra Puncte de întrerupere.

  12. Făcând clic pe Test IDE, deschide automat lansatorul JS Test în browserul Chrome și două file în fereastra Ieșire.


    În fereastra browserului Chrome este afișat un mesaj care indică faptul că serverul jsTestDriver pornește. Este afișat un mesaj care indică faptul că serverul rulează pe localhost:42442. Fila Server js-test-driver din fereastra Ieșire afișează starea serverului.


    Notă. Pentru a rula teste unitare, fereastra browserului trebuie să fie deschisă și serverul jsTestDriver trebuie să ruleze. Puteți porni serverul și deschide fereastra făcând clic dreapta pe nodul JS Test Driver din fereastra Servicii și selectând Start.

    În fila Run JS Module Testing, Output arată rezultatul celor patru teste care au fost executate. Testele sunt localizate în fișierele controllerSpec.js și filtersSpec.js. (Fișierele servicesSpec.js și directivesSpec.js nu au teste în folderul unității.)


  13. Selectați Fereastra > Rezultate > Rezultate test din meniul principal pentru a deschide fereastra Rezultate test.

    Fereastra afișează un mesaj că toate testele au avut succes.


    Puteți da clic steag verdeîn marginea stângă a ferestrei pentru a vizualiza o listă extinsă de teste finalizate cu succes.

Depanarea testelor unitare JS

Acest exercițiu demonstrează cum puteți utiliza IDE-ul pentru a depana fișierele JavaScript atunci când un test unitar eșuează.

  1. Extindeți folderul js în fereastra Proiecte și faceți dublu clic pe fișierul controllers.js pentru a deschide fișierul în editor.
  2. Schimbați linia 7 din fișier pentru a face următoarele modificări (evidențiate îndrăzneţ font). Salvați modificările. funcția PhoneListCtrl($scope, Phone) ( $scope.phones = Phone.query(); $scope.orderProp = " Nume"; }

    La salvarea modificărilor, pagina este reîncărcată automat în browser. Afișează modificarea în ordinea telefoanelor din listă.

  3. Asigurați-vă că serverul JS Test Driver rulează și că mesajul de stare este afișat în fereastra browserului Chrome.
  4. Faceți clic dreapta pe nodul proiectului din fereastra Proiecte și selectați Testare.

    Când rulați testul, puteți vedea că unul dintre teste are o eroare care spune că a fost găsită valoarea „nume” în loc de valoarea așteptată „vârstă”.

  5. Deschideți fila „Run JS unit tests” în fereastra „Ieșire”.

    Este afișat un mesaj care spune că orderProp trebuie să aibă vârsta pe linia 41.

  6. Faceți clic pe linkul din fila Running JS Unit Tests pentru a merge la linia în care testul a eșuat. Fișierul de testare controllersSpec.js se deschide în editor pe linia 41 (evidențiat îndrăzneţ font) it("ar trebui să seteze valoarea implicită a modelului orderProp", function() ( astept(scope.orderProp).toBe("varsta"); });

    Puteți vedea că testul așteptat „vârsta” ca valoare pentru scopeOrder.prop .

  7. Setați un punct de întrerupere la linia în care testul a eșuat (linia 41).
  8. Faceți clic dreapta pe nodul proiectului din fereastra Proiecte și selectați Testare.

    Când testul este repornit, contorul programului va atinge punctul de întrerupere. Când treceți cu mouse-ul peste scopeOrder.prop, sfatul cu instrumente arată că variabila este setată la „nume” atunci când este lovit punctul de întrerupere.


    Alternativ, puteți selecta Debug > Expression Evaluation din meniul principal pentru a deschide fereastra de evaluare a codului. Când introduceți expresia scopeOrder.prop în fereastră și faceți clic pe butonul Evaluate Code Snippet () (Ctrl-Enter), depanatorul afișează valoarea expresiei în fereastra Variables.

  9. Faceți clic pe butonul Continuare din bara de instrumente pentru a finaliza testul.

Concluzie

Acest tutorial demonstrează modul în care IDE-ul oferă instrumente care pot fi utilizate pentru a depana și a testa modulele din fișierele JavaScript. Depanarea este activată automat pentru aplicațiile HTML5 atunci când rulați aplicația în browserul Chrome, cu condiția ca extensia NetBeans Connector să fie activată. De asemenea, IDE-ul facilitează configurarea și rularea testelor unitare pe fișiere JavaScript utilizând cadrul de testare Jasmine și serverul JS Test Driver.


Vezi si

Pentru mai multe informații despre suportul pentru aplicațiile HTML5 în IDE, consultați următoarele resurse de pe site:

  • Noțiuni introductive cu aplicațiile HTML5. Un document care arată cum să instalați extensia NetBeans Connector pentru Chrome și cum să creați și să rulați aplicare simplă HTML5.
  • Lucrul cu pagini de stil CSS în aplicațiile HTML5 Un document care demonstrează cum să utilizați unele dintre CSS și vrăjitorii de ferestre din IDE și modul de inspecție din browserul Chrome pentru a definiție vizuală elemente din sursele proiectului.
  • Se efectuează modificări la codul JavaScript. Acest document descrie capacitățile de bază de modificare a codului JavaScript furnizate în IDE.

Pentru mai multe informații despre rularea testelor unitare folosind JS Test Driver, consultați următoarea documentație:

  • Pagina proiectului JS Test Driver: http://code.google.com/p/js-test-driver/
  • Pagina principala Jasmine: http://pivotal.github.com/jasmine/
  • Introducere în JsTestDriver. O introducere în utilizarea JsTestDriver cu un server de integrare continuă.

Când vine vorba de găsirea cauzei erorilor, cunoașterea instrumentului dvs. poate face diferența Rol cheie. Chiar dacă JavaScript are reputația de a fi dificil de depanat, dacă cunoașteți câteva trucuri, va dura mai puțin timp pentru a găsi cauza erorii.

Am compilat o listă cu 14 sfaturi de depanare, despre care poate nu știți, dar care vă poate ajuta să depanați codul JavaScript.

Cele mai multe dintre aceste sfaturi sunt pentru Chrome și Firefox, deși majoritatea funcționează în instrumente de dezvoltare pentru alte browsere.

1. „depanator;”

După console.log, ‘depanator;„ Instrumentul meu favorit de depanare rapidă și murdară. După ce îl adăugați la cod, Chrome oprește automat execuția codului în acel moment. Puteți chiar să-l împachetați într-o stare astfel încât să se declanșeze doar atunci când aveți nevoie.

If (thisthing) (depanator; )

2. Afișarea obiectelor sub formă de tabele

Uneori ai set complex obiectele pe care doriți să le vizualizați. poți să folosești console.log pentru a le afișa, apoi derulați printr-o listă imensă sau utilizați consolă.masă. Acest lucru face mult mai ușor să înțelegeți cu ce aveți de-a face.

Var animale = [ ( animal: „Cal”, nume: „Henry”, vârsta: 43 ), ( animal: „Câine”, nume: „Fred”, vârsta: 13 ), ( animal: „Pisică”, nume: „ Frodo", vârsta: 18 ) ]; consola.masa(animale);

3. Încercați să vizionați la diferite rezoluții

Ar fi uimitor dacă ar exista dispozitiv mobil, însă în lumea reala este imposibil. Cum se redimensionează fereastra de vizualizare? Chrome vă oferă tot ce aveți nevoie. Accesați Instrumente pentru dezvoltatori și apoi faceți clic pe butonul Comutare mod dispozitiv. Vezi cum expresiile tale media prind viață!

4. Căutați rapid elementele DOM

Selectați un element DOM în Toolbox, apoi accesați-l în consolă. Instrumentele de dezvoltare ale Chrome își amintesc ultimele cinci elemente: ultimul element selectat $0, penúltimul element selectat $1 etc.

Daca ai ales următoarele elementeîn ordinea „articol-4”, „articol-3”, „articol-2”, „articol-1”, „articol-0”, atunci poți accesa elementele DOM așa cum se arată în consolă:

5. Măsurarea timpului de execuție a codului folosind console.time() și console.timeEnd()

Poate fi foarte util să știți cât timp durează executarea unei bucăți de cod, mai ales când se depanează bucle lente. Puteți seta mai multe cronometre cu nume. Să vedem un exemplu:

Console.time(„Timer1”); var itemi = ; pentru(var i = 0; i< 100000; i++){ items.push({index: i}); } console.timeEnd("Timer1");

Acest cod va produce următorul rezultat:

6. Obținerea unei urme de stivă pentru o funcție

Probabil știți că cadrele JavaScript conțin mult cod.

Acest cod redă interfața, declanșează evenimente, așa că în cele din urmă veți dori să știți ce a cauzat apelarea funcției.

Din moment ce JavaScript nu este foarte limbaj structurat, uneori este util să obțineți informații despre ce s-a întâmplat și când. În acest moment el urcă pe scenă consolă.urmă.

Imaginați-vă că doriți să vedeți întreaga stivă de apeluri pentru o funcție funcZîn copie mașină pe linia 33.

Var masina; var func1 = function() ( func2(); ) var func2 = function() ( func4(); ) var func3 = function() ( ) var func4 = function() ( car = new Car(); car.funcX() ); ) var Car = function() ( this.brand = 'volvo'; this.color = 'red'; this.funcX = function() ( this.funcY(); ) this.funcY = function() ( this .funcZ(); this.funcZ = function() ( console.trace('trace car') ) func1(); var car; var func1 = function() ( func2(); ) var func2 = function() ( func4(); ) var func3 = function() ( ) var func4 = function() ( car = new Car(); car.funcX() ); ) var Car = function() ( this.brand = 'volvo'; this.color = 'red'; this.funcX = function() ( this.funcY(); ) this.funcY = function() ( this .funcZ(); this.funcZ = function() ( console.trace('trace car'); ) ) func1();

Acum vedem asta func1 cauze func2, ce cauzează func4. Func4 creează o instanță Mașinăși apoi apelează funcția masina.funcX, etc.

Chiar dacă credeți că cunoașteți bine scriptul de execuție a programului, acest lucru poate fi foarte convenabil. Să presupunem că doriți să vă îmbunătățiți codul. Obțineți o urmărire a stivei și o listă cu toate funcțiile asociate, fiecare dintre acestea fiind vizibilă.

7. Formatarea codului minimizat

Uneori este posibil să întâmpinați o problemă chiar în producție, dar hărțile sursă nu sunt pe server. E bine. Chrome vă poate formata fișierele JavaScript pentru a le face mai multe format care poate fi citit. Desigur, codul nu va fi la fel de informativ ca sursă, dar măcar poți înțelege ce se întâmplă în ea. Faceți clic pe butonul {} « Pretty Print", situat sub vizualizatorul de cod din inspector.

8. Depanați rapid o funcție

Să presupunem că doriți să adăugați un punct de întrerupere la o funcție.

Există două modalități cele mai comune de a face acest lucru:

  1. Găsiți linia dorită în inspector și adăugați un punct de întrerupere
  2. Adăugați un depanator la scriptul dvs

Ambele soluții necesită căutare fișierul doritȘi linia dorită, pe care doriți să o depanați.

Utilizarea unei console în acest scop este probabil mai puțin obișnuită. Utilizare depanare(funcName)în consolă, iar scriptul se va întrerupe când ajunge la funcția dorită.

Aceasta este foarte cale rapidă cu toate acestea, nu funcționează pe funcții private și anonime. Dar dacă situația dvs. este diferită, atunci aceasta este probabil cea mai rapidă modalitate de a depana funcția. (Nota autorului: există o funcție console.debug, care este necesar pentru altul.)

Var func1 = function() ( func2(); ); var Car = function() ( this.funcX = function() ( this.funcY(); ) this.funcY = function() ( this.funcZ(); ) ) var car = new Car();


9. Scripturi care nu necesită depanare

10. Găsiți lucruri importante cu tehnici de depanare mai avansate

Scenariile de depanare mai complexe pot necesita mai multe linii de ieșire. O modalitate de a structura datele de ieșire este utilizarea diverse funcții consolă. De exemplu, console.log, console.debug, console.warn, console.info, console.error etc. Apoi le puteți filtra în inspector. Dar, uneori, acest lucru nu este exact ceea ce aveți nevoie atunci când depanați. Acum te poți manifesta creativitate, și creați-vă propriile formate de ieșire a datelor în consolă folosind CSS.

Console.todo = function(msg) ( console.log(' % c % s % s % s', 'culoare: galben; fundal - culoare: negru;', '–', msg, '–'); ) consola .important = function(msg) ( console.log(' % c % s % s % s', 'culoare: maro; font - greutate: bold; text - decor: subliniat;', '–', msg, '– '); ) console.todo(„Acesta este ceva care trebuie remediat”); console.important(‘Acesta este un mesaj important’);


11. Urmăriți apelurile și argumentele funcției.

ÎN Consola Chrome, Puteți monitoriza anumite funcții. De fiecare dată când o funcție este apelată, aceasta va fi înregistrată împreună cu parametrii care îi sunt transmise.

Var func1 = function(x, y, z) ( //.... );

Acest metodă grozavă vezi cu ce argumente se numește funcția. Dar trebuie să spun că ar fi bine dacă consola ar putea determina la câte argumente să te aștepți. În exemplul de mai sus func1 așteaptă trei argumente, dar doar două sunt trecute. Dacă acest lucru nu este tratat în cod, poate duce la o eroare.

12. Acces rapid la elementele din consolă

O modalitate mai rapidă de a utiliza querySelector în consolă este să folosești $. $('css-selector') va returna primul element potrivit, iar $$('css-selector') va returna toate elementele potrivite. Dacă utilizați un element de mai multe ori, îl puteți salva într-o variabilă.

13. Poștașul este grozav (dar Firefox este mai rapid)

Mulți dezvoltatori folosesc Postman pentru a testa cererile AJAX.

Uneori este mai ușor să utilizați un browser în aceste scopuri.

Când nu vă mai faceți griji cu privire la cookie-urile de conectare dacă lucrați pe o pagină protejată cu parolă. Iată cum puteți edita și retrimite solicitările în Firefox.

Deschideți inspectorul și accesați fila Rețea. Faceți clic dreapta pe solicitarea care vă interesează, apoi selectați „Editați” și „Retrimiteți”. Acum puteți schimba orice: corectați titlul, editați parametrii și faceți clic pe „Retrimite”.

Mai jos am dat un exemplu de cerere care a fost trimisă de mai multe ori cu diferiți parametri:

14. Punct de întrerupere când un element DOM se schimbă

DOM-ul poate fi amuzant. Uneori, elementele din acesta se schimbă din motive necunoscute pentru tine. Cu toate acestea, atunci când trebuie să depanați JavaScript, Chrome vă permite să întrerupeți execuția codului atunci când un element DOM se modifică. Faceți clic dreapta pe elementul de interes din inspector și selectați o condiție pentru a opri execuția.

Acest articol va fi util dezvoltatori web care încep cu JavaScript și se familiarizează cu instrumentele de dezvoltare încorporate în browser. Capacitatea de a „depana” o aplicație JavaScript este foarte importantă pentru un dezvoltator web, deoarece vă permite să găsiți rapid cauza unei erori într-un script.

Depanare în Google Chrome

Depanarea aplicației- procesul de detectare, localizare și eliminare a erorilor folosind un depanator (un instrument încorporat în mediul de dezvoltare sau alt software). La depanare, dezvoltatorul poate învăța valorile variabilelor și progresul programului.

In toate browsere moderne Există instrumente care permit unui dezvoltator să analizeze funcționarea unei aplicații web, inclusiv depanarea codului JavaScript. Pentru a deschide instrumente pentru dezvoltatori web, majoritatea browserelor folosesc tasta F12. Acest articol va discuta Depanare JavaScript aplicații folosind exemplul instrumentului Web Inspector în browser Google Crom.

Mai jos este codul HTML al paginii cu un script simplu cu care va fi analizat folosind Web-ul Inspector.

< div id="myDiv"> div>

< scenariu>

Var div = document.getElementById("mydiv");

vartext ="" ;

pentru ( vari = 0; i< 10; i++)

Text += i +" " ;

Div.innerHTML = text;

< scenariu>

Scopul acestui script este de a crea o serie de numere de la 0 la 9 și de a le afișa element div Pe pagina. Dar codul nu funcționează și vom încerca să găsim problema prin depanare.

Lansați Web Inspector și comutați la fereastra de depanare.

Apăsând tasta F12, obținem următoarea fereastră în Google Chrome.

Asigurați-vă că este selectat elementul de meniu Surse, care vă permite să depanați.

Fereastra de depanare este împărțită în trei panouri (marcate cu numere în imagine):

1 - Panou de fișiere conectate la pagina curenta, care conțin cod JavaScript.

2 - Panou în care va fi afișat codul JavaScript al fișierului selectat.

3 - Panou cu setari aditionale, simplificând depanarea.

Setarea unui punct de întrerupere sau a unui punct de întrerupere

Pentru a începe depanarea aplicației, trebuie să determinați în ce stadiu se va opri execuția scriptului. Pentru a face acest lucru, ca și în cazul majorității altor instrumente de depanare, trebuie să setați un punct de întrerupere sau un punct de întrerupere.

Punct de întrerupere) - un semn care îi spune depanatorului în ce moment al execuției aplicației să întrerupă.

Mai întâi, trebuie să selectați fișierul în care va fi efectuată depanarea JavaScript (pentru a face acest lucru, faceți dublu clic pe fișierul index.html)

După aceea, setați un punct de întrerupere făcând clic pe numărul liniei din panoul central, care afișează codul fișierului selectat. Punctul de întrerupere este afișat ca un dreptunghi albastru. Acum, dacă reîmprospătați pagina, scriptul ar trebui să ruleze la linia 9 și să se oprească. Apoi, putem depana pas cu pas aplicația și monitoriza valorile variabilelor din script.

Unul dintre avantajele depanatorului este afișarea erorilor aruncate de interpret. Pe linia 14, mesajul este afișat - Uncaught TypeError: Nu se poate seta proprietatea „innerHTML” de null. Această postare poate ajuta deja la rezolvarea problemei scriptului. Scriptul încearcă să acceseze o proprietate pe o variabilă div - mesajul spune că această variabilă este nulă, iar valorile proprietăților nu pot fi setate pentru nul. Dacă variabila conține null, atunci trebuie să căutați codul care scrie valoarea în variabilă.

Depanare JavaScript pas cu pas

După instalarea punctului de întrerupere, trebuie să începeți depanarea. Pentru a face acest lucru, trebuie doar să reîmprospătați pagina (F5). Dacă a existat un punct de întrerupere, scriptul s-a oprit la linia nr. 9 (acest lucru este indicat de evidențierea albastră a liniei).

Din când în când, dezvoltatorii fac greșeli de codare. O eroare într-un program sau script se numește bug.

Procesul de găsire și remediere a erorilor se numește depanare și este o parte normală a procesului de dezvoltare. Această secțiune discută instrumente și tehnici care vă pot ajuta să remediați sarcinile.

Mesaje de eroare în IE

Cel mai simplu mod de a urmări erorile este să activați raportarea erorilor în browser. Mod implicit Internet Explorer afișează o pictogramă de eroare în bara de stare atunci când apare o eroare pe pagină.

Făcând dublu clic pe această pictogramă, veți ajunge la o casetă de dialog care afișează informații despre eroarea specifică.

Deoarece această pictogramă poate fi trecută cu ușurință cu vederea, Internet Explorer vă oferă opțiunea de a afișa automat o casetă de dialog Eroare ori de câte ori apare o eroare.

Pentru a activa această opțiune, selectați Instrumente → Opțiuni Internet → fila Avansat. și apoi bifați în sfârșit caseta de selectare „Afișați notificarea pentru fiecare script”, așa cum se arată mai jos -

Mesaje de eroare în Firefox sau Mozilla

Alte browsere, cum ar fi Firefox, Netscape și Mozilla, trimit mesaje de eroare către o fereastră specială numită Consola JavaScript sau Consola de erori. Pentru a vizualiza consola, selectați Tools → Error Console sau Web Development.

Din păcate, deoarece aceste browsere nu oferă informatii vizuale când apare o eroare, ar trebui să păstrați consola deschisă și să urmăriți erorile pe măsură ce rulează scriptul.

Notificări de eroare

Notificări de eroare afișate în consolă sau prin casete de dialog Erorile din Internet Explorer sunt rezultatul erorilor de sintaxă și de rulare. Aceste notificări de eroare includ numărul liniei în care a apărut eroarea.

Dacă utilizați Firefox, puteți face clic pe eroarea disponibilă în consola de erori pentru a accesa linie exactăîn script cu o eroare.

Cum se depanează un script

Exista diferite căi depanarea JavaScript - Utilizați JavaScript Validator

O modalitate de a verifica Cod JavaScript pentru erori ciudate, rulați-l printr-un program care îl verifică pentru a vă asigura că este valid și că respectă regulile oficiale de sintaxă ale limbii. Aceste programe se numesc parseri sau doar validatoare pe scurt și vin adesea cu reclame Editore HTMLși JavaScript.

Cel mai convenabil validator pentru JavaScript este JavaScript Lint al lui Douglas Crockford, care este disponibil gratuit în JavaScript Lint al lui Douglas Crockford.

Pur și simplu vizitați această pagină web, inserați codul JavaScript (numai JavaScript) în zona de text furnizată și faceți clic pe butonul jslint. Acest program va analiza codul JavaScript, asigurându-se că urmează toate definițiile variabilelor și funcțiilor sintaxa corecta. Va verifica si el Instrucțiuni JavaScript, cum ar fi if și while, astfel încât să urmeze și formatul corect

Adăugați cod de depanare la programele dvs

Puteți utiliza metodele alert() sau document.write() în programul dumneavoastră pentru a vă depana codul. De exemplu, ai putea scrie ceva de genul:

var debugging = adevărat; var whichImage = "widget"; if(debugging) alert("Apelează swapImage() cu argument: " + whichImage); var swapStatus = swapImage(whichImage); if(debugging) alert("Iese din swapImage() cu swapStatus=" + swapStatus);

Examinând conținutul și ordinea alertei() așa cum apar, puteți testa cu ușurință funcționalitatea programului dvs.

Cum să utilizați JavaScript Debugger

Un depanator este o aplicație în care toate aspectele execuției scriptului sunt sub controlul programatorului. Depanatoarele oferă un control fin asupra stării unui script printr-o interfață care vă permite să inspectați și să setați valori și să controlați fluxul de execuție.

Odată ce scriptul este încărcat în depanator, acesta poate fi rulat câte o linie sau instruit să se oprească la anumite puncte de control. Când execuția este oprită, programatorul poate verifica starea scriptului și a variabilelor acestuia pentru a determina dacă ceva este greșit. De asemenea, puteți vizualiza variabilele pentru a le modifica valorile.

  • Folosește o mulțime de comentarii. Comentariile vă permit să explicați de ce ați scris scriptul așa cum ați făcut și să explicați secțiuni deosebit de dificile ale codului.
  • Folosiți întotdeauna indentarea pentru a face codul ușor de citit. Indentarea vă ajută, de asemenea, să potriviți etichetele de început și de sfârșit, acolade și altele elemente HTMLși scenariu.
  • Scrieți cod modular. Ori de câte ori este posibil, grupați declarațiile dvs. în funcții. Funcțiile vă permit să grupați declarații asociate și să testați și să reutilizați bucăți de cod cu un efort minim.
  • Fiți consecvenți în modul în care vă denumiți variabilele și funcțiile. Încercați să utilizați nume suficient de lungi pentru a fi semnificative și pentru a descrie conținutul unei variabile sau scopul unei funcții.
  • Utilizați sintaxă consecventă atunci când denumiți variabile și funcții. Cu alte cuvinte, păstrați-le litere mici sau mari; dacă preferați notația Camel-Back, utilizați-o în mod constant.
  • Verificați scripturile lungi într-un mod modular. Cu alte cuvinte, nu încercați să scrieți întregul script înainte de a testa orice parte a acestuia. Scrieți partea și rulați-o înainte de a adăuga următoarea parte a codului.
  • Utilizați nume descriptive pentru variabile și funcții și evitați utilizarea numelor cu un singur caracter.
  • Atenție la citate. Amintiți-vă că ghilimelele sunt folosite în perechi în jurul șirurilor de caractere și că ambele ghilimele trebuie să aibă același stil (unul sau două).
  • Urmăriți semnele de egalitate. Nu ar trebui să utilizați unul = în scopuri de comparație.
  • Declar în mod explicit variabile folosind cuvânt cheie var.

Firebug conține un depanator AvaScript puternic care vă oferă posibilitatea de a întrerupe execuția în orice moment și de a vizualiza fiecare variabilă în acel moment. Dacă codul dvs. este lent, utilizați un profiler JavaScript pentru a măsura performanța și a găsi rapid blocajele.

Găsiți scripturi cu ușurință

Multe aplicații web constau în un numar mare fișiere, iar găsirea celui de depanat poate fi o sarcină de rutină și plictisitoare. Meniul de selecție a scripturilor Firebug sortează și organizează fișierele într-o listă clară, ușor de înțeles, care vă ajută să găsiți orice fișier cu un clic de deget.

Întrerupeți execuția la orice linie

Firebug vă permite să setați puncte de întrerupere, care îi spun depanatorului să nu mai execute scriptul când ajunge șir specific. În timp ce execuția este suspendată, puteți vizualiza valorile oricăror variabile și puteți inspecta obiectele.

Pentru a seta un punct de întrerupere, faceți clic pe orice număr de linie și acolo va apărea un punct roșu, indicând că punctul de întrerupere a fost setat. Faceți clic din nou pe punctul roșu pentru a elimina punctul de întrerupere.

Întrerupeți execuția numai dacă...

Punctele de întrerupere pot cauza probleme dacă sunt declanșate prea des. Uneori dorim să întrerupem execuția doar atunci când sunt îndeplinite anumite condiții. Firebug vă permite să setați puncte de întrerupere „condiționale”. Ei verifică o expresie care trebuie să fie adevărată pentru ca punctul de întrerupere să funcționeze.

Pentru a seta un punct de întrerupere condiționat, pur și simplu faceți clic dreapta pe orice număr de linie. Va apărea un balon care vă va cere să introduceți o expresie javascript. Puteți face clic dreapta din nou în orice moment pentru a schimba expresia sau puteți face clic stânga pentru a scăpa de punctul de întrerupere.

Cu pasi marunti

Când depanatorul a întrerupt execuția, puteți continua scriptul pas câte unul. Acest lucru vă permite să vedeți clar modul în care executarea unei anumite linii afectează variabilele și obiectele.

De asemenea, puteți continua execuția pentru mai mult de o linie. Selectați în meniul contextual linia dorită „Run to this Line” pentru a continua execuția pe această linie.

Sunt întrerupt când fac greșeli

Nu întotdeauna alegeți depanatorul... Uneori, depanatorul vă alege pe dvs. Firebug vă oferă posibilitatea de a trece automat în depanator atunci când apare o eroare, astfel încât să puteți investiga condițiile în care a apărut problema.

Stivă desfăcută

Când depanatorul se întrerupe, Firebug vă arată stiva de apeluri, care este colecția de apeluri de funcții imbricate care rulează în prezent și așteaptă să revină.

Stiva de apeluri este reprezentată de o bandă compactă de butoane din panou, fiecare cu numele unei funcții de pe stivă. Puteți face clic pe orice buton pentru a sări la linia în care funcția este întreruptă și pentru a vedea valorile variabilelor locale din interiorul funcției.

Vizionarea expresiei

Când depanați, doriți adesea să vedeți semnificația expresiilor complexe sau a obiectelor care sunt îngropate în DOM. Firebug vă permite să imprimați o expresie javascript arbitrară, a cărei valoare va fi actualizată la fiecare pas de depanare.

Când tastați expresii, amintiți-vă că puteți utiliza Tasta Tab pentru completarea automată a proprietăților obiectului.

Sugestii variabile

În timp ce execuția este întreruptă, puteți muta mouse-ul peste orice variabilă functia curenta prin vizualizarea tooltips cu valori. Aceasta este o modalitate excelentă de a ține ochii pe cod și de a obține răspunsuri în timp ce citiți.

Performanță JavaScript de profil

Aplicația dvs. web este aproape perfectă. Ai rezolvat toate erorile, gata design elegant iar utilizatorilor le place. O singură problemă - unele funcții sunt lente și nu știți sigur de ce...

Cu Firebug, nu mai trebuie să vă întrebați de ce codul dvs. rulează lent. Folosind profilul Firebug, puteți separa muștele de cotlet în literalmente secunde.

Pentru a utiliza profiler, accesați fila Consolă și faceți clic pe butonul „Profil”. Apoi utilizați aplicația pentru o perioadă sau reîncărcați pagina și faceți clic din nou pe „Profil”. Veți vedea un raport detaliat care arată ce funcții au fost apelate și cât timp a durat fiecare.

Înregistrarea apelurilor la funcția

Uneori, funcția problematică este apelată de atâtea ori încât nu puteți intra de fiecare dată în depanator. Vrei doar să știi când este numit și cu ce parametri.

Pentru a urmări toate apelurile de funcții, faceți clic dreapta pe fila Script și selectați „Înregistrați apelurile către „numele funcției””. Apoi mergeți la consolă și urmăriți cum apar apelurile în jurnal...

Mergeți direct la linia 108

De multe ori doriți să mergeți clar la linia dorită a scriptului. Nu este nimic mai ușor, trebuie doar să tastați numărul liniei în fereastră cautare rapida, punând # primul, așa cum se arată în captura de ecran din stânga.