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>