鸿蒙开发:console日志输出

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 针对初学者而言,大家只需要掌握住日志打印即可,等到了鸿蒙应用开发的时候,还有一个鸿蒙原生的打印工具HiLog,到时,我们也会详细的去讲述,也会针对HiLog,封装一个通用的工具类。

前言

本文代码案例基于Api13。

可以说,任何一种语言,都少不了日志,正因为有了日志,让开发者开发功能,排查问题,才显得游刃有余,一段代码执行的是否正确,某个结果是否匹配一致,等等,简简单单,一个日志打印,便可轻松知晓。

有过前端开发经验的同学,对于console,想必是非常的熟悉,它的使用方式和前端可以说是一模一样的,毕竟ArkTs是基于TypeScript而来的。

简单举例


我们随便打印一个内容,比如hello world,直接使用console.log()即可。


console.log("hello world")


以上的代码,我们还是放在点击事件中执行,这一段代码是鸿蒙应用的主页面,在上一章节中,我们有过概述,大家一定要注意,特别是刚入门的开发者,因为再接下来的所有代码执行,我们都是在这个点击事件中进行执行,并且进行逻辑的验证。


@Entry
@Component
struct Index {
  @State message: string = '测试代码';
  build() {
    RelativeContainer() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          //点击事件,用于测试代码
          console.log("hello world")
        })
    }
    .height('100%')
    .width('100%')
  }
}


点击模拟器或者真机右边的第一个绿色按钮,进行运行。



页面很是简单,和之前的一样。



点击“测试代码”文字,在控制台中,我们可以发现内容已经输出:



console方法概述


console是一个全局对象,可以直接访问,虽然说可以直接访问,但并不意味着它可以在任何的地方都能调用,使用它必须得有承载的逻辑,比如在方法中,在一个点击事件中,如果你直接写到一个类中,或者UI页面中,这个是完全禁止的,这一点,初学者需要注意。


常用方法汇总


方法

描述

debug

以格式化输出方式打印调试信息。

log

以格式化输出方式打印日志信息。

info

以格式化输出方式打印日志信息。(console.log()的别名)

warn

以格式化输出方式打印警告信息。

error

以格式化输出方式打印错误信息。


方法参数:


参数名

类型

必填

说明

message

string

表示要打印的文本信息。

arguments

any[]

表示其余要打印的信息或message的替换值。


常用方法举例

使用方式,和前言中的案例一样,大家选择具体的场景调用即可,比如你想打印警告信息,你就可以使用warn方法,错误信息,就可以使用error方法,每个方法对应的级别是不一样的,而且在颜色上也有所区分。

我们还是在点击事件中进行代码编写:

console.debug("===打印调试信息")
  console.log("===打印日志信息")
  console.info("===打印日志信息")
  console.warn("===打印警告信息")
  console.error("===打印错误信息")

点击“测试代码”后,控制台输出如下,可以发现警告是黄色的,而错误信息则是红色的。


设置Tag标签


一个日志,如果没有指定的tag标签,在茫茫的控制台中,寻找起来是非常费劲的,所以,在日常的开发中,聪明的程序员都会设置一些指定的tag标签,便于在控制台中快速的寻找。


比如在上面的日志输出中,我加了三个等号“===”,其作用就是用于标记,可以让控制台中以此作为检索。



tag可以直接和内容进行拼接,在前中后都无所谓,一般习惯而言,会放在前边,tag一般作为唯一性,特殊性,这样方便我们针对日志进行检索:


console.debug("===打印调试信息")


除了上边的设置tag之外,也可以多个参数进行设置,毕竟console是支持可变参数设置的。


console.debug("Tag标识:", "打印调试信息")


控制台输出如下:



日志等级概念


所谓的等级,只是覆盖度的问题,比如在上面的案例中,我们打印了所有类型的日志输出,代码如下:


console.debug("===打印调试信息")
console.log("===打印日志信息")
console.info("===打印日志信息")
console.warn("===打印警告信息")
console.error("===打印错误信息")


当我们在控制台选择日志等级的时候,如下所示:



它们的覆盖度是debug>info>warn>error,也就是选择debug,所有类型的日志都会输出,如果你选择了error,那么它只会输出error这一种类型。


其它方法概述


日常的开发中,常见的方法已经完全满足,毕竟只是一个日志打印,但是,在console中还有着其它的方法,同样有着实际的用处,我们简单做一个介绍。


assert断言


言的作用用于调试和测试,用于验证表达式是否为真,如果不为真则抛出异常‌。


参数:

参数名

类型

必填

说明

value

Object

语句结果值。若value为假(false)或者省略,则输出以"Assertion failed"开头。如果 value 为真值(true),则无打印。

arguments

Object

value为假(false)的后续错误消息打印。省略则不打印。


如果表达式为真,则后面不会输出日志,像下面的案例,在控制台中是没有任何日志输出的。


console.assert(true, "表达式结果值为true, 无打印")


如果表达式为假,后面的日志则会输出,并且以"Assertion failed"开头。


console.assert(false, "表达式结果值为false, 进行控制台打印")



断言一般用于验证前边的逻辑是否为真,比如判断一个求和函数是否为等于10。


console.assert(this.add(6, 5) == 10, "求和函数 add(6, 5) 不为10,我就打印日志")


求和函数,关于函数,后面会重点讲述。


add(a: number, b: number): number {
    return a + b
  }


由于传递的是6和5,相加不为10,则表达式为假,就会在控制台中进行打印。



count计数


维护一个内部计数器,调用时,打印此标签名以及对应的计数次数。

参数:

参数名

类型

必填

说明

label

string

计数器标签名。默认值为'default'。


由于默认值是default,所以,加与不加都是一样的。

console.count()
console.count('default')
console.count()


我们看下控制台打印:


当然了,你可以定义任意的标签名,比如我定义了一个test标签名:


console.count("test")
console.count("test")
console.count("test")

控制台打印:


countReset清除计数


此方法主要用于清除指定标签名的计数,比如,还是上面的案例,我们调用一下清除。

console.count("test")
console.count("test")
console.countReset("test")
console.count("test")

控制台打印如下,可以清楚的看到,执行了清除了之后,计数已经发生了变化。

dir对象

此方法主要用于对象内容打印。

参数:

参数名

类型

必填

说明

dir

Object

需要打印内容的对象。省略则无任何打印。

对象可以直接以大括号的形式:

console.dir({ "name": "AbnerMing" })


控制台效果:



直接打印一个创建的对象:


console.dir(new Test())
class Test {
  name: string = "AbnerMing"
}


控制台效果:



两者的区别,大家可能看到了,自己创建的对象,打印会显示对象的名字,如果直接大括号形式打印,则会显示Object。


除了使用dir进行对象打印之外,其实我们也可以通过JSON.stringify()方式进行对象打印,用常见的打印方式即可。


console.log(JSON.stringify(Object({ "name": "AbnerMing" })))


控制台效果:


group缩进

默认将后续行的缩进增加两个空格。如果提供需要打印的信息,则首先打印信息,没有额外的缩进。

参数:


参数名

类型

必填

说明

arguments

Object

要打印的信息。

举例打印:

console.log("我是打印的第一条信息")
console.group()
console.log("我是打印的第二条信息")
console.group()
console.log("我是打印的第三条信息")

控制台效果,可以发现只要使用了group,后续的日志就会有缩进的效果。


groupCollapsed缩进


使用与功能同console.group()一致。

参数:

参数名

类型

必填

说明

arguments

Object

要打印的信息。

console.log("我是打印的第一条信息")
console.groupCollapsed()
console.log("我是打印的第二条信息")
console.groupCollapsed()
console.log("我是打印的第三条信息")


控制台效果:


groupEnd


将后续行的缩进减少两个空格。

console.log("我是打印的第一条信息")
console.groupCollapsed()
console.log("我是打印的第二条信息")
console.groupEnd()
console.log("我是打印的第三条信息")

控制台打印效果:


table表格


以表格形式打印数据。

参数:

参数名

类型

必填

说明

tableData

Object

要打印为表格形式的对象。省略则无任何打印。

打印举例:

console.table([1, 2, 3])


控制台打印效果:

打印举例2:

console.table({ a: [1, 2, 3], b: 4, c: { e: 5 } });


控制台打印效果:


time


启动可用于计算操作持续时间的计时器。可使用console.timeEnd()关闭计时器并打印经过的时间(单位:ms)。

参数:

参数名

类型

必填

说明

label

string

计时器标识。默认值为'default'。


示例:

console.time("AbnerMing")


timeEnd

停止之前通过调用 console.time() 启动的计时器并将打印经过的时间(单位:ms)。

参数:

参数名

类型

必填

说明

label

string

计时器标识。默认值为'default'


示例:

console.time("AbnerMing")
console.timeEnd("AbnerMing")


控制台打印效果:

timeLog

对于先前通过调用 console.time() 启动的计时器,打印经过时间和其他data参数。

参数:

参数名

类型

必填

说明

label

string

计时器标识。默认值为'default'

arguments

Object

需要打印的其他日志。


示例:

console.time('AbnerMing')
console.timeLog('AbnerMing', 88)
console.timeEnd('AbnerMing')


控制台打印效果:


trace


打印当前堆栈。

参数:

参数名

类型

必填

说明

arguments

Object

需要打印的其他日志。省略则仅打印堆栈信息。

示例:

console.trace("显示堆栈信息")


控制台打印效果:


日志工具类封装


平常的开发中,我们可以直接使用console进行打印,这是完全没问题的,但是在项目开发中,一般会兼顾着正式包和测试包,比如测试包下日志正常输出,当正式包时为了性能,就需要关闭日志打印,那么就需要针对日志做一个开关处理;除此之外,针对输出的日志进行格式化处理,美观处理等等,就不得不需要针对现有的日志工具进行再次的封装,已满足我们日后的开发。

工具类全部源码,大家可以复制直接使用:

/**
 * AUTHOR:AbnerMing
 * DATE:2025/1/17
 * INTRODUCE:日志打印工具类
 * */
export class Console {
  private logTag: string = "AbnerMing" //日志tag
  private logClose: boolean = false //日志是否关闭
  /*
* Author:AbnerMing
* Describe:私有化构造器
*/
  private constructor() {
  }
  /*
* Author:AbnerMing
* Describe:提供一个外部可访问的的静态方法
*/
  public static getInstance() {
    if (!Console.mConsole) {
      Console.mConsole = new Console()
    }
    return Console.mConsole
  }
  private static mConsole: Console
  /**
   * 初始化
   * @param logTag { string } 日志tag
   * @param logClose { boolean } 是否关闭打印日志
   */
  init(logClose?: boolean, logTag?: string) {
    if (logTag != undefined) {
      this.logTag = logTag
    }
    if (logClose != undefined) {
      this.logClose = logClose
    }
  }
  static log(message: string, tag?: string) {
    Console.getInstance().print(message, tag, LogType.LOG)
  }
  static info(message: string, tag?: string) {
    Console.getInstance().print(message, tag, LogType.INFO)
  }
  static debug(message: string, tag?: string) {
    Console.getInstance().print(message, tag, LogType.DEBUG)
  }
  static warn(message: string, tag?: string) {
    Console.getInstance().print(message, tag, LogType.WARN)
  }
  static error(message: string, tag?: string) {
    Console.getInstance().print(message, tag, LogType.ERROR)
  }
  /**
   * 日志打印
   * @param tag { string } 日志tag
   * @param message { Object } 日志内容
   */
  private print(message: Object, tag?: string, logType?: LogType) {
    if (this.logClose) {
      return
    }
    let lTag = this.logTag
    if (tag != undefined) {
      lTag = tag
    }
    switch (logType) {
      case LogType.DEBUG:
        console.debug(this.getMessage(lTag, message))
        break
      case LogType.LOG:
      case LogType.INFO:
        console.log(this.getMessage(lTag, message))
        break
      case LogType.WARN:
        console.warn(this.getMessage(lTag, message))
        break
      case LogType.ERROR:
        console.error(this.getMessage(lTag, message))
        break
    }
  }
  /**
   * 获取输出位置
   * */
  getMessage(tag: string, message: Object): string {
    let log = "┌───────" + tag + "────────────────────────────────────────────────────────────────────────────────"
    log = log.substring(0, log.length - tag.length) + "\n"
    try {
      const stackTrace = new Error().stack
      const traceArray = stackTrace!.split('\n')
      const trace = traceArray[traceArray.length-2]
      log = log + "|" + trace + "\n"
      let type = typeof message
      if (type == "object") {
        //是对象
        message = this.getObjectToJson(message)
      } else if (type == "string") {
        //判断是否包含大括号
        const content = message + ""
        if (content.startsWith("{") && content.endsWith("}")) {
          //对象
          const obj: string = JSON.parse(String(message))
          message = this.getObjectToJson(obj)
        } else {
          message = content
        }
      }
      log = log + "\n|    " + message
    } catch (e) {
    }
    log = log + "\n└───────────────────────────────────────────────────────────────────────────────────────"
    return log
  }
  /**
   * 对象转json
   * @param message
   * @returns
   */
  private getObjectToJson(message: Object): String {
    const json = JSON.stringify(message, null, 2)
    const endMessage = json.replace(/\n/g, "\n|    ")
    return endMessage
  }
}
enum LogType {
  DEBUG, LOG, INFO, WARN, ERROR
}


初始化,有两个参数看一个是日志打印开关,一个是日志的Tag,都可以进行全局设置,大家可以在AbilityStage里进行初始化。


Console.getInstance().init(false,"AbnerMing")


普通打印


Console.error("我是一个普通打印")


控制台效果,经过美化之后的日志输出,可以看到还是很直观的,还有打印的日志位置,可以点击直接的定位,可以说非常的方便。



对象打印:


Console.error(Object({ "name": "AbnerMing", "age": 18 }))


控制台效果,对象也进行了格式化处理。


小结


针对初学者而言,大家只需要掌握住日志打印即可,等到了鸿蒙应用开发的时候,还有一个鸿蒙原生的打印工具HiLog,到时,我们也会详细的去讲述,也会针对HiLog,封装一个通用的工具类。


相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
目录
打赏
0
9
11
2
180
分享
相关文章
|
10天前
鸿蒙开发:V2版本装饰器@Once
@Once装饰器只能与@Param搭配使用,仅此一个组合,无其他使用方式,还有就是,必须在V2版本,也就是@ComponentV2装饰的自定义组件中,否则会报异常。
鸿蒙开发:V2版本装饰器@Once
uniapp 极速上手鸿蒙开发
uniapp 自版本 `4.28.2024092502` 起支持鸿蒙应用开发,现版本 `4.36.2024112817` 同时支持鸿蒙应用和元服务开发。本文介绍使用 HBuilderX 4.24+ 和 DevEco Studio 进行环境配置、项目创建及运行的详细步骤,涵盖从 AGC 平台新建项目、配置证书到最终运行项目的全流程,帮助开发者快速上手鸿蒙开发。注意:HBuilderX 4.31+ 构建的鸿蒙运行包不支持 x86_64 平台,需使用真机调试。
109 85
uniapp 极速上手鸿蒙开发
|
4天前
鸿蒙开发:wrapBuilder传递参数
本文,主要简单了介绍了一下,非UI使用的情况下,wrapBuilder传递数据问题,除了以上的方式之外,还有其它的方式可以实现,在实际的开发中,还是具体问题具体分析。
77 61
鸿蒙开发:wrapBuilder传递参数
|
3天前
|
鸿蒙开发:自定义一个搜索模版
这样的一个模版,可以简单的分为,三个部分,分别是上边的搜索框,中间的历史搜索和下边的热门搜索,搜索框,我们直接可以使用系统的组件Search,历史搜索,由于是内容不一的搜索的内容,这里使用弹性布局Flex,下边的热门搜索,条目规格一致,这里我们直接使用Grid网格组件。
40 23
鸿蒙开发:自定义一个搜索模版
鸿蒙开发:ArkTs语言注释
关于注释,有一点需要注意,那就是,注释,不会被编译器或解释器执行,而本小节的重点并不是简单的教大家注释如何去写,而是在实际的项目中,我们能够真正的把注释投入到实际的开发中。
34 18
鸿蒙开发:ArkTs语言注释
鸿蒙开发:权限管理之权限声明
本文,主要简单概述了为什么要有权限管理,以及权限管理的声明原则,这些都是基本的概念内容,大家做为了解即可,重要的是怎么声明权限,在什么位置声明权限,这一点需要掌握。
35 16
鸿蒙开发:权限管理之权限声明
|
2天前
|
鸿蒙开发:了解应用级配置信息
在实际的开发中,如果有共用的资源,建议大家都放到AppScope目录下,对于一些应用级别的信息,比如应用的名字,还有应用的图标,虽然说在Moulde下也可以配置,但是为了更方便的管理,这里比较推荐以AppScope目录下的app.json5为主,当然了,只是推荐,实际当中,两者都可以实现,大家选择其中一种方式即可。
25 12
鸿蒙开发:了解应用级配置信息
鸿蒙开发:弹性布局Flex
在实际的开发中,需要掌握主轴与交叉轴的关系、换行规则及子元素属性,同时注意性能与兼容性问题,还有一点,Flex组件在渲染时存在二次布局过程,因此在对性能有严格要求的场景下建议使用Column、Row代替。
26 10
鸿蒙开发:弹性布局Flex
|
8天前
|
鸿蒙开发:实现AOP代码插桩能力
正确的运用AOP,可以提升代码的模块化、复用性、可维护性和灵活性,同时降低了耦合度,使系统更易于扩展和维护。
37 13
鸿蒙开发:实现AOP代码插桩能力
|
2天前
鸿蒙开发:自定义一个Toast
如果整个项目的toast样式都一样,直接在初始化中设置统一的属性即可,针对单独不一样的效果,可以单独设置。
鸿蒙开发:自定义一个Toast

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等