เกิดอะไรขึ้นกับ console.log ใน IE8


254

ตามโพสต์นี้มันอยู่ในรุ่นเบต้า แต่มันไม่ได้อยู่ในรุ่น?


65
console.log คือมีใน IE8 แต่consoleวัตถุที่ไม่ได้สร้างขึ้นจนกว่าคุณ DevTools เปิด ดังนั้นการเรียกไปยังconsole.logอาจทำให้เกิดข้อผิดพลาดตัวอย่างเช่นหากเกิดขึ้นกับการโหลดหน้าเว็บก่อนที่คุณจะมีโอกาสเปิดเครื่องมือ dev คำตอบที่ชนะที่นี่อธิบายในรายละเอียดมากขึ้น
SDC

คำตอบ:


229

ที่ดียิ่งขึ้นสำหรับทางเลือกคือ:


   var alertFallback = true;
   if (typeof console === "undefined" || typeof console.log === "undefined") {
     console = {};
     if (alertFallback) {
         console.log = function(msg) {
              alert(msg);
         };
     } else {
         console.log = function() {};
     }
   }


71
สิ่งนี้ไม่สามารถทำได้ - คุณจะแก้ไขข้อบกพร่องของเว็บไซต์ด้วยสิ่งที่ส่งการแจ้งเตือนสำหรับทุกการโทรไปยัง console.log () ได้อย่างไร จะเกิดอะไรขึ้นถ้าคุณมี 10 การโทรเพื่อเข้าสู่ระบบ () ในรหัสของคุณ จะเกิดอะไรขึ้นถ้าผงชูรสเป็นวัตถุ คำตอบของวอลเตอร์ทำให้รู้สึกมากกว่าเป็นจุดเริ่มต้น
แม่นยำ

7
@Precastic: ผู้คนจะหยุดใช้เบราว์เซอร์: P
Amogh Talpallikar

ดูความคิดเห็นของฉันเกี่ยวกับคำตอบของ Mister Lucky
Daniel Schilling

1
ทางเลือกอื่นที่ไม่เป็นการรบกวน (แต่ไม่สมบูรณ์) คือการตั้งค่า document.title อย่างน้อยมันก็ไม่ล็อคเบราว์เซอร์ด้วยคำเตือน modal
brennanyoung

257

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

ฉันอาจจะใช้สิ่งนี้:

function trace(s) {
  if ('console' in self && 'log' in console) console.log(s)
  // the line below you might want to comment out, so it dies silent
  // but nice for seeing when the console is available or not.
  else alert(s)
}

และเรียบง่ายยิ่งขึ้น:

function trace(s) {
  try { console.log(s) } catch (e) { alert(s) }
}

11
ทั้งสองวิธีที่คุณไม่ควรโทรหา console.log อย่างสุ่มสี่สุ่มห้าเพราะเบราว์เซอร์ $ อื่นอาจไม่มีและทำให้เกิดข้อผิดพลาดกับ JavaScript +1
Kent Fredric

8
คุณอาจจะต้องการที่จะปิดร่องรอยก่อนที่จะปล่อย แต่อย่างใดแม้ว่า;)
เคนท์เฟรดริก

2
มันสมเหตุสมผลแล้วที่จะไม่เข้าสู่ระบบหากไม่มีเครื่องมือสำหรับนักพัฒนาเปิด แต่มันทำให้เกิดข้อยกเว้นหากการล้มเหลวอย่างเงียบ ๆ คือการตัดสินใจที่สับสนอย่างแท้จริงที่นี่
ehdv

4
ฉันต้องการชี้ให้เห็นข้อเสียของการห่อ console.log เช่นนี้ ... คุณจะไม่เห็นอีกต่อไปว่าการบันทึกของคุณมาจากไหน ฉันพบว่ามีประโยชน์มากในบางครั้งซึ่งเป็นเรื่องที่ผิดที่จะมีทุกบรรทัดของคอนโซลที่มาจากตำแหน่งเดียวกันในรหัสของคุณ
Martin Westin

2
alertคือความชั่วร้าย บางรหัสทำงานแตกต่างกันเมื่อมีการใช้การแจ้งเตือนเนื่องจากเอกสารสูญเสียการโฟกัสทำให้ข้อบกพร่องยิ่งยากที่จะวินิจฉัยหรือสร้างสิ่งที่ไม่เคยมีมาก่อน นอกจากนี้หากคุณทิ้งconsole.logรหัสการผลิตไว้โดยไม่ตั้งใจมันก็ไม่เป็นอันตราย (สมมติว่ามันไม่ระเบิด) - เพียงบันทึกไปยังคอนโซลอย่างเงียบ ๆ หากคุณทิ้งalertรหัสผลิตไว้โดยไม่ตั้งใจประสบการณ์ของผู้ใช้จะถูกทำลาย
Daniel Schilling

56

นี่คือคำตอบที่หลากหลายของฉัน ฉันต้องการเห็นข้อความที่บันทึกไว้จริงแม้ว่าฉันจะไม่ได้เปิดคอนโซล IE เมื่อพวกเขาถูกไล่ออกดังนั้นฉันจึงผลักพวกเขาเข้าสู่console.messagesอาร์เรย์ที่ฉันสร้างขึ้น ฉันยังเพิ่มฟังก์ชันconsole.dump()เพื่ออำนวยความสะดวกในการดูบันทึกทั้งหมด console.clear()จะล้างคิวข้อความ

โซลูชั่นนี้ยัง "จัดการ" วิธีคอนโซลอื่น ๆ (ซึ่งฉันเชื่อว่าทั้งหมดมาจากFirebug Console API )

ในที่สุดโซลูชันนี้อยู่ในรูปแบบของIIFEดังนั้นจึงไม่ก่อให้เกิดมลพิษทั่วโลก อาร์กิวเมนต์ฟังก์ชันทางเลือกถูกกำหนดไว้ที่ด้านล่างของรหัส

ฉันเพิ่งวางลงในไฟล์ JS หลักของฉันซึ่งรวมอยู่ในทุกหน้าและลืมมัน

(function (fallback) {    

    fallback = fallback || function () { };

    // function to trap most of the console functions from the FireBug Console API. 
    var trap = function () {
        // create an Array from the arguments Object           
        var args = Array.prototype.slice.call(arguments);
        // console.raw captures the raw args, without converting toString
        console.raw.push(args);
        var message = args.join(' ');
        console.messages.push(message);
        fallback(message);
    };

    // redefine console
    if (typeof console === 'undefined') {
        console = {
            messages: [],
            raw: [],
            dump: function() { return console.messages.join('\n'); },
            log: trap,
            debug: trap,
            info: trap,
            warn: trap,
            error: trap,
            assert: trap,
            clear: function() { 
                  console.messages.length = 0; 
                  console.raw.length = 0 ;
            },
            dir: trap,
            dirxml: trap,
            trace: trap,
            group: trap,
            groupCollapsed: trap,
            groupEnd: trap,
            time: trap,
            timeEnd: trap,
            timeStamp: trap,
            profile: trap,
            profileEnd: trap,
            count: trap,
            exception: trap,
            table: trap
        };
    }

})(null); // to define a fallback function, replace null with the name of the function (ex: alert)

ข้อมูลพิเศษบางอย่าง

บรรทัดvar args = Array.prototype.slice.call(arguments);จะสร้างอาร์เรย์จากargumentsวัตถุ นี้เป็นสิ่งจำเป็นเพราะข้อโต้แย้งไม่ได้จริงๆอาร์เรย์

trap()เป็นตัวจัดการเริ่มต้นสำหรับฟังก์ชัน API ใด ๆ ฉันส่งอาร์กิวเมนต์ไปที่messageเพื่อให้คุณได้รับบันทึกของอาร์กิวเมนต์ที่ถูกส่งผ่านไปยังการเรียก API ใด ๆ (ไม่ใช่แค่console.log)

แก้ไข

ฉันเพิ่มอาร์เรย์พิเศษที่จับข้อโต้แย้งตรงตามที่ส่งผ่านไปยังconsole.raw trap()ฉันรู้ว่าargs.join(' ')กำลังแปลงวัตถุเป็นสตริง"[object Object]"ซึ่งบางครั้งอาจไม่เป็นที่ต้องการ ขอบคุณbfontaineสำหรับข้อเสนอแนะ


4
+1 นี่เป็นทางออกเดียวที่เริ่มมีเหตุผล ในโลกที่คุณไม่ต้องการเห็นข้อความที่คุณส่งไปยังคอนโซลอย่างชัดเจน!
แม่นยำ

คำตอบที่ดี ชอบบทความของ IIFE ที่คุณพูดถึงอาจเป็นหนึ่งในสิ่งที่ดีที่สุดที่ฉันได้อ่านมา คุณช่วยอธิบายรายละเอียดของtrapฟังก์ชั่นสองบรรทัดนี้ได้var args = Array.prototype.slice.call(arguments); var message = args.join(' ');ไหม? ทำไมคุณส่งข้อโต้แย้งผ่านสิ่งนี้ไปยังข้อความ
user1555863

1
@ user1555863 ฉันได้อัปเดตคำตอบเพื่อตอบคำถามของคุณแล้วโปรดดูหัวข้อด้านล่างรหัส
วอลเตอร์ Stabosz

1
ฉันคิดว่าบรรทัดที่สองของฟังก์ชั่น "console.clear ()" ควรอ่าน "console.raw.length = 0" แทนที่จะเป็น "console.row.length = 0"
Steve J

52

มันน่าสังเกตว่า console.logใน IE8 ไม่ใช่ฟังก์ชั่น Javascript จริง ไม่รองรับapplyหรือcallวิธีการ


3
+1 นี่เป็นข้อผิดพลาดที่แม่นยำของฉันเมื่อเช้านี้ ฉันพยายามที่จะใช้อาร์กิวเมนต์เพื่อ console.log และ IE8 กำลังเกลียดฉัน
แบร์นฮาร์ดฮอฟมันน์

[ตลก] Microsoft กล่าวว่า "ไม่ปลอดภัยสำหรับเราที่จะให้คนอื่นเขียนทับคอนโซลวัตถุ": /
Tom Roggero

1
ฉันใช้: console.log=Function.prototype.bind.call(console.log,console);เพื่อหลีกเลี่ยงสิ่งนี้
mowwwalker

1
IE8 bindไม่ได้
katspaugh

44

สมมติว่าคุณไม่สนใจทางเลือกในการแจ้งเตือนนี่เป็นวิธีที่กระชับยิ่งขึ้นในการแก้ไขข้อบกพร่องของ Internet Explorer:

var console=console||{"log":function(){}};

+1 เนื่องจากฉันกำหนดขอบเขตโค้ดของฉันในฟังก์ชันที่ไม่ระบุชื่อการวางคอนโซลไว้ในตัวแปรเช่นนี้เป็นทางออกที่ดีที่สุดสำหรับฉัน ช่วยให้ฉันไม่รบกวนการทำงานของส่วนควบคุมคอนโซลอื่นที่เกิดขึ้นในไลบรารีอื่น
Codesleuth

2
คุณต้องการเริ่มการบันทึกทันทีที่เปิดเครื่องมือสำหรับนักพัฒนา หากคุณวางโซลูชันนี้ในขอบเขตที่ยาวนาน (เช่นลงทะเบียนฟังก์ชั่นภายในเป็นการโทรกลับ) มันจะยังคงใช้การสำรองข้อมูลแบบเงียบ
Beni Cherniavsky-Paskin

+ 1 / -1 = 0: +1 เนื่องจากโซลูชันควรเป็นพื้นฐานมากกว่าการป้องกัน console.logs ไม่ให้แตกเว็บไซต์ใน IE - ไม่ได้ใช้เพื่อดีบั๊ก ... ถ้าคุณต้องการดีบั๊กเพียงกด f12 แล้วเปิดคอนโซล: ) -1 เนื่องจากคุณควรตรวจสอบว่ามีคอนโซลอยู่ก่อนเขียนทับหรือไม่
1nfiniti

ปลั๊กอิน IE บางตัวจะกำหนดคอนโซลและ console.log แต่เป็นวัตถุเปล่าไม่ใช่ฟังก์ชั่น
แม่น้ำลิลิ ธ

24

ฉันชอบวิธีที่โพสต์โดย "orange80" มันสวยงามเพราะคุณสามารถตั้งค่าได้ครั้งเดียวและลืมมัน

วิธีการอื่นต้องการให้คุณทำสิ่งที่แตกต่าง (เรียกว่าสิ่งอื่นที่ไม่ใช่ธรรมดาconsole.log()ทุกครั้ง) ซึ่งเป็นเพียงการขอปัญหา ... ฉันรู้ว่าฉันจะลืมในที่สุด

ฉันได้ดำเนินการขั้นตอนต่อไปโดยใส่รหัสในฟังก์ชั่นยูทิลิตี้ที่คุณสามารถโทรครั้งแรกของ javascript ของคุณทุกที่ตราบใดที่มันก่อนที่จะเข้าสู่ระบบใด ๆ (ฉันกำลังติดตั้งสิ่งนี้ในผลิตภัณฑ์เราเตอร์ข้อมูลเหตุการณ์ของ บริษัท มันจะช่วยให้การออกแบบข้ามเบราว์เซอร์ของอินเทอร์เฟซผู้ดูแลระบบใหม่ง่ายขึ้น)

/**
 * Call once at beginning to ensure your app can safely call console.log() and
 * console.dir(), even on browsers that don't support it.  You may not get useful
 * logging on those browers, but at least you won't generate errors.
 * 
 * @param  alertFallback - if 'true', all logs become alerts, if necessary. 
 *   (not usually suitable for production)
 */
function fixConsole(alertFallback)
{    
    if (typeof console === "undefined")
    {
        console = {}; // define it if it doesn't exist already
    }
    if (typeof console.log === "undefined") 
    {
        if (alertFallback) { console.log = function(msg) { alert(msg); }; } 
        else { console.log = function() {}; }
    }
    if (typeof console.dir === "undefined") 
    {
        if (alertFallback) 
        { 
            // THIS COULD BE IMPROVED… maybe list all the object properties?
            console.dir = function(obj) { alert("DIR: "+obj); }; 
        }
        else { console.dir = function() {}; }
    }
}

1
ดีใจที่คุณชอบ :-) ฉันใช้มันด้วยเหตุผลที่คุณพูดถึง - b / c มันปลอดภัยดี มันเป็นวิธีที่ง่ายเกินไปที่จะวางคำสั่ง "console.log" ในรหัสของคุณเพื่อการพัฒนาและลืมที่จะลบออกในภายหลัง อย่างน้อยถ้าคุณทำเช่นนี้และวางไว้ที่ด้านบนสุดของทุกไฟล์ที่คุณใช้ console.log คุณจะไม่มีทางที่เว็บไซต์จะทำลายเบราว์เซอร์ของลูกค้าได้โดยที่พวกเขาล้มเหลวใน console.log ช่วยฉันก่อน! การปรับปรุงที่ดี btw :-)
jpswain

1
"มันเป็นวิธีที่ง่ายเกินไปที่จะ ... ลืมที่จะลบ" สิ่งหนึ่งที่มีประโยชน์ที่ฉันทำกับบันทึกการดีบักชั่วคราวเสมอคือคำนำหน้ารหัสที่มีความคิดเห็นที่ว่างเปล่า/**/console.log("...");ดังนั้นจึงง่ายต่อการค้นหาและค้นหารหัสชั่วคราว
Lawrence Dol

8

หากคุณได้รับ "undefined" จากการโทร console.log ทั้งหมดของคุณนั่นอาจหมายความว่าคุณยังมีการโหลด firebuglite เก่า (firebug.js) จะแทนที่ฟังก์ชันที่ถูกต้องทั้งหมดของ console.log ของ IE8 แม้ว่าจะมีอยู่ นี่คือสิ่งที่เกิดขึ้นกับฉันต่อไป

ตรวจสอบรหัสอื่น ๆ ที่แทนที่วัตถุคอนโซล


5

ทางออกที่ดีที่สุดสำหรับเบราว์เซอร์ที่ไม่มีคอนโซลคือ:

// Avoid `console` errors in browsers that lack a console.
(function() {
    var method;
    var noop = function () {};
    var methods = [
        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
        'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
        'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
        'timeStamp', 'trace', 'warn'
    ];
    var length = methods.length;
    var console = (window.console = window.console || {});

    while (length--) {
        method = methods[length];

        // Only stub undefined methods.
        if (!console[method]) {
            console[method] = noop;
        }
    }
}());

1
นี่เป็นปัญหาที่เห็นได้ชัดว่าวัตถุหรือสตริงที่บันทึกโดยใช้ console.group หรือ consoleGroupCollapsed จะหายไปอย่างสมบูรณ์ สิ่งนี้ไม่จำเป็นพวกมันควรถูกแม็พกับ console.log หากพร้อมใช้งาน
เบ็น

3

มีคำตอบมากมาย วิธีแก้ปัญหาของฉันคือ:

globalNamespace.globalArray = new Array();
if (typeof console === "undefined" || typeof console.log === "undefined") {
    console = {};
    console.log = function(message) {globalNamespace.globalArray.push(message)};   
}

ในระยะสั้นหาก console.log ไม่มีอยู่ (หรือในกรณีนี้ไม่ได้เปิด) จากนั้นจัดเก็บบันทึกในอาร์เรย์ทั่วโลก ด้วยวิธีนี้คุณจะไม่ถูกรบกวนด้วยการเตือนนับล้านและคุณยังสามารถดูบันทึกของคุณโดยเปิดหรือปิดคอนโซลนักพัฒนาซอฟต์แวร์


2
if (window.console && 'function' === typeof window.console.log) {
    window.console.log (o);
}

คุณกำลังบอกว่าwindow.console.log()อาจมีใน IE8 แม้ว่าconsole.log()จะไม่ใช่
LarsH

ปัญหาตรงนี้ก็คือtypeof window.console.log === "object"ไม่ใช่"function"
Isochronous

2

นี่คือ "IE โปรดอย่าผิดพลาด" ของฉัน

typeof console=="undefined"&&(console={});typeof console.log=="undefined"&&(console.log=function(){});

1

ฉันพบสิ่งนี้ในGitHub :

// usage: log('inside coolFunc', this, arguments);
// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function f() {
    log.history = log.history || [];
    log.history.push(arguments);
    if (this.console) {
        var args = arguments,
            newarr;
        args.callee = args.callee.caller;
        newarr = [].slice.call(args);
        if (typeof console.log === 'object') log.apply.call(console.log, console, newarr);
        else console.log.apply(console, newarr);
    }
};

// make it safe to use console.log always
(function(a) {
    function b() {}
    for (var c = "assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","), d; !! (d = c.pop());) {
        a[d] = a[d] || b;
    }
})(function() {
    try {
        console.log();
        return window.console;
    } catch(a) {
        return (window.console = {});
    }
} ());

1

ฉันใช้วิธีการของวอลเตอร์จากด้านบน (ดู: https://stackoverflow.com/a/14246240/3076102 )

ฉันผสมในโซลูชันที่ฉันพบที่นี่https://stackoverflow.com/a/7967670เพื่อแสดงวัตถุอย่างถูกต้อง

นี่หมายความว่าฟังก์ชั่นกับดักกลายเป็น:

function trap(){
    if(debugging){
        // create an Array from the arguments Object           
        var args = Array.prototype.slice.call(arguments);
        // console.raw captures the raw args, without converting toString
        console.raw.push(args);
        var index;
        for (index = 0; index < args.length; ++index) {
            //fix for objects
            if(typeof args[index] === 'object'){ 
                args[index] = JSON.stringify(args[index],null,'\t').replace(/\n/g,'<br>').replace(/\t/g,'&nbsp;&nbsp;&nbsp;');
            }
        }
        var message = args.join(' ');
        console.messages.push(message);
        // instead of a fallback function we use the next few lines to output logs
        // at the bottom of the page with jQuery
        if($){
            if($('#_console_log').length == 0) $('body').append($('<div />').attr('id', '_console_log'));
            $('#_console_log').append(message).append($('<br />'));
        }
    }
} 

ฉันหวังว่านี้จะเป็นประโยชน์:-)


0

มันทำงานได้ใน IE8 เปิดเครื่องมือนักพัฒนาซอฟต์แวร์ของ IE8 โดยกดปุ่ม F12

>>console.log('test')
LOG: test

6
ปัญหานี้ "ไม่ได้กำหนด" ในกรณีของฉัน
acme

6
ดังที่ Mister Lucky ชี้ให้เห็น: "console.log จะใช้ได้เฉพาะหลังจากที่คุณเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ (F12 เพื่อสลับเปิดและปิด)"
The Silencer

0

ฉันชอบวิธีนี้ (โดยใช้ doc ของ jquery) ... มันช่วยให้คุณใช้คอนโซลได้แม้กระทั่งใน ... เฉพาะการจับคือคุณต้องโหลดหน้าเว็บซ้ำถ้าคุณเปิดเครื่องมือ dev ของหน้านี้หลังจากโหลดหน้าเว็บ ...

มันอาจสั่นด้วยการบัญชีสำหรับฟังก์ชั่นทั้งหมด แต่ฉันใช้บันทึกเท่านั้นนี่คือสิ่งที่ฉันทำ

//one last double check against stray console.logs
$(document).ready(function (){
    try {
        console.log('testing for console in itcutils');
    } catch (e) {
        window.console = new (function (){ this.log = function (val) {
            //do nothing
        }})();
    }
});

0

นี่คือรุ่นที่จะเข้าสู่คอนโซลเมื่อเครื่องมือของนักพัฒนาซอฟต์แวร์เปิดอยู่และจะไม่ปิดเมื่อใด

(function(window) {

   var console = {};
   console.log = function() {
      if (window.console && (typeof window.console.log === 'function' || typeof window.console.log === 'object')) {
         window.console.log.apply(window, arguments);
      }
   }

   // Rest of your application here

})(window)

ดีว่ามันถูก จำกัด ในขอบเขตสามารถรองรับกรณีที่ IE8 DevTools เปิดอยู่ในช่วงกลางของการเรียกใช้โค้ด แต่มันไม่ทำงานใน IE8, console.log เป็นวัตถุดังนั้นจึงไม่มีapplyวิธี
Nishi

0

สร้างคอนโซลของคุณเองใน html .... ;-) สิ่งนี้สามารถ imprved แต่คุณสามารถเริ่มต้นด้วย:

if (typeof console == "undefined" || typeof console.log === "undefined") {
    var oDiv=document.createElement("div");
    var attr = document.createAttribute('id'); attr.value = 'html-console';
    oDiv.setAttributeNode(attr);


    var style= document.createAttribute('style');
    style.value = "overflow: auto; color: red; position: fixed; bottom:0; background-color: black; height: 200px; width: 100%; filter: alpha(opacity=80);";
    oDiv.setAttributeNode(style);

    var t = document.createElement("h3");
    var tcontent = document.createTextNode('console');
    t.appendChild(tcontent);
    oDiv.appendChild(t);

    document.body.appendChild(oDiv);
    var htmlConsole = document.getElementById('html-console');
    window.console = {
        log: function(message) {
            var p = document.createElement("p");
            var content = document.createTextNode(message.toString());
            p.appendChild(content);
            htmlConsole.appendChild(p);
        }
    };
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.