如何在网页实时查看APP日志

时间 2019-11-07

标签如何网页实时查看 app 日志栏目 HTML 繁體版

原文原文链接

写在前面

对于一个已经上线的APP，若是没有本身的Log系统。一旦线上出现问题，你就会收到各类领导微信的艾特，各类客户投诉。因此一套本身成熟的Log系统是相当重要的。本文重点仍是说局域网下日志实时查看功能。html

需求分析

输入ios

支持文件写入和读取
支持设置单个文件大小
支持设置单个文件写入时间大小
支持设置日志文件总数
支持日志文件有效时间
支持数据库写入和读取
支持日志级别（Off、Error、Debug、Info、Verbose）
支持自定义format
支持控制台与console.app
支持日志过滤

输出git

支持摇一摇日志文件分享
支持局域网日志实时日志
支持日志文件上传到服务器
支持服务端对单个APP帐号或deviceID作日志开关

系统架构

功能实现

添加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) ，用下面的代替。web

[DDLog addLogger:[DDOSLogger sharedInstance]];
复制代码

自定义format

自定义format须要建立一个类并遵循协议DDLogFormatter，而后实现方法。sql

@interface LogFormatter : NSObject<DDLogFormatter>

@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数据库

添加SQLiteLoggermacos

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 代码缓存

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no"><meta name="theme-color" content="#000000">
        <title>Live log</title>
        <script>
            var dpr,rem,docEl=document.documentElement,fontEl=document.createElement("style"),scale=(docEl.clientWidth/375).toFixed(2);dpr=window.devicePixelRatio||1,1.4<scale&&(scale=1),rem=12*scale,docEl.setAttribute("data-dpr",dpr),docEl.setAttribute("data-scale",scale),docEl.firstElementChild.appendChild(fontEl),fontEl.innerHTML="html{font-size:"+rem+"px!important;}"
            </script>
    </head>
    <body>
        <a id="openApp">打开浏览器审查元素，进入console界面</a>
        <script>
            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;
            </script>

    </body>

</html>
复制代码

摇一摇分享

因为涉及项目其余业务，因此只提供思路。

日志开关在摇一摇以后展现一个alert页面的上配置，一旦开关打开则开始记录日志并写入本地文件一种。在复现问题或捕捉到想要的日志后再次摇一摇选择对应的日志，使用UIDocumentInteractionController分享到微信和airdrop便可。摇一摇分享适合在非正式下的配置日志开关，若是线上版本，能够经过下面的方式开始。

上传服务端

根据业务需求自行上传。

demo 地址

demo地址

参考

CocoaLumberjack

CocoaHTTPServer

总结

本文重点仍是说局域网下日志实时查看功能：不管在DEBUG模式下仍是经过console.app都须要手机链接到MAC电脑来查看实时日志。还有一些在APP内部附带日志控件的方式，这种方式会APP的性能有必定影响，对测试结果也会有影响。因此我的以为局域网下面再网页端直接查看APP实时日志即减小了日志控件的性能的影响，也能够对日志进行筛选、复制、导出等操做。所以我的以为值得一试。

若是以为好用点个star吧 Logger