本篇文章來自一個需求，前端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...

總結

以上是生活随笔為你收集整理的终于找到你！如何将前端console.log的日志保存成文件?的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。