查看html的app推荐,如何在网页实时查看APP日志

写在前面

对于一个已经上线的APP，如果没有自己的Log系统。一旦线上出现问题，你就会收到各种领导微信的艾特，各种客户投诉。所以一套自己成熟的Log系统是至关重要的。本文重点还是说局域网下日志实时查看功能。

需求分析

输入

支持文件写入和读取

支持设置单个文件大小

支持设置单个文件写入时间大小

支持设置日志文件总数

支持日志文件有效时间

支持数据库写入和读取

支持日志级别(Off、Error、Debug、Info、Verbose)

支持自定义format

支持控制台与console.app

支持日志过滤

输出

支持摇一摇日志文件分享

支持局域网日志实时日志

支持日志文件上传到服务器

支持服务端对单个APP账号或deviceID做日志开关

系统架构

推荐方案

CocoaLumberjack，默认支持多个级别的日志输出，并可以灵活的扩展日志级别，日志format，日志过滤条件。默认支持日志文件大小，文件写入数量等等。满足了大部分需求。

功能实现

添加terminal输出

[DDLog addLogger:[DDTTYLogger sharedInstance]];

复制代码

添加Apple system log

[DDLog addLogger:[DDASLLogger sharedInstance]];

复制代码

使用系统版本macosx(10.4,10.12), ios(2.0,10.0), watchos(2.0,3.0), tvos(9.0,10.0) ，用下面的代替。

[DDLog addLogger:[DDOSLogger sharedInstance]];

复制代码

自定义format

自定义format需要创建一个类并遵循协议DDLogFormatter，然后实现方法。

@interface LogFormatter : NSObject

@end

@implementation LogFormatter

- (NSString * _Nullable)formatLogMessage:(nonnull DDLogMessage *)logMessage {

return [NSString stringWithFormat:@"[%@]:%@ line:%@ ----%@",logMessage->_fileName,logMessage->_function,@(logMessage->_line),logMessage->_message];

}

@end

复制代码

写入文件

fileLogger = [[DDFileLogger alloc] init];

fileLogger.maximumFileSize = 1024 * 1; // 1kb 文件最大大小

fileLogger.rollingFrequency = 60 * 1; // 60 Seconds 单个文件最大写日志时间

fileLogger.logFileManager.maximumNumberOfLogFiles = 4; //最大文件数

[DDLog addLogger:fileLogger];

复制代码

写入数据库

写入数据库需要实现自定义的Logger类,本文中使用的是官方demo的FMDBLogger

添加SQLiteLogger

sqliteLogger = [[FMDBLogger alloc] initWithLogDirectory:logsDirectory];

sqliteLogger.saveThreshold = 500; //当缓存到达阈值时写入

sqliteLogger.saveInterval = 60; // 60 seconds 当缓存超过60秒时写入

sqliteLogger.maxAge = 60 * 60 * 24 * 7; // 最大保存时间

sqliteLogger.deleteInterval = 60 * 5; //官方解释大概说，删除是一个很耗时的IO操作，所以设置一个时间间隔

sqliteLogger.deleteOnEverySave = NO;

[DDLog addLogger:sqliteLogger];

复制代码

局域网实时日志

大致步骤如下：

基于websocket实现对日志的实时传输

在APP中用js+HTML实现一个带websocket客户端的xxx.html文件

在APP开启webserver，并设置xxx.html为root document

在任何端用浏览器打开 http://yourIP:port,只需要浏览器支持websocket

APP当有websocket连接本地webserver 就拦截日志给JS的websocket客户端发送日志

HTML 代码

Live log

var dpr,rem,docEl=document.documentElement,fontEl=document.createElement("style"),scale=(docEl.clientWidth/375).toFixed(2);dpr=window.devicePixelRatio||1,1.4

打开浏览器审查元素，进入console界面

var url = window.location.origin.replace("http","ws")+"/livelog";

var ws = new WebSocket(url);

ws.onclose = function (event) {

console.log("ws close:",event.data);

}

ws.onerror = function (event) {

console.log("ws error:",event.data);

}

ws.onmessage = function (event) {

var data = event.data;

console.log(data);

}

ws.onopen = function (event) {console.log("ws opened");}

window.webs = ws;

复制代码

摇一摇分享

由于涉及项目其他业务，所以只提供思路。

日志开关在摇一摇之后展示一个alert页面的上配置，一旦开关打开则开始记录日志并写入本地文件一种。在复现问题或捕捉到想要的日志后再次摇一摇选择对应的日志，使用UIDocumentInteractionController分享到微信和airdrop即可。

摇一摇分享适合在非正式下的配置日志开关，如果线上版本，可以通过下面的方式开始。

上传服务端

根据业务需求自行上传。

demo 地址

参考

总结

本文重点还是说局域网下日志实时查看功能：

无论在DEBUG模式下还是通过console.app都需要手机连接到MAC电脑来查看实时日志。还有一些在APP内部附带日志控件的方式，这种方式会APP的性能有一定影响，对测试结果也会有影响。所以个人觉得局域网下面再网页端直接查看APP实时日志即减少了日志控件的性能的影响，也可以对日志进行筛选、复制、导出等操作。因此个人觉得值得一试。

如果觉得好用点个star吧 Logger