log解析工具 px4_console.log(console.log) = ?
在開始今天的內容之前,先想一下 console.log(console.log) 的結果是啥。
前面有一篇文章 別擔心把 console 帶到線上?介紹了關于 console 在線上不打印的操作,今天我給大家普及另外一種技巧:通過 url 參數控制。
比如線上訪問地址是:
https://www.suyan.com
如果想打印日志,可以輸入(添加參數 debug=1):
https://www.suyan.com?debug=1
接下來要解決的問題是如何「重寫 console.log 」,在重寫之前我們先要掌握 console 的本質是什么?很簡單直接看一看 console 的構造函數是啥。
從圖中可以看到 console 的本質是一個「全局函數」,那直接給這個全局函數賦值一個空函數即可達到我們的目的(讓 console.log 失效)。
console = function () {};但是這樣好嗎?導致所有的 console 不能用了,甚至在 Console 工具里都不能執行 console.log 了。那只能想其它辦法,下面是我的想法,也是本節內容的主題,通過 URL 來控制打印??偣卜忠韵聨撞?#xff1a;
1、解析 URL 參數中是否包含 debug?= 1
通過函數queryMap 找到 URL 的所有參數,返回 key:value 的形式。
2、替換 console把?console 中某些函數替換掉,比如 log,debug。替換后要保證兩點:
a、在 Console 工具中仍然可以使用 console.log;
b、在代碼中使用?console.log?,若不使用參數 debug 則不打印;
想要同時滿足上面兩條,基本上做不到,只能繞道而行。最終我使用了一種取巧的辦法,把原 console.log 函數指向?console.$log,這樣可以使用 console.$log 進行打印。代碼如下:
3、使用console.log('我只能在 debug 模式下打印');這個打印語句只能在使用參數?debug=1?的情況下打印:
https://www.suyan.com?debug=1
如果想在 Console 下進行打印,可以使用:
大家加油!!!!
推薦閱讀:
彎道超車 · 前端工程化
精心推薦一些瀏覽器工作原理的資料總結
以上是生活随笔為你收集整理的log解析工具 px4_console.log(console.log) = ?的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 基于Java+SpringBoot+vu
- 下一篇: Java Swing专栏订阅须知《必读》