使用这些 console.log() 技巧提升你的 JavaScript 浏览器日志的级别

概括

我认为自己是一名后端软件工程师——正如任何后端工程师都会证明的那样，我们生活中的很大一部分时间都花在监控、故障排除和调试应用程序上。软件开发的基本规则是软件会出错——新手开发人员和经验丰富的开发人员之间的区别在于他们如何规划这些故障。健壮有效的日志记录是规划故障并最终缓解故障的关键部分。与后端开发一样，日志记录对于前端软件开发也很有用，但它的作用远不止于故障排除和调试。有效的前端日志记录还可以使开发体验高效、快速且充满乐趣。

虽然我是测试驱动开发的忠实拥护者和实践者，但我更欣赏浏览器为有效利用它的前端开发者提供的灵活性、丰富的信息和代码信心。我想分享一些我在构建Firecode.io 的console.log()过程中学到并融入到工作流程中的前端日志记录技巧和窍门——希望其中一些技巧能帮助你让你的开发工作流程更高效、更有趣！

我喜欢将这些技巧分为两大类 - 当您主动构建和调试应用程序时使用的快速而粗糙的日志记录，以及持久的生产日志记录 - 以了解您的应用程序何时按预期工作以及何时不按预期工作。

使用以下方法进行快速开发日志记录的技巧console.log()

不要使用 console.log()。

是的，没错。我不使用console.log()。好吧，我写了一些使用 的包装器console.log()（更多内容请参阅生产环境日志记录部分），但如果您想在应用中记录一些内容以查看发生了什么，请使用console.trace()。除了提供所有console.log()信息外，它还会输出完整的堆栈跟踪，以便您确切地知道消息是从哪里发出的。

使用 ES6 的计算属性名称来标识对象并避免变量名称混淆

这个很简单——使用 ES6 的计算属性语法，并将需要记录的对象括在花括号中console.log()——例如使用console.log({user})vs 。你会发现它们被整齐地记录下来，变量名设置为键，值作为对象本身。当你急着用同一个命令console.log(user)记录多个对象时，这尤其有用。console.log()

采用分层日志级别 - 错误、警告、信息

console.log(param)默认情况下，日志INFO级别为 - 但是，您还可以使用其他 3 个日志级别 - console.debug()、console.warn()和console.error()。除了格式差异（注意到不同的颜色了吗？）之外，浏览器的开发者控制台还允许您使用便捷的下拉菜单轻松过滤不同级别的日志，以整理您的日志。

记录项目列表时，使用 console.table()

这个是不言自明的，也是我最喜欢的控制台功能之一 - 如果您需要记录对象列表，请console.table()尝试一下。

快速调试debugger

想节省宝贵的几秒钟吗？无需在开发者控制台中查找文件来添加断点，只需debugger在代码中放置一个断点，即可在执行到该行时暂停执行。从现在开始，您可以像平常一样调试和单步执行函数。

console.profile()细粒度的性能分析console.time()

想要分析应用程序中的精确用户流以查找热点？console.profile(profileName)在操作开始时触发，并console.profileEnd(profileName)在结束时检查该流的 CPU 配置文件。

console.time(id)相关的是，您可以通过在流程开始和console.timeEnd(id)结束时触发来准确测量流程所花费的时间。

计数标记的执行次数console.count()

这是我个人觉得没什么用的控制台功能之一，但如果你需要它，它就在那里。console.count(label)可以帮助你准确地知道一段代码被执行了多少次——这对于查找和消除竞争条件和其他情况很有用。

使用 CSS 美化你的日志

这是迄今为止我最喜欢的控制台功能，也是我在生产日志记录中广泛使用的功能（有关更多信息，请参阅生产日志记录部分）。您可以使用格式字符串来格式化日志消息。%c是 CSS 样式的占位符，其后的内容是您的消息。

您还可以通过扩展格式字符串来包含%s字符串参数，从而设置多个元素的样式。

由于我是一个高度视觉化的人，我喜欢花些时间让我的信息和调试日志看起来既美观又实用。我在 Firecode.io 的生产日志中大量使用了此功能——这为下一节提供了绝佳的衔接。

生产测井console.log()

让前端代码准备好投入生产涉及许多步骤 - 其中一些步骤是丑化和压缩代码、生成可缓存的资产摘要以及console.log()从应用中删除 s。为什么？因为你不希望用户必须打开开发者控制台才能与你的应用交互，这会抵消日志的实用性，并使其成为纯粹的安全漏洞，供好奇心强的人利用。同时，当你使用自己的应用时，你很可能希望使用最细粒度的日志记录来了解应用的运行情况并查找和修复错误。如果你的应用正在被其他人使用，你也希望在应用用户遇到错误时收到通知，以便你能够追踪并修复代码。以下是我在前端尽力满足这些要求的几件事：

不要使用 console.log()

相反，应该编写一个包装类，其中包含根据后端全局变量设置的日志级别进行条件日志记录的逻辑。警告 - 您将在前面看到 TypeScript 代码片段 - 如果您不熟悉 TypeScript，请将其视为 JavaScript 的超集，并在其后附加类型（过于简化） - 即const str = “some string”;-const str: string = “some string”在变量后添加类型，后跟分号。

就 Firecode.io 而言，我编写了自己的前端框架，该框架使用了 RxJS，但包含一些熟悉的概念，例如来自 React 和 Vue 等其他流行框架的组件，同时还添加了其他概念，例如用于处理高负载代码块的引擎、用于 WebSocket 消息的通道以及用于 HTTP 请求的客户端。将这些部分协同工作的可视化至关重要，因此我在一个Logger包装类中实现了自定义格式，该类可以格式化日志，并在视觉上区分应用程序各个部分的日志。

我没有调用console.log("Cache SET to", {value})，而是调用Logger.debug(“Cache set to”, {value}, Framework.Cache)。Logger该类有一个 TypeScript 枚举，将每个框架组件映射到要使用的颜色：

这使我能够在开发过程中直观地关注应用程序的组件 - 例如，如果我想查看WsRequestCache正在做什么，我可以调出除了绿松石标记日志之外的所有其他内容。

通过让后端设置日志级别来保护您的日志

我已将 Firecode.io 配置为默认为管理员用户启用调试级别日志记录，该日志记录由后端设置 JavaScript 变量。虽然富有冒险精神的用户仍然可以在开发者控制台中找到并设置这些标志来启用精细日志记录，但这总比默认向应用程序的每个用户公开所有日志，或者在生产环境中使用后处理器彻底删除应用程序中的所有日志记录要好得多。

在 Ruby on Rails 视图中设置：
const logLevel: number = <%= @app.get_log_level_for_user %>

在 Logger 类中：

class Logger {
   ...
   ...
   static info(...) {
     shouldLog(Level.INFO) && console.log(...);
        ...
   }
}

记录并通知可操作的错误

最后，同样重要的是，您希望在用户遇到异常情况时收到通知，但不必将日志输出到开发者控制台。您可以通过在 Logger 的错误函数中添加一个调用，将错误传输到第三方 APM 服务（例如AppSignal）来实现这一点，如下所示：

class Logger {
   ...
   ...
   static error(e) {
     if (shouldLog(Level.ERROR)) {
       console.error(e);
     }
     appsignal.sendError(e);
   }
}

AppSignal包括将您的错误传送到出站通知服务（例如 Slack、PagerDuty 和 OpsGenie）的集成 - 您甚至可以连接项目管理工具（例如 JIRA 或 Trello）来为您的团队自动创建问题和错误。

概括

我真心希望这些技巧和趣闻轶事能让你的前端开发体验更高效、更有趣！显然，这篇文章只是粗略地介绍了日志记录的“忍术”，所以如果你还有更多技巧想分享，我很乐意在我的推特上分享。

两个临别赠言 - 我正在从头开始重建 Firecode.io，并推出一套全新的 JavaScript、Java、Python 和 Scala 编程面试题。如果您对适合自己学习风格且充满乐趣的编程面试准备感兴趣 - 请在此处使用您的电子邮件注册。我还将发布更多内容，介绍如何从头构建像 Firecode.io 这样的生产级 Web 应用程序作为副项目 - 关注我@ackshaey或@firecodeio了解更多信息。最后，如果您是 JavaScript 新手，并且想了解面向对象 JavaScript 和原型继承的底层工作原理，请查看我最喜欢的关于这个主题的书籍 -面向对象 JavaScript 原则；如果您有兴趣了解更多关于为什么应该使用 TypeScript 的信息，请查看《Effective TypeScript》。