Bagaimana cara mencetak pesan debug di Google Chrome JavaScript Console?


466

Bagaimana cara mencetak pesan debug di Google Chrome JavaScript Console?

Harap perhatikan bahwa Konsol JavaScript tidak sama dengan JavaScript Debugger; mereka memiliki sintaks yang berbeda AFAIK, sehingga perintah cetak dalam JavaScript Debugger tidak akan berfungsi di sini. Di Konsol JavaScript, print()akan mengirim parameter ke printer.

Jawaban:


597

Menjalankan kode berikut dari bilah alamat browser:

javascript: console.log (2);

berhasil mencetak pesan ke "Konsol JavaScript" di Google Chrome.


13
Baru sadar, console.log()ini luar biasa untuk debugging js ... Saya sering lupa menggunakannya dalam praktek.
Ish

Berapa lama salah satu dari "output" ini? Terpilih oleh omong-omong, ini benar-benar membantu
nbura

3
@dbrin ini bagus untuk pengembangan, namun console.log()kode apa pun harus dihapus dari kode produksi sebelum penyebaran.
Samuel MacLachlan

2
@Sebas Console.Logharus dihapus dari kode produksi sebelum penyebaran karena jika tidak, pesan-pesan ini akan masuk ke konsol JavaScript pengguna Anda. Sementara mereka tidak mungkin melihatnya, itu memakan ruang memori pada perangkat mereka. Juga, tergantung pada konten Log, Anda berpotensi memberi tahu orang-orang cara meretas / merekayasa balik aplikasi Anda.
Samuel MacLachlan

166

Memperbaiki ide Andru, Anda dapat menulis skrip yang membuat fungsi konsol jika tidak ada:

if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || function(){};
console.error = console.error || function(){};
console.info = console.info || function(){};

Kemudian, gunakan salah satu dari yang berikut:

console.log(...);
console.error(...);
console.info(...);
console.warn(...);

Fungsi-fungsi ini akan mencatat berbagai jenis item (yang dapat difilter berdasarkan log, info, kesalahan atau peringatan) dan tidak akan menyebabkan kesalahan ketika konsol tidak tersedia. Fungsi-fungsi ini akan berfungsi di Firebug dan konsol Chrome.


Terima kasih untuk itu. Bukankah kodenya akan lebih ketat jika Anda menjalankan "jika" sekali, suka if (!window.console) {lalu memasukkan semuanya ke dalam tanda kurung? Saat ini Anda sedang mengevaluasi hal yang sama empat kali.
Dan Rosenstark

Tidak, b / c hanya memiliki window.console tidak menjamin bahwa Anda akan memiliki window.console.log atau .warn & c
Paul

18
Berhati-hatilah karena jika skrip ini dimuat dengan halaman dan jendela konsol tidak terbuka, itu akan membuat konsol 'dummy' yang dapat mencegah konsol nyata bekerja jika Anda membuka konsol setelah halaman dimuat. (setidaknya ini adalah kasus dalam versi firefox / firebug dan chrome yang lebih lama)
cwd

1
Saya memiliki tambahan untuk ini, lihat jawaban saya di bawah ini
Tim Büthe

1
Tidak, ini tidak akan membuat chrome batal dengan TypeError. Pertanyaan terkait di atas adalah tentang menelepon dengan ini . Kode di atas tidak melakukan itu dan akan berfungsi dengan baik di Chrome
gman

47

Cukup tambahkan fitur keren yang banyak dilewatkan oleh pengembang:

console.log("this is %o, event is %o, host is %s", this, e, location.host);

Ini adalah magis %osampah yang dapat diklik dan mendalam-dibrowse isi dari objek JavaScript. %sditampilkan hanya untuk dicatat.

Ini juga keren:

console.log("%s", new Error().stack);

Yang memberikan jejak tumpukan seperti Java ke titik new Error()doa (termasuk jalur ke file dan nomor baris !).

Keduanya %odan new Error().stacktersedia di Chrome dan Firefox!

Juga untuk jejak tumpukan dalam penggunaan Firefox:

console.trace();

Seperti https://developer.mozilla.org/en-US/docs/Web/API/console berkata.

Selamat melakukan peretasan!

UPDATE : Beberapa perpustakaan ditulis oleh orang jahat yang mendefinisikan ulang consoleobjek untuk keperluan mereka sendiri. Untuk mengembalikan browser asli consolesetelah memuat perpustakaan, gunakan:

delete console.log;
delete console.warn;
....

Lihat pertanyaan Stack Overflow Memulihkan console.log () .


3
Satu lagi yang baru saya temukan: console.dir developer.mozilla.org/en-US/docs/Web/API/console.dir
dbrin

17

Hanya peringatan cepat - jika Anda ingin menguji di Internet Explorer tanpa menghapus semua console.log (), Anda harus menggunakan Firebug Lite atau Anda akan mendapatkan beberapa kesalahan yang tidak terlalu ramah.

(Atau buat console.log () Anda sendiri yang hanya mengembalikan false.)


2
Saya menghindari kesalahan lintas browser seperti: if (console) console.log ()
Craig Wohlfeil

Jika Anda membuka alat pengembang di IE (F12), consoleobjek dibuat dan ada sampai Anda menutup instance browser itu.
Tim Büthe

17

Berikut ini adalah skrip pendek yang memeriksa apakah konsol tersedia. Jika tidak, ia mencoba memuat Firebug dan jika Firebug tidak tersedia, ia memuat Firebug Lite. Sekarang Anda dapat menggunakan console.logbrowser apa saja. Nikmati!

if (!window['console']) {

    // Enable console
    if (window['loadFirebugConsole']) {
        window.loadFirebugConsole();
    }
    else {
        // No console, use Firebug Lite
        var firebugLite = function(F, i, r, e, b, u, g, L, I, T, E) {
            if (F.getElementById(b))
                return;
            E = F[i+'NS']&&F.documentElement.namespaceURI;
            E = E ? F[i + 'NS'](E, 'script') : F[i]('script');
            E[r]('id', b);
            E[r]('src', I + g + T);
            E[r](b, u);
            (F[e]('head')[0] || F[e]('body')[0]).appendChild(E);
            E = new Image;
            E[r]('src', I + L);
        };
        firebugLite(
            document, 'createElement', 'setAttribute', 'getElementsByTagName',
            'FirebugLite', '4', 'firebug-lite.js',
            'releases/lite/latest/skin/xp/sprite.png',
            'https://getfirebug.com/', '#startOpened');
    }
}
else {
    // Console is already available, no action needed.
}

14

Selain jawaban Delan Azabani , saya suka berbagi console.js, dan saya gunakan untuk tujuan yang sama. Saya membuat konsol noop menggunakan array nama fungsi, apa yang menurut saya cara yang sangat nyaman untuk melakukan ini, dan saya menangani Internet Explorer, yang memiliki console.logfungsi, tetapi tidak console.debug:

// Create a noop console object if the browser doesn't provide one...
if (!window.console){
  window.console = {};
}

// Internet Explorer has a console that has a 'log' function, but no 'debug'. To make console.debug work in Internet Explorer,
// We just map the function (extend for info, etc. if needed)
else {
  if (!window.console.debug && typeof window.console.log !== 'undefined') {
    window.console.debug = window.console.log;
  }
}

// ... and create all functions we expect the console to have (taken from Firebug).
var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
    "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];

for (var i = 0; i < names.length; ++i){
  if(!window.console[names[i]]){
    window.console[names[i]] = function() {};
  }
}

12

Atau gunakan fungsi ini:

function log(message){
    if (typeof console == "object") {
        console.log(message);
    }
}

console.constructor === Object && (log = m => console.log(m))
Josh Habdas

7

Inilah kelas pembungkus konsol saya. Ini memberi saya ruang lingkup keluaran juga untuk membuat hidup lebih mudah. Catat penggunaan localConsole.debug.call()sehingga localConsole.debugberjalan dalam lingkup kelas panggilan, memberikan akses ke toStringmetodenya.

localConsole = {

    info: function(caller, msg, args) {
        if ( window.console && window.console.info ) {
            var params = [(this.className) ? this.className : this.toString() + '.' + caller + '(), ' + msg];
            if (args) {
                params = params.concat(args);
            }
            console.info.apply(console, params);
        }
    },

    debug: function(caller, msg, args) {
        if ( window.console && window.console.debug ) {
            var params = [(this.className) ? this.className : this.toString() + '.' + caller + '(), ' + msg];
            if (args) {
                params = params.concat(args);
            }
            console.debug.apply(console, params);
        }
    }
};

someClass = {

    toString: function(){
        return 'In scope of someClass';
    },

    someFunc: function() {

        myObj = {
            dr: 'zeus',
            cat: 'hat'
        };

        localConsole.debug.call(this, 'someFunc', 'myObj: ', myObj);
    }
};

someClass.someFunc();

Ini menghasilkan seperti di Firebug :

In scope of someClass.someFunc(), myObj: Object { dr="zeus", more...}

Atau Chrome:

In scope of someClass.someFunc(), obj:
Object
cat: "hat"
dr: "zeus"
__proto__: Object

6

Secara pribadi saya menggunakan ini, yang mirip dengan tarek11011:

// Use a less-common namespace than just 'log'
function myLog(msg)
{
    // Attempt to send a message to the console
    try
    {
        console.log(msg);
    }
    // Fail gracefully if it does not exist
    catch(e){}
}

Poin utamanya adalah ide yang baik untuk setidaknya memiliki beberapa praktik penebangan selain hanya menempel console.log()langsung ke kode JavaScript Anda, karena jika Anda melupakannya, dan itu ada di situs produksi, ini berpotensi dapat mematahkan semua kode JavaScript. untuk halaman itu.


mengapa tidak if(windows.console) console.log(msg)?
CJStuart

window.consolemaksudmu. satu-satunya waktu mencoba akan berguna adalah jika Kesalahan dilemparkan (jika console.log bukan fungsi) karena konsol didefinisikan ulang. Melakukannya window.console && window.console.log instanceof Functionakan lebih bermanfaat.
Aram Kocharyan

4

Anda dapat menggunakan console.log()jika Anda memiliki kode debugged di editor perangkat lunak pemrograman apa yang Anda miliki dan Anda akan melihat output yang kemungkinan besar editor terbaik untuk saya (Google Chrome). Cukup tekan F12dan tekan tab Konsol. Anda akan melihat hasilnya. Selamat coding. :)


4

Saya punya banyak masalah dengan pengembang memeriksa di konsol mereka. () Pernyataan. Dan, saya benar-benar tidak suka men-debug Internet Explorer, meskipun ada peningkatan fantastis dari Internet Explorer 10 dan Visual Studio 2012 , dll.

Jadi, saya telah mengganti objek konsol itu sendiri ... Saya telah menambahkan flag __localhost yang hanya memungkinkan pernyataan konsol saat di localhost. Saya juga menambahkan konsol. () Berfungsi untuk Internet Explorer (yang menampilkan peringatan () sebagai gantinya).

// Console extensions...
(function() {
    var __localhost = (document.location.host === "localhost"),
        __allow_examine = true;

    if (!console) {
        console = {};
    }

    console.__log = console.log;
    console.log = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__log === "function") {
                console.__log(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__info = console.info;
    console.info = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__info === "function") {
                console.__info(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__warn = console.warn;
    console.warn = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__warn === "function") {
                console.__warn(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__error = console.error;
    console.error = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__error === "function") {
                console.__error(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__group = console.group;
    console.group = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__group === "function") {
                console.__group(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert("group:\r\n" + msg + "{");
            }
        }
    };

    console.__groupEnd = console.groupEnd;
    console.groupEnd = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__groupEnd === "function") {
                console.__groupEnd(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg + "\r\n}");
            }
        }
    };

    /// <summary>
    /// Clever way to leave hundreds of debug output messages in the code,
    /// but not see _everything_ when you only want to see _some_ of the
    /// debugging messages.
    /// </summary>
    /// <remarks>
    /// To enable __examine_() statements for sections/groups of code, type the
    /// following in your browser's console:
    ///       top.__examine_ABC = true;
    /// This will enable only the console.examine("ABC", ... ) statements
    /// in the code.
    /// </remarks>
    console.examine = function() {
        if (!__allow_examine) {
            return;
        }
        if (arguments.length > 0) {
            var obj = top["__examine_" + arguments[0]];
            if (obj && obj === true) {
                console.log(arguments.splice(0, 1));
            }
        }
    };
})();

Contoh penggunaan:

    console.log("hello");

Chrome / Firefox:

    prints hello in the console window.

Internet Explorer:

    displays an alert with 'hello'.

Bagi mereka yang memperhatikan kode ini, Anda akan menemukan fungsi console.examine (). Saya membuat ini tahun lalu sehingga saya dapat meninggalkan kode debug di area tertentu di sekitar produk untuk membantu memecahkan masalah QA / masalah pelanggan. Misalnya, saya akan meninggalkan baris berikut dalam beberapa kode yang dirilis:

    function doSomething(arg1) {
        // ...
        console.examine("someLabel", arg1);
        // ...
    }

Dan kemudian dari produk yang dirilis, ketikkan yang berikut ke konsol (atau bilah alamat yang diawali dengan 'javascript:'):

    top.__examine_someLabel = true;

Lalu, saya akan melihat semua pernyataan console.examine () yang dicatat. Sudah bantuan yang fantastis berkali-kali lipat.


Terima kasih atas ide yang luar biasa ini. Cukup menginspirasi. Dari fungsi pemeriksaan Anda, tanpa disadari saya melanjutkan dengan gagasan lingkup untuk debugging php. mydebug_on ('somescope'), mydebug ('somescope', $ data) dll. Sekarang saya dapat mengaktifkan / menonaktifkan debugging selektif subjek dan masuk untuk kode php. Dan sama seperti program linux biasa, ia bisa login dalam rasa standar reguler verbose dll. Ide yang cukup bagus!
Johan

3

Simple Internet Explorer 7 dan di bawah shim yang mempertahankan penomoran baris untuk browser lain:

/* Console shim */
(function () {
    var f = function () {};
    if (!window.console) {
        window.console = {
            log:f, info:f, warn:f, debug:f, error:f
        };
    }
}());

2
console.debug("");

Menggunakan metode ini mencetak teks dalam warna biru cerah di konsol.

masukkan deskripsi gambar di sini


1

Memperbaiki lebih lanjut gagasan Delan dan Andru (itulah sebabnya jawaban ini adalah versi yang diedit); console.log mungkin ada sementara fungsi lainnya mungkin tidak, jadi miliki peta default untuk fungsi yang sama dengan console.log ....

Anda dapat menulis skrip yang membuat fungsi konsol jika tidak ada:

if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || console.log;  // defaults to log
console.error = console.error || console.log; // defaults to log
console.info = console.info || console.log; // defaults to log

Kemudian, gunakan salah satu dari yang berikut:

console.log(...);
console.error(...);
console.info(...);
console.warn(...);

Fungsi-fungsi ini akan mencatat berbagai jenis item (yang dapat difilter berdasarkan log, info, kesalahan atau peringatan) dan tidak akan menyebabkan kesalahan ketika konsol tidak tersedia. Fungsi-fungsi ini akan berfungsi di Firebug dan konsol Chrome.

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.