在前端开发过程中，调试日志是不可或缺的一部分。随着浏览器端的 JavaScript 程序越来越复杂，调试日志也变得越来越重要。Bunyan 是一个流行的 JavaScript 日志库，由于其多样化和自定义的优势，很多前端开发者使用它来记录程序的运行状态。
@browser-bunyan/console-raw-stream 是 Bunyan 的子类，它带有更多的默认功能。它可以将颜色信息和其他易于阅读的格式应用到日志记录中，并提供了一个控制台输出流以便在浏览器中查看。
在本文中，我们将讨论如何使用 @browser-bunyan/console-raw-stream npm 包来记录和查看 Bunyan 日志。
安装
在开始之前，请确保已在项目中安装了 Bunyan。
运行以下命令以安装 console-raw-stream 包：
--- ------- ----------------------------------
使用
让我们创建一个新的 Bunyan 日志记录器，该日志记录器将处理我们的应用程序中的所有日志消息。我们先将日志输出到控制台，以便在浏览器中查看日志记录。
----- ------ - ------------------ ----- ---------------- - ---------------------------------------------- ----- ------ - --------------------- ----- -------- ------- --- ------------------- ------ -------- ---
上面的代码片段使用 ConsoleRawStream 将日志消息记录到控制台。该插件还支持记录日志消息到本地存储，让我们来看一下如何实现这么做。
----- ------ - ------------------
----- ---------------- - ----------------------------------------------
----- ------ - ---------------------
----- --------
-------- -
-
------ --------
------- --- ------------------
--
-
------ --------
----- -----------------
-
-
---上述代码通过将 ConsoleRawStream 和本地存储路径的对象传递到 streams 数组，将日志消息记录到了本地存储和控制台。
配置文件包含以下参数：
name：日志记录器名称streams：日志流配置（数组或ReadableStream 对象）stream：日志流对象path：日志文件的路径level：日志级别
现在我们假设应用程序中的某个模块出现了错误并记录到了日志中。为了更好地了解这个模块的运行情况，让我们修改上面的代码，以包含一个 userId 字段。
----- ------ - ------------------
----- ---------------- - ----------------------------------------------
----- ------ - ---------------------
----- --------
-------- -
-
------ --------
------- --- ------------------
--
-
------ --------
----- -----------------
-
--
----- ----------- -- -- ------ --
---
-- ----
--- -
----- --- ------------- --------- ---- ---------
- ----- ----- -
-------------- --- -- --- ----- ----------- -- ------- ------
-这样我们就可以在控制台和日志文件中查看日志消息，以及带有 userId 字段的错误信息。
结论
与使用原始的 console.log 相比，使用 Bunyan 日志库可以将程序的调试信息以一种更可读和易于扩展的格式记录下来。此外，结合 @browser-bunyan/console-raw-stream 包可以更方便地在浏览器中查看日志记录。
在今天的教程中，我们学习了如何使用 @browser-bunyan/console-raw-stream 包，从而使我们的 Bunyan 日志记录器更具可读性、可扩展性和易用性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedad70b5cbfe1ea0610c6e