包裝 `console.log` 並保留調用堆棧

Question

在我的日志助手類中，我有以下內容：

this.myInfo = console.info.bind(console);

當我myInfo調用myInfo函數時，調用對象和行號被正確保留並記錄在 Chrome 開發工具中。

但是，當我運行myInfo ，除了console.info之外，我還想運行另一個本地函數。 因此，我想我可以將上面的內容包裝起來，它會起作用。 我想出了以下幾點：

var obj = this;
this.myInfo = (function() {
    console.info.apply(this, arguments);
    myOtherFunc.apply(obj, arguments);
}).bind(console);

問題是，與我的第一個示例不同，我丟失了console.info的調用上下文，並且在 devTools 中記錄了錯誤的行號和文件。

如何包裝第一個示例並為console.info保留正確的上下文？

Answer 1

您可以使用吸氣劑。 在 getter 中，您調用其他函數，然后將 console.info.bind(console) 返回給調用者。

 Object.defineProperty(this, "myInfo", { get: function () { myOtherFunc(); return console.info.bind(console); }});

在傳遞參數的情況下。 您可以定義以下函數：

 this.myInfo = function() { myOtherFunc.apply(null, arguments); return console.bind.apply(console, arguments); } // example of call this.myInfo(1,2,3)();

我有新的解決方案。 您可以在單獨的 JS 文件中實現您的 console.log 包裝器或使用 sourceURL 對其進行評估，然后轉到 Chrome DevTools 設置並將“console-wrapper.js” url 添加到黑盒模式或在第一條消息到達控制台時通過鏈接將此腳本黑盒。 當腳本被黑盒化時，所有消息都將在源代碼中具有正確的位置。 它適用於 Google Chrome Canary 的最新版本，並將在大約兩個月后穩定可用。

 eval("\\ function myAwesomeConsoleLogWrapper() {\\ console.log.call(console, arguments);\\ makeAnotherWork();\\ }\\ //# sourceURL=console-wrapper.js");

Answer 2

Alexey Kozyatinskiy 的方法很酷。 但是，如果像this.myInfo(1,2,3)()這樣不漂亮的代碼是比丑陋的控制台輸出更嚴重的問題，您可以使用您在問題中發布的包裝器並手動打印所需的文件名和行號從new Error().stack提取。 除非有一個團隊在做這個項目，否則我會親自使用 Alexey 的方法。