JavaScript開源:debugout.js-可將前端console.log的日志保存成文件
介紹
一般來說,可以使用打開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請求將日志發布到您的服務器。
- 允許用戶下載提交表單的副本。
- 生成收據供用戶下載。
- 記錄調查答案,知道用戶回答的問題。