Làm cách nào để in thông báo gỡ lỗi trong Bảng điều khiển JavaScript của Google Chrome?

Làm cách nào để in thông báo gỡ lỗi trong Bảng điều khiển JavaScript của Google Chrome?

Xin lưu ý rằng Bảng điều khiển JavaScript không giống như Trình gỡ lỗi JavaScript; chúng có các cú pháp khác nhau AFAIK, vì vậy lệnh in trong JavaScript Debugger sẽ không hoạt động ở đây. Trong Bảng điều khiển JavaScript, print()sẽ gửi tham số đến máy in.

Thực thi mã sau từ thanh địa chỉ trình duyệt:

javascript: console.log (2);

in thành công tin nhắn đến "Bảng điều khiển JavaScript" trong Google Chrome.

Cải thiện ý tưởng của Andru, bạn có thể viết một tập lệnh tạo các chức năng của bàn điều khiển nếu chúng không tồn tại:

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

Sau đó, sử dụng bất kỳ sau đây:

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

Các chức năng này sẽ ghi nhật ký các loại mục khác nhau (có thể được lọc dựa trên nhật ký, thông tin, lỗi hoặc cảnh báo) và sẽ không gây ra lỗi khi bảng điều khiển không khả dụng. Các chức năng này sẽ hoạt động trong bảng điều khiển Fireorms và Chrome.

Chỉ cần thêm một tính năng thú vị mà rất nhiều nhà phát triển bỏ lỡ:

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

Đây là kỳ diệu %obãi nhấp được và sâu có thể xem nội dung của một đối tượng JavaScript. %sđã được hiển thị chỉ cho một hồ sơ.

Ngoài ra điều này cũng mát mẻ:

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

Cung cấp một dấu vết ngăn xếp giống như Java đến điểm của lệnh new Error()gọi (bao gồm đường dẫn đến tệp và số dòng !).

Cả hai %ovà new Error().stackđều có sẵn trong Chrome và Firefox!

Ngoài ra đối với dấu vết ngăn xếp trong Firefox sử dụng:

console.trace();

Như https://developer.mozilla.org/en-US/docs/Web/API/console nói.

Chúc mừng hack!

CẬP NHẬT : Một số thư viện được viết bởi những người xấu xác định lại consoleđối tượng cho mục đích riêng của họ. Để khôi phục trình duyệt gốc consolesau khi tải thư viện, hãy sử dụng:

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

Xem câu hỏi Stack Overflow Khôi phục console.log () .

Chỉ cần một cảnh báo nhanh - nếu bạn muốn kiểm tra trong Internet Explorer mà không xóa tất cả các console.log (), bạn sẽ cần sử dụng Fireorms Lite hoặc bạn sẽ gặp một số lỗi không thân thiện đặc biệt.

(Hoặc tạo console.log () của riêng bạn, nó sẽ trả về false.)

Đây là một đoạn script ngắn để kiểm tra xem bàn điều khiển có sẵn không. Nếu không, nó sẽ cố gắng tải Fireorms và nếu Firebird không có sẵn, nó sẽ tải Fireorms Lite. Bây giờ bạn có thể sử dụng console.logtrong bất kỳ trình duyệt. Thưởng thức!

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

Ngoài câu trả lời của Delan Azabani , tôi muốn chia sẻ console.jsvà tôi sử dụng cho cùng một mục đích. Tôi tạo một bảng điều khiển noop bằng cách sử dụng một loạt các tên hàm, theo ý kiến ​​của tôi là một cách rất thuận tiện để làm điều này và tôi đã chăm sóc Internet Explorer, có một console.logchức năng, nhưng không 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() {};
  }
}

Hoặc sử dụng chức năng này:

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

Đây là lớp bọc giao diện điều khiển của tôi. Nó cho tôi phạm vi đầu ra là tốt để làm cho cuộc sống dễ dàng hơn. Lưu ý việc sử dụng localConsole.debug.call()để localConsole.debugchạy trong phạm vi của lớp gọi, cung cấp quyền truy cập vào toStringphương thức của nó .

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

Điều này mang lại đầu ra như vậy trong Fireorms :

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

Hoặc Chrome:

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

Cá nhân tôi sử dụng cái này, tương tự như của 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){}
}

Điểm chính là ít nhất nên có một số thực hành ghi nhật ký ngoài việc chỉ sử dụng console.log()mã JavaScript của bạn, bởi vì nếu bạn quên nó và trên trang web sản xuất, nó có khả năng phá vỡ tất cả mã JavaScript cho trang đó

Bạn có thể sử dụng console.log()nếu bạn có mã gỡ lỗi trong trình chỉnh sửa phần mềm lập trình nào bạn có và bạn sẽ thấy đầu ra có khả năng là trình chỉnh sửa tốt nhất cho tôi (Google Chrome). Chỉ cần nhấn F12và nhấn tab Console. Bạn sẽ thấy kết quả. Chúc mừng mã hóa. :)

Tôi đã có rất nhiều vấn đề với các nhà phát triển kiểm tra trong bảng điều khiển của họ. (). Và, tôi thực sự không thích gỡ lỗi Internet Explorer, mặc dù có những cải tiến tuyệt vời của Internet Explorer 10 và Visual Studio 2012 , v.v.

Vì vậy, tôi đã ghi đè chính đối tượng giao diện điều khiển ... Tôi đã thêm một cờ __localhost chỉ cho phép các câu lệnh giao diện điều khiển khi trên localhost. Tôi cũng đã thêm các chức năng console. () Vào Internet Explorer (thay vào đó sẽ hiển thị cảnh báo ()).

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

Ví dụ sử dụng:

    console.log("hello");

Chrome / Firefox:

    prints hello in the console window.

Trình duyệt web IE:

    displays an alert with 'hello'.

Đối với những người nhìn kỹ vào mã, bạn sẽ khám phá hàm console.examine (). Tôi đã tạo ra cách đây nhiều năm để tôi có thể để mã gỡ lỗi ở một số khu vực nhất định xung quanh sản phẩm để giúp khắc phục sự cố QA / khách hàng. Chẳng hạn, tôi sẽ để lại dòng sau trong một số mã được phát hành:

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

Và sau đó từ sản phẩm được phát hành, nhập nội dung sau vào bảng điều khiển (hoặc thanh địa chỉ có tiền tố 'javascript:'):

    top.__examine_someLabel = true;

Sau đó, tôi sẽ thấy tất cả các câu lệnh console.examine () đã đăng nhập. Đó là một sự giúp đỡ tuyệt vời nhiều lần.

Simple Internet Explorer 7 và dưới shim rằng bảo tồn dòng đánh số cho các trình duyệt khác:

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

console.debug("");

Sử dụng phương pháp này sẽ in ra văn bản có màu xanh sáng trong bảng điều khiển.

Cải thiện hơn nữa về ý tưởng của Delan và Andru (đó là lý do tại sao câu trả lời này là phiên bản chỉnh sửa); console.log có khả năng tồn tại trong khi các chức năng khác có thể không tồn tại, do đó, có bản đồ mặc định cho cùng chức năng với console.log ....

Bạn có thể viết một tập lệnh tạo các chức năng của bàn điều khiển nếu chúng không tồn tại:

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

Sau đó, sử dụng bất kỳ sau đây:

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

Các chức năng này sẽ ghi nhật ký các loại mục khác nhau (có thể được lọc dựa trên nhật ký, thông tin, lỗi hoặc cảnh báo) và sẽ không gây ra lỗi khi bảng điều khiển không khả dụng. Các chức năng này sẽ hoạt động trong bảng điều khiển Fireorms và Chrome.