JavaScript開源:debugout.js-可將前端console.log的日志保存成文件

kntt9534 7年前發布 | 28K 次閱讀 JavaScript開發 JavaScript

介紹

一般來說,可以使用打開console面板,然后右鍵save,是可以將console.log輸出的信息另存為log文件的。但是這就把所有的日志都包含進來了,如何只保存我想要的日志呢?

(調試輸出)從您的日志中生成可以搜索,時間戳,下載等的文本文件。 參見下面的一些例子。

Debugout的log()接受任何類型的對象,包括函數。 Debugout不是一個猴子補丁,而是一個單獨的記錄類,你使用而不是控制臺。

調試的一些亮點:

  • 在運行時或任何時間獲取整個日志或尾部

  • 搜索并切片日志

  • 更好地了解可選時間戳的使用模式

  • 在一個地方切換實時日志記錄(console.log)

  • 可選地將輸出存儲在window.localStorage中,并在每個會話中持續添加到同一個日志

  • 可選地,將日志上限為X個最新行以限制內存消耗

下圖是使用downloadLog方法下載的日志文件。

使用

在腳本頂部的全局命名空間中創建一個新的調試對象,并使用debugout的日志方法替換所有控制臺日志方法:

var bugout = new debugout();

// instead of console.log('some object or string')
bugout.log('some object or string');

API

  • log() -像console.log(), 但是會自動存儲

  • getLog() - 返回所有日志

  • tail(numLines) - 返回尾部執行行日志,默認100行

  • search(string) - 搜索日志

  • getSlice(start, numLines) - 日志切割

  • downloadLog() - 下載日志

  • clear() - 清空日志

  • determineType() - 一個更細粒度的typeof為您提供方便

選項

// 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;

輸出示例

以下是您可以使用日志的幾個示例。 每個示例假定您已經建立了一個調試對象并使用它進行日志記錄:

var bugout = new debugout();
bugout.log('something');
bugout.log(somethingElse);
bugout.log('etc');

示例 #1: 將日志下載為.txt文件的按鈕

只需調用debugout的downloadLog()方法即可。 您可以通過編輯self.logFilename來更改文件名。

<input type="button" value="Download log" onClick="bugout.downloadLog()">

示例 #2: 將日志附加到電子郵件的PhoneGap應用程序

顯示的示例使用Email Composer插件,并且還需要File插件:cordova插件添加org.apache.cordova.file。

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);
}

更多

  • 如果發生錯誤或某些其他事件,請通過ajax請求將日志發布到您的服務器。
  • 允許用戶下載提交表單的副本。
  • 生成收據供用戶下載。
  • 記錄調查答案,知道用戶回答的問題。

 項目主頁:http://www.baiduhome.net/lib/view/home/1494897315351

 本文由用戶 kntt9534 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!