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

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 我们用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日志并进行多维度分析。
目录
相关文章
|
1月前
|
存储 运维 应用服务中间件
[运维日志] Web 服务器日志依日期归档(Powershell 实现,附源代码)
[运维日志] Web 服务器日志依日期归档(Powershell 实现,附源代码)
101 0
|
2天前
|
监控 Serverless 持续交付
阿里云云效产品使用问题之如何让流水线支持构建 flutter web 应用到 OSS
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。
|
16天前
|
SQL 运维 关系型数据库
|
19天前
|
开发框架 Dart JavaScript
深入探讨Flutter中的Web支持功能,以及如何利用Flutter构建跨平台Web应用的最佳实践
【6月更文挑战第11天】Flutter,Google的开源跨平台框架,已延伸至Web支持,让开发者能用同一代码库构建移动和Web应用。Flutter Web基于Dart转JavaScript,利用WebAssembly和JavaScript在Web上运行。构建Web应用最佳实践包括选择合适项目、优化性能、进行兼容性测试和利用Flutter的声明式UI、热重载等优势。尽管性能挑战存在,Flutter Web为跨平台开发提供了更多机会和潜力。
40 1
|
9天前
|
Dart Serverless Android开发
Flutter 单线程模型保证UI运行流畅
Flutter 单线程模型保证UI运行流畅
13 0
|
11天前
|
移动开发 小程序 安全
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
|
1月前
|
存储 监控 Ubuntu
Linux系统之GoAccess实时Web日志分析工具的基本使用
【5月更文挑战第22天】Linux系统之GoAccess实时Web日志分析工具的基本使用
50 1
|
17天前
|
Dart 前端开发 JavaScript
Flutter for Web:跨平台移动与Web开发的新篇章
Flutter for Web是Google的开源UI工具包Flutter的延伸,用于构建高性能、高保真的跨平台应用,包括Web。它基于Dart语言和Flutter的核心框架,利用Skia渲染引擎通过WebAssembly在Web上运行。开发流程包括安装SDK、创建项目、编写Dart代码和部署。性能优化涉及减少渲染开销、代码压缩等。与传统Web框架相比,Flutter for Web在开发效率和性能上有优势,但兼容性和生态系统尚待完善。
19 0
|
1月前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter中的Web支持:构建跨平台Web应用
【4月更文挑战第30天】Flutter,Google的开源跨平台框架,已延伸至Web领域,让开发者能用同一代码库构建移动和Web应用。Flutter Web通过将Dart代码编译成JavaScript和WASM运行在Web上。尽管性能可能不及原生Web应用,但适合交互性强、UI复杂的应用。开发者应关注性能优化、兼容性测试,并利用Flutter的声明式UI、热重载等优势。随着其发展,Flutter Web为跨平台开发带来更多潜力。
【Flutter前端技术开发专栏】Flutter中的Web支持:构建跨平台Web应用
|
1月前
|
Apache
web服务器(Apache)访问日志(access_log)详细解释
web服务器(Apache)访问日志(access_log)详细解释