Depanarea Javascript linie cu linie folosind Google Chrome (Programare, Javascript, Jquery, Depanare, Google Chrome, Google Chrome Devtools)

oshirowanen a intrebat.

Cum pot să trec prin codul meu javascript linie cu linie folosind instrumentele de dezvoltare Google Chrome fără a intra în bibliotecile javascript?

De exemplu, folosesc foarte mult jQuery pe site-ul meu și vreau doar să depanez jQuery pe care l-am scris, și nu javascript/jquery din bibliotecile jquery. Cum pot să trec doar prin propriul meu jquery/javascript și să nu fiu nevoit să trec prin milioanele de linii din bibliotecile jquery?

Așadar, dacă am următoarele:

function getTabFrame() {
    $.ajax({
        url: 'get_tab_frame.aspx?rand=' + Math.random(),
        type: 'GET',
        dataType: 'json',
        error: function(xhr, status, error) {
            //alert('Error: ' + status + '
Error Text: ' + error + '
Response Text: ' + xhr.responseText);
        },
        success: function(data) {
            $.each(data, function(index, item) {
                // do something here
            });
        }
    });
}

dacă aș plasa punctul de întrerupere la $.ajax({, , dacă încep să fac debugging acolo unde se oprește, dacă apoi apăs F11, intră direct în bibliotecile jQuery. Nu vreau să se întâmple asta, vreau să treacă la următoarea linie, care este url: 'get_tab_frame.aspx?rand=' + Math.random(),.

Am încercat să apăs F10 în loc de F10, dar aceasta merge direct la închiderea } a funcției. Iar F5 merge doar la următorul punct de întrerupere fără a trece prin fiecare linie în parte.

Comentarii

  • Când întâmpinați în principal probleme? Atunci când vă loviți de excepții? –  > Por 2-bits.
  • Practic, am atât de mult javascript încât nu mai pot vedea structura lui în minte, așa că am vrut să trec prin propriul meu cod pentru a-mi aminti cum funcționează totul pentru a-mi da seama unde să caut problema… –  > Por oshirowanen.
  • Acest lucru sună foarte asemănător cu stackoverflow.com/questions/7827882/…  > Por rjmunro.
  • stackoverflow.com/a/19032178/3408 pare să fie răspunsul de care ai nevoie. –  > Por rjmunro.
  • S-ar putea să vă fie util și acest lucru: How-to-terminate-script-execution-when-debugging-in-Google-Chrome –  > Por cssyphus.
2 răspunsuri
Richard

Presupunând că rulezi pe o mașină Windows…

  1. Apăsați butonul F12 tasta
  2. Selectați Scripts, , sau Sources, , din instrumentele de dezvoltare
  3. Faceți clic pe pictograma micului folder de la nivelul superior
  4. Selectați fișier JavaScript
  5. Adăugați un punct de întrerupere făcând clic pe numărul liniei din stânga (adaugă un mic marker albastru)
  6. Executați JavaScript-ul dvs.

Apoi, în timpul depanării execuției, puteți face câteva mișcări de pas cu pas…

  • F8 Continuați: Va continua până la următorul punct de întrerupere
  • F10 Step over (Treceți peste): Trece peste următorul apel de funcție (nu va intră în bibliotecă)
  • F11 Trece în: Trece la următorul apel de funcție (va accesaintră în bibliotecă)
  • Shift + F11 Step out: Iese din funcția curentă

Actualizare

După ce am citit postarea dvs. actualizată; pentru a depana codul dvs. v-aș recomanda să folosiți temporar funcția Codul sursă de dezvoltare jQuery. Deși acest lucru nu rezolvă în mod direct problema dvs., vă va permite să depanați mai ușor. Pentru ceea ce încerci să realizezi cred că va trebui să intervii în bibliotecă, așa că sper că codul de producție ar trebui să te ajute să descifrezi ce se întâmplă.

Comentarii

  • Vă rugăm să consultați informațiile suplimentare din întrebarea mea pentru a da un exemplu de ceea ce se întâmplă. Am impresia că depanarea de tip pas cu pas linie cu linie nu este posibilă cu instrumentele pentru dezvoltatori ale Google Chrome? –  > Por oshirowanen.
  • Mi-am actualizat răspunsul, sper că ar trebui să vă ajute un pic mai mult. –  > Por Richard.
  • Dacă nu mă înșel foarte mult, în Chrome Developer tools, cred că F5 va reîmprospăta pagina; F8 este tasta de continuare, nu-i așa? –  > Por cori.
  • F5 va continua, de asemenea, până la sfârșit, moment în care va reîmprospăta –  > Por rickyduck.
  • ce se întâmplă dacă codul meu js este în interiorul fișierului Html? –  > Por Bhavik Joshi.
Igor Parra

…Cum pot să trec prin codul meu javascript linie cu linie folosind instrumentele de dezvoltare Google Chromes, fără ca acesta să intre în bibliotecile javascript?….


Pentru înregistrare: În acest moment (Feb/2015) atât Google Chrome cât și Firefox au exact ceea ce ai (și eu) nevoie pentru a evita să intri în biblioteci și scripturi și să treci dincolo de codul care ne interesează, Se numește Black Boxing:

Atunci când faceți blackboxing într-un fișier sursă, debuggerul nu va intra în acel fișier atunci când trece prin codul pe care îl depanați.

Mai multe informații:

Comentarii

  • Asta e tot, acest lucru este FOARTE util pentru depanare, vă mulțumesc. –  > Por S1awek.