浏览器持久化调试日志解决方案

一、痛点

当前前端调试日志面临无法持久化的问题。当前大家一定经历过为了复现一个前端问题，需要刷新多少遍页面，操作多少次业务流程；一定经历过客户现场偶先莫名其妙的问题，而后浏览器日志又取不到；一定经历过好不容易复现的问题，打开f12的时候，控制台却空空如也。所以，前端调试日志持久化解决方案，呼之欲出。

二、尝试

2.1 通过更改浏览器启动项设置日志

在一番百度大法好以后，发现谷歌浏览器可以通过设置启动项 --enable-logging --v=1 或者 --log-net-log=D:/log345.txt来启用日志记录。在我满心欢喜尝试这两种方案后，发现都不行。第一种设置，只会记录谷歌内核的日志，对我们来说毫无用处。第二种方案，虽然生成了log345.txt，然而里面却是空空如也。故这种方案pass

2.2 通过覆写console的原始方法，将日志记录在内存内，输出

大家都知道，console的几个方法（log,info,warn,error）都是可以覆写的，咱们可以通过这种方式，覆写console.xx，将日志内容截取到内存中保存，甚至要持久化的话，记录到localstorage中保存。这样可以在不打开控制台的情况下随时下载页面日志。在github找到这样一款迷你开源软件，就是实现了这样一种功能。可惜他的源码中么有覆写console的方法，也没有提供即插即用的方式来使用，而且存在IE不兼容的bug。。。我这里封装了一下，提供给大家一种即插即用的方式使用。

2.2.1步骤

• 看下下面的代码，做一些配置修改。默认的配置就2种，第一种是记录哪种类型的日志。默认为了节省内存，只记录error类型的日志。第二种是是否在页面上创建一个下载日志的按钮。

var config = {
   
    override_console_log: false, //--记录console.log的日志
    override_console_info: false, //--记录console.info的日志
    override_console_error: true,//--记录console.error的日志
    override_console_warn: false,//--记录console.warn的日志
    //--在页面第一次加载时创建下载按钮  可选 [false,'onload','immediately'] 
    //--immediately 立即创建下载按钮，用于在已经加载的页面执行该脚本
    create_download_btn:'immediately' 
}

• 如果你有能力修改部署源码，且你的客户可以接受右下角出现一个下载日志的按钮，那么很简单，create_download_btn应该设置为onload,直接在项目根html中引入如下脚本,运行即可。
• 如果你的客户不能接受按钮，且不能修改部署源码，那你应该在产品页面加载完之后，把create_download_btn设置为immediately拷贝如下代码到控制台执行。
• 如果你们客户对于安全要求不高，那么这段代码不应该产生下载日志的按钮，则create_download_btn可以设置为false，当你需要下载日志的时候，在控制后台输入如下代码即可：

__DEBUGOUT_INSTENCE__.downloadLog()

2.2.2 代码

由于工作环境问题，代码无法上传。这里需要大家先去下载debugout的dist包，做一些修改

var config = {
   
    override_console_log: false, //--记录console.log的日志
    override_console_info: false, //--记录console.info的日志