如何覆蓋Chrome中的console.log函數？

Question

我正在使用一個使用許多不同框架和自定義腳本（jQuery，Backbone，Bootstrap，Less僅舉幾例）的Web應用程序，它們中的任何一個都可以隨時打印控制台輸出。 一些輸出來自我剛才提到的框架，其他輸出來自剩余的console.log調用，這些調用是產品工作的先前工程師在代碼中留下的。

這是一個問題，因為所有數十行的額外輸出都與有效輸出混合在一起，並且很難解析所有這些行以檢查我的有效輸出是否正常工作。 我想要一個臨時解決方案來覆蓋Chrome中的console.log函數，以便我可以過濾掉某些消息並集中精力在我關心的輸出上。

如何使用自己的功能覆蓋Chrome中的console.log功能？

我已經嘗試創建一個Chrome擴展程序，並且可以正常工作-就擴展程序而言，我可以覆蓋console.log ，但是原始源中對console.log所有引用均未更改。

編輯：為清楚起見，我沒有在尋找另一個腳本添加到站點。 我正在尋找一種完全在Web瀏覽器中實現的解決方案，或者在不涉及更改在Web應用程序中下載源代碼的其他某種技術的情況下實現的解決方案。

Answer 1

不完全覆蓋console.log ，但是如果右鍵單擊控制台輸出中的任何行，您可以選擇“過濾器”>“隱藏來自.js的消息”。 它還可以讓您過濾掉404等錯誤消息，即使您可以覆蓋console.log ，您也可能無法執行。

Answer 2

Firefox可以通過about:config 更改特定擴展名的控制台日志記錄級別 。

Chrome沒有此功能。 您的選擇：

1. 右鍵單擊控制台消息行的白色（空白）部分，然后選擇“ 過濾器”>“從foo.js隱藏消息”，以過濾掉特定源文件中的所有消息。
2. 覆蓋一個或多個控制台方法（如已完成）。 此方法僅影響當前的腳本上下文。 Chrome擴展程序在自己的隔離環境中運行，它們具有自己的窗口對象，全局作用域和控制台對象。 您需要在每個擴展的執行上下文中粘貼並運行控制台更改腳本，並且所做的修改僅在卸載頁面之前生效。 您可以使用控制台底部顯示<page context>的下拉菜單來更改控制台的有效執行上下文。 請注意，頁面中的任何框架或iframe都有其自己的執行上下文，可使用框架下拉列表（最初設置為<top frame> ）進行訪問。

Answer 3

log是console對象的功能，您可以像這樣覆蓋它：

var logFn = console.log;  // save the original log function for later use
console.log = function(msg) {
    ...
    logFn.call(console, msg); // call original function if you want to
};

或者，使用閉包保存舊的日志功能：

console.log = (function(logFn) {
    return function(msg) {
        ...
        logFn.call(console, msg); // call original function if you want to
    };
})(console.log);

您需要盡早執行此操作，因為您希望其他框架/庫使用自定義的日志功能。