Depanarea javascript


S-ar părea - ce trebuie să spui? Cu toate acestea, este evident. Dar această întrebare îmi este cerută cu o frecvență de invidiat. Da, și am ceva de spus.

Voi oferi exemple specifice și vă voi spune cum le rezolv.

Vedem obiectivul, nu vedem obstacole


Iată principalele browsere și instrumentele lor de depanare:
  • firefox:
    Toate plugin-urile Firebug preferate
  • Safari. Chrome:
    Built-in WebKit Web Inspector
  • Opera:
    Un minunat încoronat în Dragonfly
  • Internet Explorer 8:
    Instrumente de dezvoltare încorporate
  • Internet Explorer <= 7
    Există multe opțiuni:
    DebugBar. Companion.JS. prin MS Visual Studio ...
    Dar toate aceste lucruri nu mi-au prins cumva - ele sunt fie voluminoase, fie incomode, fie plătite :)
    Și am fost atras doar de Script Debugger. Este foarte spartan, dar are tot ce am nevoie.

În toate aceste instrumente de depanare, vom fi interesați de întreruperi:

Dar câteva "bunuri" - puncte de întrerupere condiționate (faceți clic dreapta pe "bryak"):

Asta este, am stabilit o variabilă globală (de exemplu) allowBreakpoints și "bryaks" va funcționa numai atunci când noi înșine dorim.
Din păcate, nu funcționează peste tot, așa că de obicei nu o folosesc.

Cum să "frânați" fluxul

Puteți folosi în siguranță în:
  • Firefox cu Firebug activat
  • Safari, Chrome cu panoul Web Inspector / Script deschis / activat
  • Internet Explorer 8 cu instrumente pentru dezvoltatori deschise / activate
  • Internet Explorer <= 7 с установленным Script Debugger
  • Opera cu Dragonfly deschis / activat

Și nu vă fie frică să scrieți un cod de depanare în codul dvs. - erorile nu o vor provoca nicăieri.

Dar opțiunea cu oprire condiționată:
dacă (allowBreakpoints == true)
depanator;

* Acest cod sursă a fost evidențiat prin marcatorul de coduri sursă.
Îmi place atât de mult mai mult decât punerea "crack": așa că am scris codul și depanare, de fapt, într-un singur loc, și nu în două.

Debugați prin alertă ()

Caracteristicile punctelor de oprire

De ce? Dacă în momentul în care scriptul a fost oprit, ați avut o solicitare AJAX sau un timeout și răspunsul nu sa întors - nu se mai poate întoarce. Sunt de acord, în proiectele web moderne, acest lucru este de ajuns. Prin urmare, în momentul unei "opriri de urgență" a scenariului, nu mai putem să îl depanem în mod adecvat - o anumită logică va fi pierdută iremediabil.

Așadar, încerc să evit în practică depanarea cu o oprire.

Depanarea "corectă"


Pe scurt: o logare bună prin depanare. Deci, practic, lucrez - în locul potrivit la momentul potrivit, funcționează console.log (.).

Da, despre console.log - pentru prima dată această metodă a văzut lumea, în măsura în care îmi amintesc, împreună cu Firebug. Nu, nu este standard și nu faptul că va funcționa în IE6. Cu toate acestea, browserele moderne introduc logarea exact ca console.log. Așa este, rețineți. Și dacă producția primește codul de la console.log (.) - fie în alertă, se poate rupe! Așadar, s-ar putea să renunțe la obiectul consola din codul dvs. Deci, pentru fiecare pompier.

Dacă browserul țintă nu are console.log. dar doriți - încercați Firebug Lite sau Blackbird. poate place;)

CASE:
Trebuie doar să codzi un cod. Spuneți, uitați-vă la ceea ce se întâmplă atunci când butonul este apăsat sau după încărcarea datelor AJAX.

Este mai greu să găsiți de unde să începeți.

O mică artă

// sau pur și simplu
depanator;

* Acest cod sursă a fost evidențiat prin marcatorul de coduri sursă.











Desigur, această metodă nu este ideală. Se întâmplă că dă bobble. Dar acesta este un mod bun, mă ajută foarte mult în munca mea.

Deci, înseamnă că am găsit un loc în cod, am creat bryak. Dacă nu doriți (sau nu puteți modifica) codul sursă - puteți pune punctul de frânare în depanator în loc de cuvântul cheie de depanare.

Deci:
  1. Căutați locul potrivit în același mod
  2. În loc de un depanator, scrie console.log (variable_to_watch)

Există upgrade-uri interesante.


variable_to_watch este un obiect care sa schimbat de la ieșirea la consola. Și vreau să-i văd statul în momentul chemării.

Aici este necesar să nu folosiți console.log (variable_to_watch). și console.dir (variable_to_watch)


Nu este nevoie doar să vedeți valoarea curentă a variabilei_pentru_watch. dar, de asemenea, experiment cu el (de exemplu, vreau să-i numesc metoda):
// să dorească să acceseze obiectul obj
dacă (debugEnabled)
console.log (fereastră.temp_var = obj);

* Acest cod sursă a fost evidențiat prin marcatorul de coduri sursă.
Astfel, vom vedea nu numai ieșirea din consola, ci și accesul la obiect printr-o referință globală la acesta: window.temp_var.

Deschideți Firebug-> Console și apelați metoda: temp_var.objMethod ().

Ce ar trebui să fac? Fac asta:

Creați un fișier cu un patch: my-ext-patch.js. și conectați-l afterext-all.js
În interiorul nostru scriem ceva de genul: (function () var _backup = Ext.form.Form.render; // Ne rezervăm metoda de redare a formularului - Capul;)

Ext.form.Form.render = funcția (container) // Și aici este depanarea
console.log (container);

Variantele posibile sunt:
// console.dir (container);
// console.log (window.t = container);
// debugger;

// Efectuați metoda inițială
returnați _backup.apply (aceste argumente);
>
>) ();

* Acest cod sursă a fost evidențiat prin marcatorul de coduri sursă.
O perversiune? Poate. Dar imi place :)

Sper că experiența mea va ajuta pe cineva.







Articole similare

Pagina anterioară

Pagina următoare

Trimiteți-le prietenilor: