Tôi có nên xóa console.log khỏi mã sản xuất không?

Tôi hiện có câu lệnh JS này ở khắp mọi nơi trong mã của mình:

window.console && console.log("Foo");

Tôi đang tự hỏi liệu điều này có tốn kém hay có bất kỳ tác dụng phụ tiêu cực nào trong quá trình sản xuất hay không.

Tôi có rảnh để đăng nhập phía máy khách hay nên bắt đầu?

CHỈNH SỬA: Cuối cùng, tôi cho rằng lập luận tốt nhất mà tôi (và bất kỳ ai khác?) Có thể đưa ra là có một lượng dữ liệu bổ sung có thể không đáng kể được chuyển giữa máy chủ và máy khách bằng cách để lại thông báo đăng nhập. Nếu mã sản xuất phải được tối ưu hóa hoàn toàn, việc ghi nhật ký sẽ phải được xóa để giảm kích thước của javascript được gửi đến máy khách.

Bạn không nên thêm các công cụ phát triển vào một trang sản xuất.

Để trả lời câu hỏi khác: Mã không được có tác dụng phụ tiêu cực:

• window.consolesẽ đánh giá thành false nếu consolekhông được xác định
• console.log("Foo")sẽ in thông báo tới bảng điều khiển khi nó được xác định (miễn là trang không bị console.logmột chức năng nào ghi đè lên ).

Một cách khác để giải quyết vấn đề này là 'khai' ra đối tượng console khi nó không được xác định để không có lỗi nào được đưa ra trong các ngữ cảnh không có console, tức là

if (!window.console) {
  var noOp = function(){}; // no-op function
  console = {
    log: noOp,
    warn: noOp,
    error: noOp
  }
}

bạn có ý tưởng ... có rất nhiều chức năng được xác định trên các triển khai khác nhau của bảng điều khiển, vì vậy bạn có thể khai thác tất cả hoặc chỉ những chức năng bạn sử dụng (ví dụ: nếu bạn chỉ sử dụng console.logvà chưa bao giờ sử dụng console.profile, console.timev.v.)

Đối với tôi, đây là một sự thay thế tốt hơn trong quá trình phát triển so với việc thêm các điều kiện vào trước mỗi cuộc gọi, hoặc không sử dụng chúng.

xem thêm: Có phải là một ý tưởng tồi nếu để lệnh gọi "console.log ()" trong mã JavaScript sản phẩm của bạn?

UglifyJS2

Nếu bạn đang sử dụng bộ thu nhỏ này, bạn có thể đặt drop_consoletùy chọn :

Chuyển true để hủy các lệnh gọi đến bảng điều khiển. * Chức năng

Vì vậy, tôi khuyên bạn nên để lại console.logcác cuộc gọi vì chúng là một phần khó nhất của cơ sở mã.

Nếu thu nhỏ là một phần trong quá trình xây dựng của bạn, bạn có thể sử dụng nó để loại bỏ mã gỡ lỗi, như được giải thích ở đây với trình biên dịch đóng của Google: Loại trừ mã JavaScript gỡ lỗi trong quá trình rút gọn

if (DEBUG) {
  console.log("Won't be logged if compiled with --define='DEBUG=false'")
}

Nếu bạn biên dịch với các tối ưu hóa nâng cao, mã này thậm chí sẽ được xác định là đã chết và bị xóa hoàn toàn

Đúng. console.log sẽ đưa ra một ngoại lệ trong các trình duyệt không hỗ trợ nó (sẽ không tìm thấy đối tượng console).

Nói chung là có, không phải là một ý tưởng tuyệt vời nếu để lộ thông báo nhật ký trong mã sản xuất của bạn.

Tốt nhất, bạn nên xóa các thông báo nhật ký như vậy bằng một tập lệnh xây dựng trước khi triển khai; nhưng nhiều người (hầu hết) không sử dụng một quy trình xây dựng (bao gồm cả tôi).

Đây là một đoạn mã ngắn mà tôi đã sử dụng gần đây để giải quyết tình huống khó xử này. Nó sửa các lỗi do không xác định consoletrong IE cũ, cũng như vô hiệu hóa ghi nhật ký nếu ở trong "development_mode".

// fn to add blank (noOp) function for all console methods
var addConsoleNoOp =  function (window) {
    var names = ["log", "debug", "info", "warn", "error",
        "assert", "dir", "dirxml", "group", "groupEnd", "time",
        "timeEnd", "count", "trace", "profile", "profileEnd"],
        i, l = names.length,
        noOp = function () {};
    window.console = {};
    for (i = 0; i < l; i = i + 1) {
        window.console[names[i]] = noOp;
    }
};

// call addConsoleNoOp() if console is undefined or if in production
if (!window.console || !window.development_mode) {
    this.addConsoleNoOp(window);
}

Tôi khá chắc chắn rằng tôi đã lấy phần lớn các addConsoleNoOpcâu hỏi trên từ một câu trả lời khác trên SO, nhưng không thể tìm thấy ngay bây giờ. Tôi sẽ thêm một tài liệu tham khảo sau nếu tôi tìm thấy nó.

chỉnh sửa: Không phải bài đăng tôi đang nghĩ đến, nhưng đây là một cách tiếp cận tương tự: https://github.com/paulmillr/console-polyfill/blob/master/index.js

var AppLogger = (function () {
  var debug = false;
  var AppLogger = function (isDebug) {
    debug = isDebug;
  }
  AppLogger.conlog = function (data) {
    if (window.console && debug) {
        console.log(data);
    }
  }
  AppLogger.prototype = {
    conlog: function (data) {
        if (window.console && debug) {
            console.log(data);
        }
    }
  };
return AppLogger;
})();

Sử dụng:

var debugMode=true;
var appLogger = new AppLogger(debugMode);
appLogger.conlog('test');

Có, phương pháp hay để sử dụng console.logcho mục đích gỡ lỗi javascript, nhưng nó cần được xóa khỏi máy chủ sản xuất hoặc nếu cần, có thể thêm vào máy chủ sản xuất với một số điểm chính cần được xem xét:

**var isDebugEnabled="Get boolean value from Configuration file to check whether debug is enabled or not".**
if (window.console && isDebugEnabled) {
    console.log("Debug Message");
}

Khối mã trên phải được sử dụng ở mọi nơi để ghi nhật ký để trước tiên xác minh xem bảng điều khiển có được hỗ trợ cho trình duyệt hiện tại hay không và gỡ lỗi có được bật hay không.

isDebugEnabled phải được đặt là true hoặc false dựa trên môi trường của chúng ta.

TL; DR

Ý tưởng: Các đối tượng ghi nhật ký ngăn không cho chúng bị Thu gom rác.

Chi tiết

1. Nếu bạn chuyển các đối tượng vào console.logthì các đối tượng này có thể truy cập được bằng cách tham chiếu từ bảng điều khiển của DevTools. Bạn có thể kiểm tra nó bằng cách ghi lại đối tượng, thay đổi nó và nhận thấy rằng các thư cũ phản ánh những thay đổi sau này của đối tượng.
2. Nếu nhật ký quá dài, các tin nhắn cũ sẽ bị xóa trong Chrome.
3. Nếu nhật ký ngắn thì các thư cũ sẽ không bị xóa, nếu các thư này tham chiếu đến các đối tượng thì các đối tượng này không được Thu thập rác.

Nó chỉ là một ý tưởng: Tôi đã kiểm tra điểm 1 và 2 nhưng không phải 3.

Giải pháp

Nếu bạn muốn giữ nhật ký để xử lý sự cố phía máy khách hoặc các nhu cầu khác thì:

['log', 'warn', 'error'].forEach( (meth) => {
  const _meth = window.console[meth].bind(console);
  window.console[meth] = function(...args) { _meth(...args.map((arg) => '' + arg)) }
});

Về cơ bản, tôi ghi đè hàm console.log bằng một hàm có kiến ​​thức về nơi mã đang được chạy. Vì vậy, tôi có thể tiếp tục sử dụng console.log như tôi thường làm. Nó tự động biết rằng tôi đang ở chế độ dev / qa hoặc đang sản xuất. Cũng có một cách để buộc nó. Đây là một fiddle đang hoạt động. http://jsfiddle.net/bsurela/Zneek/

Đây là đoạn mã vì tràn ngăn xếp được hiểu bởi những người đăng jsfiddle

  log:function(obj)
{
    if(window.location.hostname === domainName)
    {
        if(window.myLogger.force === true)
        {
            window.myLogger.original.apply(this,arguments);
        }
    }else {
        window.myLogger.original.apply(this,arguments);
    }
},

Tôi biết đây là một câu hỏi khá cũ và đã không có nhiều hoạt động trong một thời gian. Tôi chỉ muốn thêm giải pháp của mình mà tôi đã nghĩ ra có vẻ hoạt động khá tốt đối với tôi.

    /**
     * Logger For Console Logging 
     */
    Global.loggingEnabled = true;
    Global.logMode = 'all';
    Global.log = (mode, string) => {    
        if(Global.loggingEnabled){
            switch(mode){
              case 'debug':
                  if(Global.logMode == 'debug' || Global.logMode == 'all'){
                    console.log('Debug: '+JSON.stringify(string));
                  }
                  break;
              case 'error':
                  if(Global.logMode == 'error' || Global.logMode == 'all'){
                    console.log('Error: '+JSON.stringify(string));
                  }       
                  break;
              case 'info':
                  if(Global.logMode == 'info' || Global.logMode == 'all'){
                    console.log('Info: '+JSON.stringify(string));
                  }
                  break;
            }
        }
    }

Sau đó, tôi thường tạo một hàm trong các tập lệnh của mình như thế này hoặc bạn có thể cung cấp nó trong một tập lệnh chung:

Something.fail = (message_string, data, error_type, function_name, line_number) => {
    try{

        if(error_type == undefined){
            error_type = 'error';
        }

        Global.showErrorMessage(message_string, true);
        Global.spinner(100, false);

        Global.log(error_type, function_name);
        Global.log(error_type, 'Line: '+line_number);
        Global.log(error_type, 'Error: '+data);

    }catch(error){
        if(is_global){
            Global.spinner(100, false);
            Global.log('error', 'Error: '+error);
            Global.log('error', 'Undefined Error...');
        }else{
            console.log('Error:'+error);
            console.log('Global Not Loaded!');
        }           
    }   
}

Và sau đó tôi chỉ sử dụng nó thay vì console.log như thế này:

try{
 // To Do Somehting
 Something.fail('Debug Something', data, 'debug', 'myFunc()', new Error().lineNumber);
}catch(error){
 Something.fail('Something Failed', error, 'error', 'myFunc()', new Error().lineNumber);
}

Nếu quy trình làm việc được thực hiện bằng cách sử dụng các công cụ phù hợp như parcel/ webpackthì nó không còn là vấn đề đau đầu nữa, bởi vì bản productiondựng console.logđang bị loại bỏ. Thậm chí vài năm trước đó với Gulp/ Gruntnó cũng có thể được tự động hóa.

Nhiều người trong số các khuôn khổ hiện đại như Angular, React, Svelte, Vue.jsđi kèm với thiết lập mà out-of-the-box. Về cơ bản, bạn không phải làm bất cứ điều gì, miễn là bạn triển khai đúng bản dựng, tức là productionmột bản, không phải bản dựng developmentvẫn sẽ có console.log.