Cetak log fungsi / jejak tumpukan untuk seluruh program menggunakan firebug

Firebug memiliki kemampuan untuk mencatat panggilan ke nama fungsi tertentu. Saya mencari bug yang terkadang menghentikan rendering halaman, tetapi tidak menyebabkan error atau peringatan apa pun. Bug hanya muncul sekitar separuh waktu. Jadi bagaimana cara mendapatkan daftar semua panggilan fungsi untuk seluruh program, atau semacam pelacakan tumpukan untuk eksekusi seluruh program?

Firefox menyediakan console.trace() yang sangat berguna untuk mencetak tumpukan panggilan. Ini juga tersedia di Chrome dan IE 11 .

Atau coba sesuatu seperti ini:

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

Ketika saya membutuhkan pelacakan tumpukan, saya melakukan hal berikut, mungkin Anda bisa menarik beberapa inspirasi darinya:

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'));
    }
};

Catatan Moderator : Kode dalam jawaban ini tampaknya juga muncul dalam posting ini dari blog Eric Wenderlin . Penulis jawaban ini mengklaimnya sebagai kodenya sendiri, ditulis sebelum posting blog yang ditautkan di sini. Hanya untuk tujuan itikad baik, saya telah menambahkan tautan ke kiriman dan catatan ini.

Saya mencapai ini tanpa firebug. Diuji di chrome dan firefox:

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

Setelah program Anda mencetaknya ke konsol, Anda dapat mengklik panah kecil ke sana untuk memperluas tumpukan panggilan.

Cobalah menelusuri kode Anda satu baris atau satu fungsi pada satu waktu untuk menentukan di mana ia berhenti bekerja dengan benar. Atau buat beberapa tebakan yang masuk akal dan sebarkan pernyataan logging melalui kode Anda.

Coba ini:

console.trace()

Saya tidak tahu apakah itu didukung di semua browser, jadi saya akan memeriksa apakah itu ada terlebih dahulu.