終於找到你！如何將前端console.log的日誌保存成文件?

本篇文章來自一個需求，前端websocket會收到各類消息，可是調試的時候，我但願把websoekt推送過來的消息都保存到一個文件裏，若是出問題的時候，我能夠把這些消息的日誌文件提交給後端開發區分析錯誤。可是在瀏覽器裏，js通常是不能寫文件的。鼠標另存爲的方法也是不太好，由於會保存全部的console.log的輸出。因而，終於找到這個debugout.js。

debugout.js的原理是將全部日誌序列化後，保存到一個變量裏。固然這個變量不會無限大，由於默認的最大日誌限制是2500行，這個是可配置的。另外，debugout.js也支持在localStorage裏存儲日誌的。

debugout.js

通常來講，能夠使用打開console面板，而後右鍵save，是能夠將console.log輸出的信息另存爲log文件的。可是這就把全部的日誌都包含進來了，如何只保存我想要的日誌呢？

（調試輸出）從您的日誌中生成能夠搜索，時間戳，下載等的文本文件。 參見下面的一些例子。

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

調試的一些亮點：

• 在運行時或任什麼時候間獲取整個日誌或尾部
• 搜索並切片日誌
• 更好地瞭解可選時間戳的使用模式
• 在一個地方切換實時日誌記錄（console.log）
• 可選地將輸出存儲在window.localStorage中，並在每一個會話中持續添加到同一個日誌
• 可選地，將日誌上限爲X個最新行以限制內存消耗

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

官方提供的demo示例，歡迎試玩。http://inorganik.github.io/de...

使用

在腳本頂部的全局命名空間中建立一個新的調試對象，並使用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;
···

項目地址

https://github.com/inorganik/...

另外

我本身也模仿debugout.js寫了一個日誌保存的項目，該項目能夠在ie10及以上下載日誌。
debugout.js在ie瀏覽器上下載日誌的方式是有問題的。
項目地址：https://github.com/wangduandu...