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

wayneli 發布于2019-08-20 16:35 / 2679人閱讀

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

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

GPU云服務器云服務器終于找到 console.log console.log() js如何將json數據保存

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83020.html

前端補集 - 收藏集 - 掘金

摘要：原文地址一個非常適合入門學習的博客項目前端掘金一個非常適合入門學習的項目，代碼清晰結構合理新聞前端掘金介紹一個由編寫的新聞。深入淺出讀書筆記知乎專欄前端專欄前端掘金去年的一篇老文章，恰好今天專欄開通，遷移過來。破解前端面試（80% 應聘者不及格系列）：從閉包說起 - 掘金修訂說明：發布《80% 應聘者都不及格的 JS 面試題》之后，全網閱讀量超過 6W，在知乎、掘金、cnodejs ...

YorkChen 2019-08-29 12:41 評論0 收藏0
前端補集 - 收藏集 - 掘金

摘要：原文地址一個非常適合入門學習的博客項目前端掘金一個非常適合入門學習的項目，代碼清晰結構合理新聞前端掘金介紹一個由編寫的新聞。深入淺出讀書筆記知乎專欄前端專欄前端掘金去年的一篇老文章，恰好今天專欄開通，遷移過來。破解前端面試（80% 應聘者不及格系列）：從閉包說起 - 掘金修訂說明：發布《80% 應聘者都不及格的 JS 面試題》之后，全網閱讀量超過 6W，在知乎、掘金、cnodejs ...

AbnerMing 2019-08-20 16:57 評論0 收藏0
騰訊IVWEB前端工程化工具feflow思考與實踐

摘要：本篇文章主要介紹騰訊團隊從到在工程化的思考和實踐。的全稱是前端工作流，致力于提升研發效率和規范的工程化解決方案。最后騰訊團隊的工程化解決方案已經開源主頁如果對您的團隊或者項目有幫助，請給個支持一下哈 showImg(https://segmentfault.com/img/remote/1460000013362603?w=1200&h=400); 本篇文章主要介紹騰訊IVWEB團隊從...

TANKING 2019-08-26 11:48 評論0 收藏0
schedule_task_monitor 前端批跑模塊介紹

摘要：任務退出碼任務正常退出批跑模塊會接受到為，因為異常退出會接收到。主要注意的檢查項為連接未關閉等。每次任務退出后，批跑系統會檢測其是否為空，不為空則移動到目錄目錄下，并以版本號為文件夾存儲，以方便備份查看。背景隨著node的出現與發展，前端承擔了越來越多的職責。前端也有越來越多的場景需要使用批跑腳本利用爬蟲或者接口定時同步數據到DB 線上配置文件、數據文件定時批跑生成并發布到線...

高勝山 2019-08-22 16:15 評論0 收藏0
前端基礎進階（十五）：詳解 ES6 Modules

摘要：下載地址安裝一個好用的命令行工具在環境下，系統默認的非常難用，所以我個人比較推薦大家使用或者。下載地址安裝在命令行工具中使用查看版本的方式確保與都安裝好之后，我們就可以安裝了。前端基礎進階系列目錄 showImg(https://segmentfault.com/img/remote/1460000009654403?w=1240&h=272); 對于新人朋友來說，想要自己去搞定一個E...

Lowky 2019-08-21 18:31 評論0 收藏0