พิมพ์ฟังก์ชัน log / stack trace สำหรับทั้งโปรแกรมโดยใช้ firebug


95

Firebug มีความสามารถในการบันทึกการโทรไปยังชื่อฟังก์ชันเฉพาะ ฉันกำลังมองหาจุดบกพร่องที่บางครั้งทำให้หน้าไม่แสดงผล แต่ไม่ได้ทำให้เกิดข้อผิดพลาดหรือคำเตือนใด ๆ ข้อผิดพลาดจะปรากฏขึ้นประมาณครึ่งหนึ่งเท่านั้น ดังนั้นฉันจะรับรายการฟังก์ชันทั้งหมดที่เรียกใช้สำหรับโปรแกรมทั้งหมดหรือการติดตามสแต็กบางประเภทสำหรับการทำงานของโปรแกรมทั้งหมดได้อย่างไร

คำตอบ:


220

Firefox จัดเตรียม console.trace() ที่สะดวกมากในการพิมพ์ call stack มันยังมีอยู่ในChromeและIE 11

หรือลองทำสิ่งต่อไปนี้:

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

3
มีวิธีเพิ่มความยาวของกองหรือไม่? นั่นจะเป็นประโยชน์มาก
Ravi Teja

✚1 console.warn ('[WARN] CALL STACK:' ข้อผิดพลาดใหม่ (). stack);
user1742529

13

เมื่อฉันต้องการการติดตามสแต็กฉันทำสิ่งต่อไปนี้บางทีคุณอาจจะได้แรงบันดาลใจจากมัน:

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

หมายเหตุของผู้ดำเนินรายการ : ดูเหมือนว่าโค้ดในคำตอบนี้จะปรากฏในโพสต์นี้จากบล็อกของ Eric Wenderlinด้วย ผู้เขียนคำตอบนี้อ้างว่าเป็นรหัสของเขาเองซึ่งเขียนขึ้นก่อนบล็อกโพสต์ที่เชื่อมโยงที่นี่ ฉันได้เพิ่มลิงก์ไปยังโพสต์และบันทึกนี้ด้วยวัตถุประสงค์ของความสุจริตเท่านั้น


2
มีการโทร console.trace () ที่คุณสามารถทำได้ใน Firebug ที่ทำสิ่งนี้
amccormack

นี่เป็นสิ่งที่ยอดเยี่ยม Firebug มีปัญหากับไฟล์ที่ย่อขนาดสคริปต์นี้ทำได้!
pstadler

1
FWIW @ andrew-barber ผู้เขียนคำตอบไม่เคยอ้างว่าเป็นของเขาเอง ไม่ได้ระบุเพียงแค่แอตทริบิวต์ การแก้ไขของคุณควรเป็นความคิดเห็น
Ascherer

7

ฉันทำสิ่งนี้สำเร็จโดยไม่ต้องใช้ไฟ ผ่านการทดสอบทั้งใน Chrome และ firefox:

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

เมื่อโปรแกรมของคุณพิมพ์ไปยังคอนโซลคุณสามารถคลิกลูกศรเล็ก ๆ เพื่อขยาย call stack


2

ลองก้าวผ่านรหัสของคุณทีละบรรทัดหรือทีละฟังก์ชั่นเพื่อพิจารณาว่าจะหยุดทำงานอย่างถูกต้องที่ใด หรือคาดเดาอย่างสมเหตุสมผลและกระจายข้อความบันทึกผ่านรหัสของคุณ


2
นี้. เพิ่มconsole.log('something')คำสั่งจำนวนมากลงในฟังก์ชันของคุณอย่างแน่นอนเพื่อดูว่าข้อความใด (และไม่ได้) ถูกเรียก
Gareth

1
โปรแกรมมีขนาดใหญ่มากดังนั้นฉันจึงกำลังมองหาวิธีเปรียบเทียบบันทึกฟังก์ชันเมื่อโปรแกรมทำงานอย่างถูกต้องเทียบกับเมื่อไม่ทำงาน
amccormack

1
ฉันเห็นด้วยว่าสิ่งนี้จะเป็นประโยชน์ ฉันกำลังก้าวเข้าสู่การเป็นเจ้าของฐานรหัสขนาดใหญ่และสิ่งที่สามารถสร้างการติดตามการเรียกใช้ฟังก์ชันทั้งหมดจะช่วยให้เข้าใจถึงการไหล / รูปร่างของรหัสและตรวจจับรหัสที่ตายได้
Matthew Nichols

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.