Stampa il registro delle funzioni / traccia dello stack per l'intero programma utilizzando Firebug

Firebug ha la capacità di registrare le chiamate a un particolare nome di funzione. Sto cercando un bug che a volte interrompe il rendering di una pagina, ma non causa errori o avvisi. Il bug appare solo circa la metà delle volte. Quindi come ottengo un elenco di tutte le chiamate di funzione per l'intero programma o una sorta di traccia dello stack per l'esecuzione dell'intero programma?

Firefox fornisce console.trace() che è molto utile per stampare lo stack di chiamate. È disponibile anche in Chrome e IE 11 .

In alternativa, prova qualcosa di simile:

function print_call_stack() {
  var stack = new Error().stack;
  console.log("PRINTING CALL STACK");
  console.log( stack );
}

Quando ho bisogno di una traccia dello stack, faccio quanto segue, forse puoi trarne ispirazione:

function logStackTrace(levels) {
    var callstack = [];
    var isCallstackPopulated = false;
    try {
        i.dont.exist += 0; //doesn't exist- that's the point
    } catch (e) {
        if (e.stack) { //Firefox / chrome
            var lines = e.stack.split('\n');
            for (var i = 0, len = lines.length; i < len; i++) {
                    callstack.push(lines[i]);
            }
            //Remove call to logStackTrace()
            callstack.shift();
            isCallstackPopulated = true;
        }
        else if (window.opera && e.message) { //Opera
            var lines = e.message.split('\n');
            for (var i = 0, len = lines.length; i < len; i++) {
                if (lines[i].match(/^\s*[A-Za-z0-9\-_\$]+\(/)) {
                    var entry = lines[i];
                    //Append next line also since it has the file info
                    if (lines[i + 1]) {
                        entry += " at " + lines[i + 1];
                        i++;
                    }
                    callstack.push(entry);
                }
            }
            //Remove call to logStackTrace()
            callstack.shift();
            isCallstackPopulated = true;
        }
    }
    if (!isCallstackPopulated) { //IE and Safari
        var currentFunction = arguments.callee.caller;
        while (currentFunction) {
            var fn = currentFunction.toString();
            var fname = fn.substring(fn.indexOf("function") + 8, fn.indexOf("(")) || "anonymous";
            callstack.push(fname);
            currentFunction = currentFunction.caller;
        }
    }
    if (levels) {
        console.log(callstack.slice(0, levels).join('\n'));
    }
    else {
        console.log(callstack.join('\n'));
    }
};

Nota del moderatore : il codice in questa risposta sembra apparire anche in questo post dal blog di Eric Wenderlin . L'autore di questa risposta lo afferma come il proprio codice, tuttavia, scritto prima del post sul blog collegato qui. Solo per motivi di buona fede, ho aggiunto il link al post e questa nota.

L'ho realizzato senza Firebug. Testato sia in Chrome che in Firefox:

console.error("I'm debugging this code.");

Una volta che il programma lo stampa sulla console, puoi fare clic sulla piccola freccia per espandere lo stack di chiamate.

Prova a scorrere il codice una riga o una funzione alla volta per determinare dove smette di funzionare correttamente. Oppure fai alcune ipotesi ragionevoli e spargi le istruzioni di registrazione attraverso il tuo codice.

Prova questo:

console.trace()

Non so se è supportato su tutti i browser, quindi controllerei prima se esiste.