npm 包 mark_logger 使用教程

介绍

mark_logger 是一个简单易用的 npm 包,用于在前台页面中输出打印日志。与 console.log 相比,mark_logger 可以在输出中添加格式化的标签,方便区分不同类型的日志。

安装

你可以通过 npm 安装 mark_logger

--- ------- ----------- ------

使用方法

使用 mark_logger 非常简单,只需要在需要打印日志的地方引入 mark_logger 并调用相应的方法。

引入

------ ---------- ---- --------------

----- ------ - --- -------------

打印日志

在需要打印日志的地方调用 logger.log()

------------------ ---------

打印结果为:

------ ------ ------

其中 [mark] 为默认标签。

添加标签

你可以在调用 logger.log() 时添加标签,例如:

------------------ -------- --------

打印结果为:

------ ------ ------

可以看到,输出中的标签已经变成了 info

自定义标签

你可以在初始化 MarkLogger 时传递参数来自定义标签。例如:

----- ------ - --- -------------------- ----------

------------------ -------- ---------

打印结果为:

------- ------ ------

可以看到,输出中的标签已经变成了 debug

颜色标记

除了标签外,你还可以为不同类型的日志添加不同的颜色标记,方便区分不同类型的日志。例如:

----- ------ - --- -------------------- --------- -
  ------ ----------
  ------ ---------
---

------------------ -------- ---------
----------------- --------- ---- -------- ---------

打印结果为:

可以看到,输出中的 debug 标签被赋予了红色,error 标签被赋予了紫色。

总结

mark_logger 是一个简单易用的前台日志输出库,可以帮助你快速记录不同类型的日志。在前端开发中,良好的日志记录非常重要,可以帮助我们更快地定位问题。希望 mark_logger 能为你带来帮助!

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600558aa81e8991b448d5fa8


猜你喜欢

  • npm 包 reflux-rehydrate 使用教程

    在前端开发中,数据流管理是一个重要的问题。Reflux.js 是一个流行的数据流框架,而 reflux-rehydrate 是 Reflux 的一个插件,可以帮助我们处理数据持久化和还原的问题。

    2 年前
  • npm 包 ejs-browser-async 使用教程

    在前端开发中,我们经常需要渲染一些动态的数据展示给用户。为了提高开发效率,我们通常会使用一些模板引擎来进行管理和渲染。而 ejs-browser-async 就是其中一款常用的 npm 包。

    2 年前
  • npm 包 React Native Kakao Signin 使用教程

    简介 在 React Native 开发中,我们可以用第三方包来实现第三方登录的功能。React Native Kakao Signin 是一款用于实现应用中使用 Kakao OAuth 认证登录的 ...

    2 年前
  • npm 包 getsy 使用教程

    随着前端技术的不断发展,日益增长的开发需求也要求我们使用更高效、更易用的工具来提升我们的开发效率。而这时,npm 的出现就提供了一个极为便捷的工具供我们使用,通过安装包来丰富和扩展项目,极大地提高了前...

    2 年前
  • npm 包 soccer-streams-scraper 使用教程

    简介 soccer-streams-scraper 是一个基于 Node.js 的 npm 包,它提供了一个快速和方便的方式来获取全世界各种足球赛事的比分和直播链接。

    2 年前
  • npm 包 ts-interface-enum 使用教程

    在前端领域中,使用 TypeScript 来进行类型检查和编写代码变得越来越普遍。然而,有时候我们还需要使用到枚举类型,以便在代码中使用可读性更高的常量。而这时候,使用 ts-interface-en...

    2 年前
  • npm 包 @didream/ull-shape 使用教程

    前言 @didream/ull-shape 是一款基于 React 开发的图形库,主要用于创建可以处理用户交互的 SVG 图形。它提供了一系列基础的图形元素,例如矩形、圆形、线条、多边形等,同时也支持...

    2 年前
  • npm 包 uwp-keycodes 使用教程

    介绍 uwp-keycodes 是一个 npm 包,旨在提供 Universal Windows Platform 平台下键盘按键的名称和对应的键值。 这个包的主要作用是为前端开发者提供一种简便的方法...

    2 年前
  • npm 包 oin-meta-generator 使用教程

    npm 包 oin-meta-generator 使用教程 引言 在前端开发过程中,我们经常需要为网站或应用添加一些 meta 标签,以便搜索引擎或其他工具更好地理解我们网站或应用的内容或特性。

    2 年前
  • npm 包 express-form-handler-mongoose 使用教程

    简介 express-form-handler-mongoose 是一个 npm 包,用于在 Express 应用程序中处理表单数据并将其保存到 MongoDB 数据库中,使用 Mongoose 来进...

    2 年前
  • npm 包 swerp-util 使用教程

    介绍 npm 包 swerp-util 是一款前端常用的工具函数集合,它提供了许多常用的工具函数,包括类型判断、数组操作、日期处理、字符串操作等。使用 swerp-util 可以大大提高开发效率,减少...

    2 年前
  • npm 包 puf 使用教程

    在日常的前端开发流程中,我们经常需要使用第三方的包来快速实现我们的需求。其中,npm 就是一个很好的资源库,提供了海量的优秀的前端包。而其中一个使用范围最广的包就是 puf。

    2 年前
  • npm 包 deep-seal 使用教程

    介绍 在前端开发中,我们经常需要将一个对象进行深层次的封闭,以保护其数据的安全性。此时,我们可以使用 npm 包 deep-seal 进行深层次封闭。 deep-seal 模块将原对象中所有可配置的属...

    2 年前
  • npm 包 holo-exp-test 使用教程

    简介 holo-exp-test 是一个基于 Webpack 构建的测试框架,适用于前端项目的自动化测试。 该框架提供了丰富的接口和易于使用的工具,帮助开发者快速编写和运行测试用例,提高测试覆盖率和代...

    2 年前
  • npm 包 grunt-merge-tap-files 使用教程

    在前端开发中,我们常常需要进行测试,在测试中需要生成测试报告。而生成测试报告时,可能会有大量的文件,这些文件需要合并之后才能变成可读的测试报告。 手动合并文件是一件费时费力的事情,而 npm 包 gr...

    2 年前
  • npm 包 koa-dee-validator 使用教程

    Koa-dee-validator 是一个基于 Koa2 的参数验证中间件,它使用了 Joi 这个优秀的数据验证库。在开发 Koa2 应用时,若想要验证请求参数,koa-dee-validator 是...

    2 年前
  • npm 包 @thinkeloquent/browser-resource-timing 使用教程

    当我们要优化 Web 应用性能时,常常需要对资源(例如图片、CSS、脚本)的加载情况进行分析。一个很好的指标是资源加载时间,即从浏览器开始请求资源到完成加载所需的时间。

    2 年前
  • npm 包 keydragzoom 使用教程

    在前端开发中,经常会遇到需要放大和缩小图片的情况。keydragzoom 是一个非常好用且易于使用的 npm 包,它可以帮助我们实现图片的拖拽、放大和缩小。本文将介绍如何使用 keydragzoom ...

    2 年前
  • npm 包 eslint-plugin-no-literal-arguments 使用教程

    概述 在开发前端应用程序时,我们通常需要使用一些工具来帮助我们提高代码质量和可维护性。其中一个很重要的工具就是 ESLint。ESLint 可以帮助我们发现代码中的潜在问题和错误,并指导我们如何遵循一...

    2 年前
  • npm 包 react-select-enh 使用教程

    React-select-enh 是一个基于 React 的、高度可定制的选择器库,适用于前端开发中选择器控件的应用场景。本文将重点介绍 react-select-enh 的使用方法和基本原理,以便读...

    2 年前

相关推荐

    暂无文章