JavaScript开源:debugout.js-可将前端console.log的日志保存成文件
kntt9534
7年前
<p style="text-align:center"><img src="https://simg.open-open.com/show/4c7592a47c5b99b02505db050bd9ed9a.jpg"></p> <h2>介绍</h2> <p>一般来说,可以使用打开console面板,然后右键save,是可以将console.log输出的信息另存为log文件的。但是这就把所有的日志都包含进来了,如何只保存我想要的日志呢?</p> <p>(调试输出)从您的日志中生成可以搜索,时间戳,下载等的文本文件。 参见下面的一些例子。</p> <p>Debugout的log()接受任何类型的对象,包括函数。 Debugout不是一个猴子补丁,而是一个单独的记录类,你使用而不是控制台。</p> <p>调试的一些亮点:</p> <ul> <li> <p>在运行时或任何时间获取整个日志或尾部</p> </li> <li> <p>搜索并切片日志</p> </li> <li> <p>更好地了解可选时间戳的使用模式</p> </li> <li> <p>在一个地方切换实时日志记录(console.log)</p> </li> <li> <p>可选地将输出存储在window.localStorage中,并在每个会话中持续添加到同一个日志</p> </li> <li> <p>可选地,将日志上限为X个最新行以限制内存消耗</p> </li> </ul> <p>下图是使用downloadLog方法下载的日志文件。</p> <p><img src="https://simg.open-open.com/show/8d99dee5bc3e2ba649bc5572b511a205.jpg"></p> <h2>使用</h2> <p>在脚本顶部的全局命名空间中创建一个新的调试对象,并使用debugout的日志方法替换所有控制台日志方法:</p> <pre> <code class="language-javascript">var bugout = new debugout(); // instead of console.log('some object or string') bugout.log('some object or string');</code></pre> <h2>API</h2> <ul> <li> <p>log() -像console.log(), 但是会自动存储</p> </li> <li> <p>getLog() - 返回所有日志</p> </li> <li> <p>tail(numLines) - 返回尾部执行行日志,默认100行</p> </li> <li> <p>search(string) - 搜索日志</p> </li> <li> <p>getSlice(start, numLines) - 日志切割</p> </li> <li> <p>downloadLog() - 下载日志</p> </li> <li> <p>clear() - 清空日志</p> </li> <li> <p>determineType() - 一个更细粒度的typeof为您提供方便</p> </li> </ul> <h2>选项</h2> <pre> <code class="language-javascript">// log in real time (forwards to console.log) self.realTimeLoggingOn = true; // insert a timestamp in front of each log self.useTimestamps = false; // store the output using window.localStorage() and continuously add to the same log each session self.useLocalStorage = false; // set to false after you're done debugging to avoid the log eating up memory self.recordLogs = true; // to avoid the log eating up potentially endless memory self.autoTrim = true; // if autoTrim is true, this many most recent lines are saved self.maxLines = 2500; // how many lines tail() will retrieve self.tailNumLines = 100; // filename of log downloaded with downloadLog() self.logFilename = 'log.txt'; // max recursion depth for logged objects self.maxDepth = 25;</code></pre> <h2>输出示例</h2> <p>以下是您可以使用日志的几个示例。 每个示例假定您已经建立了一个调试对象并使用它进行日志记录:</p> <pre> <code class="language-javascript">var bugout = new debugout(); bugout.log('something'); bugout.log(somethingElse); bugout.log('etc');</code></pre> <p>示例 #1: 将日志下载为.txt文件的按钮</p> <p>只需调用debugout的downloadLog()方法即可。 您可以通过编辑self.logFilename来更改文件名。</p> <pre> <code class="language-javascript"><input type="button" value="Download log" onClick="bugout.downloadLog()"></code></pre> <p>示例 #2: 将日志附加到电子邮件的PhoneGap应用程序</p> <p>显示的示例使用Email Composer插件,并且还需要File插件:cordova插件添加org.apache.cordova.file。</p> <pre> <code class="language-javascript">function sendLog() { var logFile = bugout.getLog(); // save the file locally, so it can be retrieved from emailComposer window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) { // create the file if it doesn't exist fileSystem.root.getFile('log.txt', {create: true, exclusive: false}, function(file) { // create writer file.createWriter(function(writer) { // write writer.write(logFile); // when done writing, call up email composer writer.onwriteend = function(evt) { // params: subject,body,toRecipients,ccRecipients,bccRecipients,bIsHTML,attachments,filename var subject = 'Log from myApp'; var body = 'Attached is a log from my recent testing session.'; window.plugins.emailComposer.showEmailComposer(subject,body,[],[],[],false,['log.txt'], ['myApp log']); } }, fileSystemError); }, fileSystemError); }, fileSystemError); } function fileSystemError(error) { bugout.log('Error getting file system: '+error.code); }</code></pre> <h2>更多</h2> <ul> <li>如果发生错误或某些其他事件,请通过ajax请求将日志发布到您的服务器。</li> <li>允许用户下载提交表单的副本。</li> <li>生成收据供用户下载。</li> <li>记录调查答案,知道用户回答的问题。</li> </ul> <p> 项目主页:<a href="http://www.open-open.com/lib/view/home/1494897315351">http://www.open-open.com/lib/view/home/1494897315351</a></p>