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

wayneli 發(fā)布于2019-08-20 16:35 / 2701人閱讀

摘要：于是，終于找到這個(gè)。的原理是將所有日志序列化后，保存到一個(gè)變量里。但是這就把所有的日志都包含進(jìn)來了，如何只保存我想要的日志呢調(diào)試輸出從您的日志中生成可以搜索，時(shí)間戳，下載等的文本文件。的接受任何類型的對(duì)象，包括函數(shù)。

本篇文章來自一個(gè)需求，前端websocket會(huì)收到各種消息，但是調(diào)試的時(shí)候，我希望把websoekt推送過來的消息都保存到一個(gè)文件里，如果出問題的時(shí)候，我可以把這些消息的日志文件提交給后端開發(fā)區(qū)分析錯(cuò)誤。但是在瀏覽器里，js一般是不能寫文件的。鼠標(biāo)另存為的方法也是不太好，因?yàn)闀?huì)保存所有的console.log的輸出。于是，終于找到這個(gè)debugout.js。

debugout.js的原理是將所有日志序列化后，保存到一個(gè)變量里。當(dāng)然這個(gè)變量不會(huì)無限大，因?yàn)槟J(rèn)的最大日志限制是2500行，這個(gè)是可配置的。另外，debugout.js也支持在localStorage里存儲(chǔ)日志的。

debugout.js

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

（調(diào)試輸出）從您的日志中生成可以搜索，時(shí)間戳，下載等的文本文件。參見下面的一些例子。

Debugout的log（）接受任何類型的對(duì)象，包括函數(shù)。 Debugout不是一個(gè)猴子補(bǔ)丁，而是一個(gè)多帶帶的記錄類，你使用而不是控制臺(tái)。

調(diào)試的一些亮點(diǎn)：

在運(yùn)行時(shí)或任何時(shí)間獲取整個(gè)日志或尾部

搜索并切片日志

更好地了解可選時(shí)間戳的使用模式

在一個(gè)地方切換實(shí)時(shí)日志記錄（console.log）

可選地將輸出存儲(chǔ)在window.localStorage中，并在每個(gè)會(huì)話中持續(xù)添加到同一個(gè)日志

可選地，將日志上限為X個(gè)最新行以限制內(nèi)存消耗

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

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

使用

在腳本頂部的全局命名空間中創(chuàng)建一個(gè)新的調(diào)試對(duì)象，并使用debugout的日志方法替換所有控制臺(tái)日志方法：

var bugout = new debugout();

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

API

log() -像console.log(), 但是會(huì)自動(dòng)存儲(chǔ)

getLog() - 返回所有日志

tail(numLines) - 返回尾部執(zhí)行行日志，默認(rèn)100行

search(string) - 搜索日志

getSlice(start, numLines) - 日志切割

downloadLog() - 下載日志

clear() - 清空日志

determineType() - 一個(gè)更細(xì)粒度的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;
···