Apa yang terjadi dengan console.log di IE8?


254

Menurut posting ini, ini masih dalam versi beta, tetapi tidak dalam rilis?


65
console.log adalah ada di IE8, namun consoleobjek tidak diciptakan sampai Anda DevTools terbuka. Oleh karena itu, panggilan ke console.logdapat mengakibatkan kesalahan, misalnya jika terjadi pada pemuatan halaman sebelum Anda memiliki kesempatan untuk membuka alat dev. The jawaban menang di sini menjelaskan hal itu secara lebih rinci.
SDC

Jawaban:


229

Yang lebih baik untuk mundur adalah ini:


   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
Ini sangat tidak praktis - bagaimana Anda bisa men-debug situs web dengan sesuatu yang membuat peringatan untuk setiap panggilan ke console.log (). Bagaimana jika Anda memiliki 10+ panggilan untuk log () di kode Anda. Bagaimana jika msg adalah objek? Jawaban Walter jauh lebih masuk akal, sebagai titik awal.
Precastic

7
@Precastic: Orang-orang hanya akan berhenti menggunakan browser: P
Amogh Talpallikar

Lihat komentar saya pada jawaban Tuan Lucky.
Daniel Schilling

1
fallback alternatif yang tidak mengganggu (walaupun tidak sempurna) adalah dengan mengatur document.title. Setidaknya itu tidak mengunci browser dengan peringatan modal.
brennanyoung

257

console.log hanya tersedia setelah Anda membuka Alat Pengembang (F12 untuk mengaktifkannya terbuka dan ditutup). Lucunya, setelah Anda membukanya, Anda dapat menutupnya, lalu tetap mempostingnya melalui panggilan console.log, dan itu akan terlihat saat Anda membukanya kembali. Saya berpikir itu semacam bug, dan mungkin diperbaiki, tetapi kita akan lihat nanti.

Saya mungkin akan menggunakan sesuatu seperti ini:

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

dan bahkan lebih sederhana:

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

11
Either way Anda tidak boleh memanggil console.log secara membabi buta karena $ other-browser mungkin tidak memilikinya dan karenanya mati dengan kesalahan JavaScript. +1
Kent Fredric

8
Anda mungkin ingin mematikan jejak sebelum rilis bagaimanapun;)
Kent Fredric

2
Masuk akal untuk tidak login tanpa alat pengembang terbuka, tetapi membuatnya mengeluarkan pengecualian jika daripada gagal diam-diam adalah keputusan yang membingungkan sebenarnya di sini.
ehdv

4
Saya ingin menunjukkan sisi negatifnya untuk membungkus console.log seperti ini ... Anda tidak akan melihat lagi dari mana logging Anda berasal. Saya menemukan bahwa kadang-kadang sangat berguna di atas yang kelihatannya salah untuk memiliki setiap baris konsol yang berasal dari lokasi yang sama persis dalam kode Anda.
Martin Westin

2
alertitu jahat. Beberapa kode berperilaku berbeda ketika peringatan digunakan karena dokumen kehilangan fokus, membuat bug lebih sulit untuk didiagnosis atau dibuat yang tidak ada sebelumnya. Juga, jika Anda secara tidak sengaja meninggalkan console.logkode produksi Anda, itu jinak (dengan asumsi itu tidak meledak) - hanya diam log ke konsol. Jika Anda secara tidak sengaja meninggalkan alertkode produksi Anda, pengalaman pengguna hancur.
Daniel Schilling

56

Inilah pendapat saya tentang berbagai jawaban. Saya ingin benar-benar melihat pesan yang dicatat, bahkan jika saya tidak memiliki konsol IE terbuka ketika mereka dipecat, jadi saya mendorong mereka ke dalam console.messagesarray yang saya buat. Saya juga menambahkan fungsi console.dump()untuk memudahkan melihat seluruh log. console.clear()akan mengosongkan antrian pesan.

Solusi ini juga "menangani" metode Konsol lainnya (yang saya yakin semuanya berasal dari Firebug Console API )

Akhirnya, solusi ini dalam bentuk IIFE , sehingga tidak mencemari ruang lingkup global. Argumen fungsi mundur didefinisikan di bagian bawah kode.

Saya hanya menjatuhkannya di file master JS saya yang disertakan pada setiap halaman, dan lupakan saja.

(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)

Beberapa info tambahan

Garis var args = Array.prototype.slice.call(arguments);menciptakan Array dari argumentsObjek. Ini diperlukan karena argumen sebenarnya bukan Array .

trap()adalah penangan default untuk salah satu fungsi API. Saya meneruskan argumen ke messagesehingga Anda mendapatkan log argumen yang diteruskan ke panggilan API apa pun (bukan hanya console.log).

Edit

Saya menambahkan array tambahan console.rawyang menangkap argumen persis seperti yang diteruskan trap(). Saya menyadari bahwa args.join(' ')itu mengubah objek menjadi string "[object Object]"yang terkadang tidak diinginkan. Terima kasih bfontaine untuk sarannya .


4
+1 Ini adalah satu-satunya solusi yang mulai masuk akal. Di dunia apa Anda tidak ingin melihat pesan yang Anda kirimkan secara eksplisit ke konsol!
Precastic

Jawaban yang bagus Sangat menyukai artikel IIFE yang Anda sebutkan, mungkin salah satu yang terbaik yang pernah saya baca sejauh ini. Bisakah Anda jelaskan apa tujuan kedua trapfungsi ini var args = Array.prototype.slice.call(arguments); var message = args.join(' ');:? Mengapa Anda menyampaikan argumen melalui ini ke pesan?
user1555863

1
@ user1555863 Saya telah memperbarui jawaban saya untuk menjawab pertanyaan Anda, lihat bagian di bawah kode.
Walter Stabosz

1
Saya pikir baris kedua fungsi "console.clear ()" Anda seharusnya membaca "console.raw.length = 0", alih-alih "console.row.length = 0".
Steve J

52

Perlu dicatat bahwa console.logdi IE8 bukan fungsi Javascript yang sebenarnya. Itu tidak mendukung applyatau callmetode.


3
+1 Ini adalah kesalahan tepat saya pagi ini. Saya mencoba menerapkan argumen ke console.log dan IE8 membenci saya.
Bernhard Hofmann

[lelucon] Microsoft mengatakan "tidak aman bagi kami untuk membiarkan kami menimpa objek konsol": /
Tom Roggero

1
Saya telah menggunakan: console.log=Function.prototype.bind.call(console.log,console);untuk menyiasati ini.
mowwwalker

1
IE8 tidak punya bind.
katspaugh

44

Dengan asumsi Anda tidak peduli dengan peringatan untuk mengingatkan, berikut adalah cara yang lebih ringkas untuk mengatasi kekurangan Internet Explorer:

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

+1 Karena saya meringkas kode saya dalam fungsi anonim, menempatkan konsol ke dalam variabel seperti ini adalah solusi terbaik bagi saya. Bantu saya untuk tidak mengganggu pengait konsol lain yang terjadi di perpustakaan lain.
Codesleuth

2
Anda ingin memulai pencatatan segera setelah alat pengembang dibuka. Jika Anda menempatkan solusi ini dalam ruang lingkup yang berumur panjang (misalnya mendaftarkan fungsi dalam sebagai panggilan balik), itu akan tetap menggunakan fallback diam.
Beni Cherniavsky-Paskin

+1 / -1 = 0: +1 karena solusinya harus lebih didasarkan pada mencegah console.logs dari menghancurkan situs di IE - tidak digunakan untuk debug ... Jika Anda ingin debug, tekan saja f12 dan buka konsol: ) -1 karena Anda harus memeriksa apakah konsol ada sebelum menimpanya.
1nfiniti

Beberapa plugin IE mendefinisikan console dan console.log, tetapi sebagai objek kosong, bukan fungsi.
Sungai Lilith

24

Saya sangat suka pendekatan yang diposting oleh "orange80". Elegan karena Anda dapat mengaturnya sekali dan melupakannya.

Pendekatan lain mengharuskan Anda untuk melakukan sesuatu yang berbeda (memanggil sesuatu selain polos console.log()setiap kali), yang hanya meminta masalah ... Saya tahu bahwa saya akhirnya akan lupa.

Saya telah mengambilnya selangkah lebih maju, dengan membungkus kode dalam fungsi utilitas yang dapat Anda panggil sekali di awal javascript Anda, di mana saja selama itu sebelum logging. (Saya memasang ini di produk router data acara perusahaan saya. Ini akan membantu menyederhanakan desain lintas-browser dari antarmuka admin yang baru.)

/**
 * 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
Senang Anda menyukainya :-) Saya menggunakannya untuk alasan yang tepat yang Anda sebutkan - b / c itu adalah keamanan yang baik. Terlalu mudah untuk menaruh beberapa pernyataan "console.log" dalam kode Anda untuk pengembangan dan lupa untuk menghapusnya nanti. Setidaknya jika Anda melakukan ini, dan meletakkannya di bagian atas setiap file tempat Anda menggunakan console.log, Anda tidak akan pernah memiliki situs yang melanggar browser pelanggan, tetapi gagal pada console.log. Menyelamatkan saya sebelumnya! Perbaikan bagus, btw :-)
jpswain

1
"Itu terlalu mudah untuk ... lupa untuk menghapusnya". Satu hal bermanfaat yang selalu saya lakukan dengan logging debug sementara adalah awalan kode dengan komentar kosong, /**/console.log("...");sehingga mudah untuk mencari dan menemukan kode sementara.
Lawrence Dol

8

Jika Anda mendapatkan "undefined" untuk semua panggilan console.log Anda, itu mungkin berarti Anda masih memuat firebuglite lama (firebug.js). Ini akan mengesampingkan semua fungsi valid dari console.log IE8 meskipun mereka ada. Inilah yang terjadi pada saya.

Periksa kode lain yang menimpa objek konsol.


5

Solusi terbaik untuk browser apa pun yang tidak memiliki konsol adalah:

// 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
Ini memiliki masalah mencolok yang objek atau string dicatat menggunakan console.group atau console.GroupCollapsed akan sepenuhnya hilang. Ini tidak perlu, mereka harus dipetakan ke console.log, jika tersedia.
Ben

3

Ada banyak Jawaban. Solusi saya untuk ini adalah:

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

Singkatnya, jika console.log tidak ada (atau dalam hal ini, tidak dibuka) maka simpan log dalam array namespace global. Dengan cara ini, Anda tidak direcoki dengan jutaan peringatan dan Anda masih dapat melihat log Anda dengan konsol pengembang dibuka atau ditutup.


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

Apakah Anda mengatakan bahwa window.console.log()mungkin tersedia di IE8 bahkan ketika console.log()tidak?
LarsH

Masalahnya di sini adalah bahwa typeof window.console.log === "object", tidak"function"
Isochronous

2

Inilah "IE saya, tolong jangan crash"

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

1

Saya menemukan ini di 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

Saya menggunakan pendekatan Walter dari atas (lihat: https://stackoverflow.com/a/14246240/3076102 )

Saya mencampur dalam solusi yang saya temukan di sini https://stackoverflow.com/a/7967670 untuk menampilkan Objek dengan benar.

Ini berarti fungsi perangkap menjadi:

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

Saya harap ini membantu :-)


0

Ia bekerja di IE8. Buka Alat Pengembang IE8 dengan menekan F12.

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

6
Masalah ini "tidak terdefinisi" dalam kasus saya.
acme

6
Seperti yang ditunjukkan Mister Lucky: "console.log hanya tersedia setelah Anda membuka Alat Pengembang (F12 untuk mengaktifkannya terbuka dan ditutup)."
Peredam

0

Saya suka metode ini (menggunakan jquery's doc ready) ... memungkinkan Anda menggunakan konsol bahkan dalam contoh ... hanya menangkap bahwa Anda perlu memuat ulang halaman jika Anda membuka alat dev yaitu setelah halaman dimuat ...

bisa jadi lebih licin dengan memperhitungkan semua fungsi, tapi saya hanya menggunakan log jadi ini yang saya lakukan.

//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

Berikut adalah versi yang akan masuk ke konsol ketika alat pengembang terbuka dan tidak ketika mereka ditutup.

(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)

Baik itu terbatas dalam ruang lingkup, bisa mendukung kasus ketika IE8 DevTools terbuka di tengah eksekusi kode, tetapi tidak berfungsi di IE8, console.log adalah objek, jadi tidak memiliki applymetode.
Nishi

0

Buat konsol Anda sendiri di html .... ;-) Ini bisa ditingkatkan tetapi Anda bisa mulai dengan:

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);
        }
    };
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.