Flutter Web:运行后console中不停的打印debug日志

简介: 我们用android studio直接运行flutter web项目,会启动chrome来执行,这时候如果我打开开发者工具(右键-》检查),就会发现非常卡 (前提是用Html Render来渲染,用CanvasKit好像就没问题) 在console上边的操作栏上可以看到一个数字在不停的增长,这是因为console默认不显示debug日志,所以这些日志回以计数的形式显示。我们在操作栏的level中将debug选中,就会看到debug日志了。
+关注继续查看

我们用android studio直接运行flutter web项目,会启动chrome来执行,这时候如果我打开开发者工具(右键-》检查),就会发现非常卡

(前提是用Html Render来渲染,用CanvasKit好像就没问题)

在console上边的操作栏上可以看到一个数字在不停的增长,这是因为console默认不显示debug日志,所以这些日志回以计数的形式显示。我们在操作栏的level中将debug选中,就会看到debug日志了。


这时候就会看到大量的重复日志,如下:

dart.developer.postEvent Flutter.Frame {"number":365,"startTime":19493879,"elapsed":1459,"build":791,"raster":664,"vsyncOverhead":4}

dart.developer.postEvent Flutter.Frame {"number":365,"startTime":19493879,"elapsed":1459,"build":791,"raster":664,"vsyncOverhead":4}

dart.developer.postEvent Flutter.Frame {"number":365,"startTime":19493879,"elapsed":1459,"build":791,"raster":664,"vsyncOverhead":4}


这些日志量非常大,且增加很快,很快就会达到几万几十万,导致整个开发者工具甚至chrome都非常卡。

通过console可以看到这些日志产生于一个developer_patch.dart文件中,相对路径是


/dart-sdk/lib/_internal/js_dev_runtime/patch/developer_patch.dart


那么这个文件在哪里?最终我在flutter sdk的目录中找到


/flutter/bin/cache/dart-sdk/lib/_internal/js_dev_runtime/patch/developer_patch.dart


其中95行左右有这样的代码:


@patch
void _postEvent(String eventKind, String eventData) {
   JS('', 'console.debug("dart.developer.postEvent", #, #)', eventKind,
       eventData);
}
复制代码


可以看到这个函数只是打印日志,但是我将这两行代码注释掉后依然无效,日志还在不停的打印。

通过google查询,发现这个问题很多人都遇到过,在flutter的github上还建立了issuesgithub.com/flutter/flu…


看大家的评论,目前官方好像还没有解决,我用的是flutter最新版本2.0.5还存在这样的问题(而且之前用dev的1.x版本还没有这样的问题,感觉是flutter2.0之后出现的)。也没有一个设置可以关闭这个日志。

目前我没有看到在这个issues下面有靠谱的解决方法,但是当我们打包发布后,在运行的时候就不会有这个日志,而且通过日志信息可以猜到这个日志仅在debug情况下,所以我们可以以release的方式来运行。


在Android studio的运行栏选择Edit Configurations,然后在main.dart的右边栏中找到Additional arguments,这里就是配置启动参数的,我们添加--release即可,再次运行就会以release的形式运行,运行后就会发现不再打印这些日志了。


注意:


添加--release会造成三个问题:

1、在android studio上无法看到运行时的日志,不过日志可以在chrome的开发者工具中来看

2、无法debug调试了,所以如果需要debug就必须去掉--release

3、flutter的热部署功能失效了,所以同样如果想使用热部署也不能使用--release


相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
目录
相关文章
通过MAE和WEB采集基站一键式日志方法
通过MAE和WEB采集基站一键式日志方法
|
2月前
|
网络协议 Shell Perl
根据web访问日志,封禁请求量异常的IP,如IP在半小时后恢复正常,则解除封禁
根据web访问日志,封禁请求量异常的IP,如IP在半小时后恢复正常,则解除封禁
29 1
|
3月前
|
存储 JSON 运维
【Go】基于 Gin 从0到1搭建 Web 管理后台系统后端服务(一)项目初始化、配置和日志(下)
【Go】基于 Gin 从0到1搭建 Web 管理后台系统后端服务(一)项目初始化、配置和日志(下)
|
3月前
|
存储 JSON 监控
【Go】基于 Gin 从0到1搭建 Web 管理后台系统后端服务(一)项目初始化、配置和日志(上)
【Go】基于 Gin 从0到1搭建 Web 管理后台系统后端服务(一)项目初始化、配置和日志(上)
|
4月前
|
存储 运维 Java
[powershell运维] Web 服务器日志依日期归档
本文记录了一个以 Jboss 服务器日志归档的 powershell 示范项目。该项目只需要略加修改,即可用于所有类似需要归档日志的场景。
63 0
|
6月前
|
Dart
如何自定义Flutter日志上传本地系统
Dart中可以通过try/catch/finally来捕获代码块异常,这个和其他编程语言类似,如果读者不清楚,可以查看Dart语言文档,不再赘述,下面我们看看Flutter中的异常捕获。
如何自定义Flutter日志上传本地系统
|
8月前
|
Java
用SpringBoot搭建个人博客01-----使用AOP统一处理Web请求日志
AOP 是面向切面的编程,就是在运行期通过动态代理的方式对代码进行增强处理,比较核心的概念有 切点,切面,通知,有关AOP的详情参考:。 本文要介绍的是在一个SpringBoot项目中如何统一的处理Web请求日志,基本思想还是采用AOP的方式,拦截请求,然后,写入日志。
105 0
用SpringBoot搭建个人博客01-----使用AOP统一处理Web请求日志
|
9月前
|
监控 安全 应用服务中间件
记一次利用GrayLog实现采集与备份云服务器Web访问日志的实现过程
记一次利用GrayLog实现采集与备份云服务器Web访问日志的实现过程
160 0
记一次利用GrayLog实现采集与备份云服务器Web访问日志的实现过程
|
10月前
|
监控 Apache 流计算
2-网站日志分析案例-基于Flume采集WEB日志-windows版本
文章目录 2-网站日志分析案例-基于Flume采集WEB日志-windows版本 1.Flume简介 2.在Windows环境下安装Flume
|
10月前
|
缓存 负载均衡 应用服务中间件
基于Python实现WEB日志生成
文章目录 基于Python实现WEB日志生成 1.日志作用 2.常见的web服务器日志介绍 2.1Apache 2.2Ngnix 3.基于python实现日志生成
基于Python实现WEB日志生成
相关产品
云迁移中心
推荐文章
更多