我目前在我的代码中到处都有这个 JS 语句：
window.console && console.log("Foo");
我想知道这是否成本高昂，或者对生产有任何负面影响。
我可以离开客户端登录吗？还是应该离开？
编辑：最后，我想我（以及其他任何人？）可以提出的最佳论点是，通过留下日志消息，在服务器和客户端之间传输的额外数据量可能不可忽略in. 如果要完全优化生产代码，则必须删除日志记录以减少发送到客户端的 javascript 的大小。
【问题讨论】：
标签： javascript logging
您应该不将开发工具添加到生产页面。
回答另一个问题：代码不能产生负面影响：
console，window.console 将评估为 falseconsole.log("Foo") 将在定义时将消息打印到控制台（前提是页面不会被非函数覆盖 console.log）。【讨论】：
/*DEBUG:start*/console.log("Foo");/*DEBUG:end*/。然后，使用 RegExp 删除所有出现的/*DENUG-start*/[\S\s]*?/*DEBUG-end*/。剩余的空白字符将被最小化器删除。
是的。 console.log 会在不支持它的浏览器中抛出异常（找不到控制台对象）。
【讨论】：
解决此问题的另一种方法是在未定义控制台对象时将其“存根”，这样在没有控制台的上下文中不会引发错误，即
if (!window.console) {
var noOp = function(){}; // no-op function
console = {
log: noOp,
warn: noOp,
error: noOp
}
}
你明白了......在控制台的各种实现中定义了很多函数，所以你可以将它们全部或只是你使用的那些（例如，如果你只使用console.log并且从未使用过console.profile, console.time 等等...)
对我来说，这比在每次调用前添加条件或不使用条件更好。
另请参阅：Is it a bad idea to leave "console.log()" calls in your producton JavaScript code?
【讨论】：
$.noop。
如果缩小是您的构建过程的一部分，您可以使用它来去除调试代码，如 Google 闭包编译器所述：Exclude debug JavaScript code during minification
if (DEBUG) {
console.log("Won't be logged if compiled with --define='DEBUG=false'")
}
如果你用高级优化编译，这段代码甚至会被识别为死代码并被完全删除
【讨论】：
是的，将console.log 用于 javascript 调试目的是一种很好的做法，但它需要从生产服务器中删除，或者如果需要可以添加到生产服务器上，需要考虑一些关键点：
**var isDebugEnabled="Get boolean value from Configuration file to check whether debug is enabled or not".**
if (window.console && isDebugEnabled) {
console.log("Debug Message");
}
为了首先验证当前浏览器是否支持控制台以及是否启用调试，必须在任何地方使用以上代码块进行日志记录。
isDebugEnabled必须根据我们的设置为真或假 环境。
【讨论】：
通常是的，在生产代码中公开日志消息不是一个好主意。
理想情况下，您应该在部署之前使用构建脚本删除此类日志消息；但是很多（大多数）人不使用构建过程（包括我）。
这是我最近用来解决这个难题的一些代码的简短 sn-p。它修复了旧 IE 中未定义的console 导致的错误，以及在“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);
}
我很确定我从关于 SO 的另一个答案中获取了上述大部分addConsoleNoOp f'n，但现在找不到。如果我找到它，我会在稍后添加参考。
编辑：不是我想的帖子，但这里有一个类似的方法：https://github.com/paulmillr/console-polyfill/blob/master/index.js
【讨论】：
我基本上用知道代码运行位置的函数覆盖了 console.log 函数。因此，我可以像往常一样继续使用 console.log。它会自动知道我处于 dev/qa 模式或生产中。还有一种方法可以强制它。 这是一个工作小提琴。 http://jsfiddle.net/bsurela/Zneek/
这里是 sn-p，因为发布 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);
}
},
【讨论】：
如果你使用这个缩小器，你可以设置drop_console option:
传递 true 以放弃对 console.* 函数的调用
所以我建议保留console.log 调用，因为它们是代码库中最棘手的部分。
【讨论】：
drop_console 设置为false，观察它们并再次隐藏它们。
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');
【讨论】：
想法：记录对象可以防止它们被垃圾收集。
console.log，则可以通过 DevTools 控制台的引用访问这些对象。您可以通过记录对象、对其进行变异并发现旧消息反映对象后来的更改来检查它。这只是一个想法：我检查了第 1 点和第 2 点，但没有检查第 3 点。
如果您想保留日志以用于客户端故障排除或其他需求，那么：
['log', 'warn', 'error'].forEach( (meth) => {
const _meth = window.console[meth].bind(console);
window.console[meth] = function(...args) { _meth(...args.map((arg) => '' + arg)) }
});
【讨论】：
我知道这是一个相当古老的问题，并且有一段时间没有太多活动了。我只是想添加我想出的解决方案，它似乎对我很有效。
/**
* 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;
}
}
}
然后我通常会像这样在我的脚本中创建一个函数，或者您可以在全局脚本中使用它：
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!');
}
}
}
然后我只是使用它而不是这样的 console.log：
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);
}
【讨论】：
如果使用正确的工具（例如 parcel/webpack）完成工作流，那么它就不再令人头疼了，因为使用 production 构建 console.log 正在被删除。即使在几年前使用Gulp/Grunt，它也可以实现自动化。
Angular、React、Svelte、Vue.js 等许多现代框架都带有开箱即用的设置。基本上，你不需要做任何事情，只要你部署了正确的构建，即production，而不是development，它仍然有console.log。
【讨论】：
不要把事情复杂化！我个人在开发过程中一直使用console.log，这样可以节省很多时间。对于生产，我只需添加一行代码（在我的情况下，在“生产配置文件”中）禁用所有日志：
window.console.log = () => {};
完成 ;) 此猴子修补 window.console 并将 log 函数替换为空函数，从而禁用输出。
在大多数情况下，这对我来说已经足够了。如果您想“一路”并从代码中删除 console.logs 以减小包大小，则必须更改 js 的捆绑方式（例如，使用 minifier 或其他方式删除 console.logs）
此外，我认为您实际上可以提出将它们留在其中的强项——即使在生产中也是如此。对于普通用户来说，它不会改变任何东西，但可以真正加快理解奇怪的“异国浏览器”问题。它不像后端日志可能包含关键信息。无论如何，这一切都在前端，不显示日志消息是因为您害怕透露用户不应该知道的东西，这实际上只是“默默无闻的安全性”，并且应该让您思考为什么这些信息甚至在一开始就可以在前端获得地方。只是我的看法。
【讨论】：