[javascript] 프로덕션 코드에서 console.log를 제거해야합니까?

Question 1

현재 코드의 모든 곳에이 JS 문이 있습니다.

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

이것이 비용이 많이 들거나 생산에 부정적인 부작용이 있는지 궁금합니다.

클라이언트 측 로그인을 그대로 둘 수 있습니까? 아니면 계속해야합니까?

편집 : 결국, 나 (그리고 다른 사람?)가 생각 해낼 수있는 가장 좋은 주장은 로깅 메시지를 남겨 두어 서버와 클라이언트간에 전송되는 추가 데이터의 양이 무시할 수 없을 정도로 많다는 것입니다. 프로덕션 코드는 완전히 최적화되어야하며, 클라이언트로 전송되는 javascript의 크기를 줄이려면 로깅을 제거해야합니다.

Question 2

프로덕션 페이지에 개발 도구를 추가 해서는 안됩니다 .

다른 질문에 답하려면 : 코드는 부정적인 부작용을 가질 수 없습니다.

window.consoleconsole정의되지 않은 경우 false로 평가 됩니다.
console.log("Foo")정의 될 때 콘솔에 메시지를 인쇄합니다 (페이지가 console.log비 기능으로 덮어 쓰이지 않는 경우 ).

Question 3

이를 처리하는 또 다른 방법은 콘솔 객체가 정의되지 않았을 때 콘솔 객체를 ‘스텁’하여 콘솔이없는 컨텍스트에서 오류가 발생하지 않도록하는 것입니다.

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

아이디어를 얻을 수 있습니다 … 콘솔의 다양한 구현에 정의 된 많은 함수가 있으므로 모두 또는 사용하는 기능 만 스텁 할 수 있습니다 (예 : 사용 console.log하고 사용 하지 않은 console.profile경우 console.time등).

이것은 모든 호출 앞에 조건문을 추가하거나 사용하지 않는 것보다 개발에서 더 나은 대안입니다.

참조 : “console.log ()”호출을 JavaScript 코드에 그대로 두는 것이 나쁜 생각입니까?

Question 4

UglifyJS2

이 minifier를 사용하는 경우 drop_console옵션 을 설정할 수 있습니다 .

console. * 함수에 대한 호출을 버리려면 true를 전달하십시오.

따라서 console.log코드베이스에서 가장 까다로운 부분에 대한 호출 을 남겨 두는 것이 좋습니다 .

Question 5

축소가 빌드 프로세스의 일부인 경우 여기에 Google 클로저 컴파일러에 설명 된대로 디버그 코드를 제거하는 데 사용할 수 있습니다. 축소 중 디버그 자바 스크립트 코드 제외

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

고급 최적화로 컴파일하는 경우이 코드는 죽은 것으로 식별되어 완전히 제거됩니다.

Question 6

예. console.log는이를 지원하지 않는 브라우저에서 예외를 발생시킵니다 (콘솔 객체는 찾을 수 없음).

Question 7

일반적으로 예, 프로덕션 코드에서 로그 메시지를 노출하는 것은 좋은 생각이 아닙니다.

이상적으로는 배포 전에 빌드 스크립트를 사용하여 이러한 로그 메시지를 제거해야합니다. 그러나 많은 (대부분의) 사람들이 (나를 포함하여) 빌드 프로세스를 사용하지 않습니다.

다음은이 딜레마를 해결하기 위해 최근에 사용한 코드의 짧은 스 니펫입니다. console이전 IE에서 정의되지 않은 오류로 인한 오류를 수정 하고 “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);
}

나는 위의 addConsoleNoOpf’n을 다른 답변에서 많이 가져 왔지만 지금은 찾을 수 없습니다. 나중에 찾으면 참조를 추가하겠습니다.

편집 : 내가 생각하고 있던 게시물이 아니지만 비슷한 접근 방식이 있습니다 .https : //github.com/paulmillr/console-polyfill/blob/master/index.js

Question 8

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

용법:

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