在開始今天的內(nèi)容之前，先想一下 console.log(console.log) 的結(jié)果是啥。

前面有一篇文章 別擔(dān)心把 console 帶到線上?介紹了關(guān)于 console 在線上不打印的操作，今天我給大家普及另外一種技巧：通過 url 參數(shù)控制。

比如線上訪問地址是：

https://www.suyan.com

如果想打印日志，可以輸入(添加參數(shù) debug=1)：

https://www.suyan.com?debug=1

接下來要解決的問題是如何「重寫 console.log 」，在重寫之前我們先要掌握 console 的本質(zhì)是什么？很簡單直接看一看 console 的構(gòu)造函數(shù)是啥。

從圖中可以看到 console 的本質(zhì)是一個(gè)「全局函數(shù)」，那直接給這個(gè)全局函數(shù)賦值一個(gè)空函數(shù)即可達(dá)到我們的目的(讓 console.log 失效)。

console = function () {};

但是這樣好嗎？導(dǎo)致所有的 console 不能用了，甚至在 Console 工具里都不能執(zhí)行 console.log 了。那只能想其它辦法，下面是我的想法，也是本節(jié)內(nèi)容的主題，通過 URL 來控制打印。總共分以下幾步：

1、解析 URL 參數(shù)中是否包含 debug?= 1

通過函數(shù)queryMap 找到 URL 的所有參數(shù)，返回 key：value 的形式。

2、替換 console

把?console 中某些函數(shù)替換掉，比如 log，debug。替換后要保證兩點(diǎn)：

a、在 Console 工具中仍然可以使用 console.log；

b、在代碼中使用?console.log?，若不使用參數(shù) debug 則不打印；

想要同時(shí)滿足上面兩條，基本上做不到，只能繞道而行。最終我使用了一種取巧的辦法，把原 console.log 函數(shù)指向?console.$log，這樣可以使用 console.$log 進(jìn)行打印。代碼如下：

3、使用console.log('我只能在 debug 模式下打印');

這個(gè)打印語句只能在使用參數(shù)?debug=1?的情況下打印：

https://www.suyan.com?debug=1

如果想在 Console 下進(jìn)行打印，可以使用：

大家加油！！！！

---

推薦閱讀：

彎道超車 · 前端工程化

精心推薦一些瀏覽器工作原理的資料

總結(jié)

以上是生活随笔為你收集整理的log解析工具 px4_console.log(console.log) = ?的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。